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 ...
随机推荐
- static 控件颜色修改
在对话框上放一个StaticText控件后如果文字长度不能铺满控件的 rect,如下: 那么运行时会出现如下效果 通过MSG_WM_CTLCOLORSTATIC消息修改static控件背景色模式为透明 ...
- D - 娜娜梦游仙境系列——村民的怪癖
D - 娜娜梦游仙境系列——村民的怪癖 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Othe ...
- hdu 5584 gcd/lcm/数学公式
input T 1<=T<=1000 x y output 有多少个起点可以走n(n>=0)步走到(x,y),只能从(x,y)走到(x,y+lcm(x,y))/(x+lcm(x,y) ...
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- JavaScript（3）—— 正则表达式
---恢复内容开始--- 正则表达式 这是写的正则表达式,正则表达式的点比较多,也比较细.所以有些地方我们得注意的比较多.正则表达式在JS中是很重要的一个部分,其中他的语法都得牢记.不过最好还是理解性 ...
- 《JavaScript高级程序设计》读书笔记 ---语句
do-while语句do-while 语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.换句话说,在对条件表达式求值之前,循环体内的代码至少会被执行一次.以下是do-whil ...
- [转]深入浅出JSONP--解决ajax跨域问题
取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...
- Flask -- 使用数据库(Sqlite3)、用户注册、登录注销、修改密码
# 使用sqlite数据库 import sqlite3from contextlib import closing app.config.update( DATABASE = 'my.db', #相 ...
- iOStextView的代理方法展示
UITextView的代理方法 textViewShouldBeginEditing: and textViewDidBeginEditing: - (BOOL)textViewShouldBegin ...
- bash color
紫色:300A24 黄色:C4A000 Tango 紫色: 200213