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 ...
随机推荐
- PHP input 显示html 元素
使用函数 htmlspecialchars ,转换保存的html源码,前台使用转换后的变量.
- [译] Block 小测验
本文来源于 ParseBlog 的其中一篇博文 <Objective-C Blocks Quiz> 如果您觉得我的博客对您有帮助,请通过关注我的新浪微博 MicroCai 支持我,谢谢! ...
- 浅谈SharePoint 2013 站点模板开发 转载自http://www.cnblogs.com/jianyus/p/3511550.html
一直以来所接触的SharePoint开发,都是Designer配合Visual Studio,前者设计页面,后者开发功能,相互合作,完成SharePoint网站开发.直到SharePoint 2013 ...
- SASL - 简单认证和安全层
转自:http://blog.csdn.net/id19870510/article/details/8232509 SASL - 简单认证和安全层 SASL是一种用来扩充C/S模式验证能力的机制认证 ...
- Python基础（四）-集合
补充: 数据类型分类: 1.按照数据可变不可变: 可变:列表.字典 不可变:数字.字符串.元组 x={':1} print(id(x)) x.update({':2}) print(x) print( ...
- C语言的常用字符串操作函数（一）
一直做的是单片机相关的程序设计,所以程序设计上更偏向底层,对于字符串的操作也仅限于液晶屏幕上的显示等工作,想提高下字符串操作的水平,而不是笨拙的数组替换等方式,翻看帖子发现C语言的字符串操作函数竟然这 ...
- 怎么取消ie浏览器body与html的间隙
在css文件第一行定义全局样式,可以消除html标签默认间隙*{margin:0;padding:0;}
- ios 测试工程是否内存泄漏
转自http://www.cocoachina.com/ios/20141203/10519.html 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是可能存在.所 ...
- php 关了浏览器也可以自动运行脚本
<?php ignore_user_abort(); //即使Client断开(如关掉浏览器),PHP脚本也可以继续执行. set_time_limit(0); //执行时间为无限制,php默认 ...
- 四、oracle 用户管理(Profile)
oracle 用户管理 :profile + tablespace + role + user 一.使用profile管理用户口令概述:profile是口令限制,资源限制的命令集合,当建立数据库时, ...