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 ...
随机推荐
- tomcat配置多个虚拟主机
先修改默认端口(8080),http的默认端口是80,我们将8080改成80,这样域名就不用带上端口了 修改conf文件夹下的server.xml文件 添加多个主机(以下三个主机对应三个域名,三个域名 ...
- mysql sql语句大全(转载)
1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 ...
- HDU - 1045 Fire Net（搜索）
Description Suppose that we have a square city with straight streets. A map of a city is a square bo ...
- Linux Debian 7部署LEMP（Linux+Nginx+MySQL+PHP）网站环境
我们在玩VPS搭建网站环境的时候,都经常看到所谓的LAMP.LNMP.LEMP,LAMP, 其中的A代表APECHE WEB驱动环境,LNMP中的N代表NGINX驱动环境,只不过海外的叫法NGINX ...
- 深入了解当前ETL的一些基本技术
数据集成是把不同来源.格式和特点的数据在逻辑上或物理上有机地集中,从而为企业提供全 面的数据共享,是企业商务智能.数据仓库系统的重要组成部分.ETL是企业数据集成的概念出发,简要分析了当前ETL中用到 ...
- Java語言
Java编程语言是个简单.完全面向对象.分布式.解释性.健壮.安全与系统无关.可移植.高性能.多线程和动态的编程语言. Java可以撰写跨平台应用软件,是有Sun Microsystems公司于199 ...
- hdu_3067_小t的游戏(脑洞)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3067 题意:中文,不解释 题解:一看就知道是要找规律的题,都是有循环节的,看代码. #include ...
- ios控件 UIImageView
UIImageView的作用是显示图片和多张动态的图片 - (id)initWithImage:(UIImage *)image;//初始化图片视图 - (id)initWithImage:(UI ...
- iOS长按选择
确实,其实就是一个长按手势 + 图片二维码识别,原生SDK从8.0开始支持 /** * 从照片中直接识别二维码 * @param qrCodeImage 带二维码的图片 * @param myQ ...
- QML Flipable、Flickable和状态与动画 上篇
本文介绍的是QML Flipable.Flickable和状态与动画,我们以前接触过QML组件,和一些QML相关的内容,那么本文介绍的内容就很明了了.先来看内容. AD:51CTO 网+ 第十二期沙龙 ...