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 ...
随机推荐
- 创建透明CEdit控件
1.在资源编辑器中将Edit控件的Border设为none(当然也可以在代码中修改窗口样式) 2.在重载CEdit的类中响应MSG_OCM_CTLCOLOREDIT消息,在处理函数中将背景模式设为透明 ...
- 给当前的URL添加/更新新的参数
/** * 给当前的URL添加/更新新的参数 * @param a 参数 * @param b 值 * @returns {string} 新的参数 * @constructor */ functio ...
- java代码块 静态、非静态
Java虚拟机的内存分区:Java栈.堆.方法区.本地方法栈.PC寄存器.还有一个常量池的概念,虚拟机会为每种类型分配一个常量池,而不是实例. 例如有一个类有很多子类,那么在父类定义的final变量, ...
- SharePoint 2013 配置InfoPath 列表表单
转载来源:http://www.cnblogs.com/jianyus/p/3470113.html SharePoint列表,都是通过表单展示,有时候不太符合要求,这时候,我们可以通过定制表单,来是 ...
- CSS3 transform的demo1
<!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset=&q ...
- Linux系统安装建议
1.推荐使用CentOS-6.x 64位版本:2.分区,推荐分出/usr/local用来存放应用程序./data分区用来存放数据,具体分区建议如下:/boot 100Mswap 4096M (视内存大 ...
- Stash安装和破解
参考资料: http://www.unxmail.com/?p=590 上篇介绍了,Atlassian Stash v2.12.1 破解版的下载, 有同学不会安装. 我重新整理了下文档. 表述我的安装 ...
- android中对Bitmap图片设置任意角为圆角
http://blog.csdn.net/l448288137/article/details/48276681 最近项目开发中使用到了圆角图片,网上找到的圆角图片控件大多比较死板,只可以全圆角.其中 ...
- Objective-C和Swift实现单例的几种方式
在Swift开发中,我们对于跨类调用的变量常量,因为并没有OC中使用的全局头文件中写宏的形式,我们一般采用在类外定义全局变量/常量的形式来跨类调用.而问题在于目前写的项目需要在新添加的OC写的功能模块 ...
- SuperMapPy 批量拼接 GeoTiff影像
影像拼接工具使用说明 一.影像像素位深检查 1.采用开源库GDAL的gdalinfo.exe读取GeoTiff文件的信息,如类型.投影,范围等. 2.采用DOS脚本遍历所有GeoTiff文件,输出各个 ...