cocos2d-js 显示帧序列图中的一帧
1.flashCC中打开库，在一个元件中右键->Generate Sprite Sheet...设置如下：
2.点Export后得到playerWalk.png和playerWalk.plist，复制到当前项目目录的res文件夹下。如图:
3.修改resource.js
var res = {
playerWalk_plist:"res/playerWalk.plist",
playerWalk_png:"res/playerWalk.png"
};
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);
}
4.修改app.js
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
this._super();
var size = cc.winSize;
cc.spriteFrameCache.addSpriteFrames(res.playerWalk_plist,res.playerWalk_png);
var sp=cc.Sprite.create("#playerWalk0000");//前面加'#'号,再加plist中的帧key名
sp.setPosition(cc.p(size.width*0.5,size.height*0.5));
this.addChild(sp);
return true;
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
5.playerWalk.plist
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>frames</key>
<dict>
<key>playerWalk0000</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{0,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0001</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{46,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0002</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{92,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0003</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{138,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0004</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{184,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0005</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{0,67},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0006</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{46,67},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0007</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{92,67},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0008</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{138,67},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0009</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{184,67},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0010</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{0,134},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0011</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{46,134},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0012</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{92,134},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0013</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{138,134},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0014</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{184,134},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
<key>playerWalk0015</key>
<dict>
<key>aliases</key>
<array/>
<key>sourceColorRect</key>
<string>{{0,0},{46,67}}</string>
<key>spriteOffset</key>
<string>{0,0}</string>
<key>spriteSize</key>
<string>{46,67}</string>
<key>spriteSourceSize</key>
<string>{46,67}</string>
<key>spriteTrimmed</key>
<false/>
<key>textureRect</key>
<string>{{0,0},{46,67}}</string>
<key>textureRotated</key>
<false/>
</dict>
</dict>
<key>metadata</key>
<dict>
<key>format</key>
<integer>3</integer>
<key>size</key>
<string>{256,256}</string>
<key>target</key>
<dict>
<key>name</key>
<string>playerWalk.png</string>
<key>textureFileName</key>
<string>playerWalk</string>
<key>textureFileExtension</key>
<string>png</string>
<key>premultipliedAlpha</key>
<true/>
</dict>
</dict>
</dict>
</plist>
cocos2d-js 显示帧序列图中的一帧的更多相关文章
- UML中的序列图（时序图）
序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时.生命 ...
- 【夯实PHP基础】UML序列图总结
原文地址 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色 ...
- UML序列图总结（Loop、Opt、Par和Alt）
序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...
- UML序列图总结
转载请注明出处:htt://blog.csdn.net/tianhai110 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在 ...
- (转)UML序列图总结
序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...
- UML 之 序列图和协作图
序列图(Sequence Diagram) 亦称为时序图或循序图,是一种UML行为图.它通过描写叙述对象之间发送消息的时间顺序显示多个对象之间的动态协作.它能够表示用例的行为顺序,当运行一个用 ...
- UML序列图总结(转)
序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...
- UML 序列图
序列图 序列图主要用于按照交互发生的一系列顺序,显示对象之间的这些交互.显示不同的业务对象如何交互,对于交流当前业务如何进行很有用.序列图是一个用来记录系统需求,和整理系统设计的好图.序列图 ...
- UML 序列图详解
现在是二月,而且到如今你或许已经读到.或听到人们谈论UML 2.0 —— 包括若干进步的 UML 的新规范,所做的变化.考虑到新规范的重要性,我们也正在修改这个文章系列的基础,把我们的注意力从 OMG ...
随机推荐
- Gentoo安装详解（三）-- 配置系统
配置系统 系统信息: 文件系统信息: 创建/etc/fstab nano -w /etc/fstab 网络信息: Host name, Domainname, etc nano -w /etc/con ...
- 解决MOSS列表匿名访问问题
//匿名 http://blog.csdn.net/yang_5/article/details/5214293 这是发布以后MOSS网站,如果你一开始在内部都没有启用匿名访问,你设置这个是不启作用 ...
- 关于echarts使用的各种问题
此文为作者辛苦编写,如有转发,请注明出处,谢谢 首先引入js文件,这是动态引入 <script src="http://echarts.baidu.com/build/dist/ech ...
- 归并排序的go语言与C++实现对比
最近对go语言发生了兴趣,发现go语言语法简洁,非常适合算法的描述和实现,于是对归并排序进行了实现. 例子中需要排序的队列是长度为100的从100到1的数列,排序算法是正序排序,排序正确的话,结果应当 ...
- Find and run the whalesay image
Find and run the whalesay image People all over the world create Docker images. You can find these i ...
- 12C CLONE PDB and config service_listener
Clone PDB PtestDEV to Ptestuat in testuat 1) Clone PtestDEV to Ptestuat C:\Windows\system32> ...
- Sql sever 常用语句（续）
distintct: 查询结果排除了重复项(合并算一项)--如查姓名 select distinct ReaName from UserInfo 分页语句:(查询区间时候应该查询出行号,作为分页的 ...
- C语言_用if```else语句解决奖金发放问题
#include<stdio.h> #include<stdlib.h> /*企业发放的奖金根据利润提成,发放规则如下: 利润(I)低于或等于10万元时,奖金可提10%: 利润 ...
- MFC中修改默认启动对话框方法
// CMyAppEApp 初始化 BOOL CMyAppEApp::InitInstance(){// 如果一个运行在 Windows XP 上的应用程序清单指定要// 使用 ComCtl32.dl ...
- Chapter 2 Open Book——9
When I was finished with that, I took my book bag upstairs. Before starting my homework, I changed i ...