1.flashCC中打开库，在一个元件中右键->Generate Sprite Sheet...设置如下：

2.点Export后得到playerWalk.png和playerWalk.plist，复制到当前项目目录的res文件夹下。如图:

3.修改resource.js

  1. var res = {
  2.     playerWalk_plist:"res/playerWalk.plist",
  3.     playerWalk_png:"res/playerWalk.png"
  4. };
  5.  
  6. var g_resources = [];
  7. for (var i in res) {
  8.     g_resources.push(res[i]);
  9. }

4.修改app.js

  1. var HelloWorldLayer = cc.Layer.extend({
  2.     sprite:null,
  3.     ctor:function () {
  4.         this._super();
  5.  
  6.         var size = cc.winSize;
  7.  
  8.         cc.spriteFrameCache.addSpriteFrames(res.playerWalk_plist,res.playerWalk_png);
  9.  
  10.         var sp=cc.Sprite.create("#playerWalk0000");//前面加'#'号,再加plist中的帧key名
  11.         sp.setPosition(cc.p(size.width*0.5,size.height*0.5));
  12.         this.addChild(sp);
  13.  
  14.         return true;
  15.     }
  16. });
  17.  
  18. var HelloWorldScene = cc.Scene.extend({
  19.     onEnter:function () {
  20.         this._super();
  21.         var layer = new HelloWorldLayer();
  22.         this.addChild(layer);
  23.     }
  24. });

5.playerWalk.plist

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  3. <plist version="1.0">
  4.     <dict>
  5.         <key>frames</key>
  6.         <dict>
  7.             <key>playerWalk0000</key>
  8.             <dict>
  9.                 <key>aliases</key>
  10.                 <array/>
  11.                 <key>sourceColorRect</key>
  12.                 <string>{{0,0},{46,67}}</string>
  13.                 <key>spriteOffset</key>
  14.                 <string>{0,0}</string>
  15.                 <key>spriteSize</key>
  16.                 <string>{46,67}</string>
  17.                 <key>spriteSourceSize</key>
  18.                 <string>{46,67}</string>
  19.                 <key>spriteTrimmed</key>
  20.                 <false/>
  21.                 <key>textureRect</key>
  22.                 <string>{{0,0},{46,67}}</string>
  23.                 <key>textureRotated</key>
  24.                 <false/>
  25.             </dict>
  26.             <key>playerWalk0001</key>
  27.             <dict>
  28.                 <key>aliases</key>
  29.                 <array/>
  30.                 <key>sourceColorRect</key>
  31.                 <string>{{0,0},{46,67}}</string>
  32.                 <key>spriteOffset</key>
  33.                 <string>{0,0}</string>
  34.                 <key>spriteSize</key>
  35.                 <string>{46,67}</string>
  36.                 <key>spriteSourceSize</key>
  37.                 <string>{46,67}</string>
  38.                 <key>spriteTrimmed</key>
  39.                 <false/>
  40.                 <key>textureRect</key>
  41.                 <string>{{46,0},{46,67}}</string>
  42.                 <key>textureRotated</key>
  43.                 <false/>
  44.             </dict>
  45.             <key>playerWalk0002</key>
  46.             <dict>
  47.                 <key>aliases</key>
  48.                 <array/>
  49.                 <key>sourceColorRect</key>
  50.                 <string>{{0,0},{46,67}}</string>
  51.                 <key>spriteOffset</key>
  52.                 <string>{0,0}</string>
  53.                 <key>spriteSize</key>
  54.                 <string>{46,67}</string>
  55.                 <key>spriteSourceSize</key>
  56.                 <string>{46,67}</string>
  57.                 <key>spriteTrimmed</key>
  58.                 <false/>
  59.                 <key>textureRect</key>
  60.                 <string>{{92,0},{46,67}}</string>
  61.                 <key>textureRotated</key>
  62.                 <false/>
  63.             </dict>
  64.             <key>playerWalk0003</key>
  65.             <dict>
  66.                 <key>aliases</key>
  67.                 <array/>
  68.                 <key>sourceColorRect</key>
  69.                 <string>{{0,0},{46,67}}</string>
  70.                 <key>spriteOffset</key>
  71.                 <string>{0,0}</string>
  72.                 <key>spriteSize</key>
  73.                 <string>{46,67}</string>
  74.                 <key>spriteSourceSize</key>
  75.                 <string>{46,67}</string>
  76.                 <key>spriteTrimmed</key>
  77.                 <false/>
  78.                 <key>textureRect</key>
  79.                 <string>{{138,0},{46,67}}</string>
  80.                 <key>textureRotated</key>
  81.                 <false/>
  82.             </dict>
  83.             <key>playerWalk0004</key>
  84.             <dict>
  85.                 <key>aliases</key>
  86.                 <array/>
  87.                 <key>sourceColorRect</key>
  88.                 <string>{{0,0},{46,67}}</string>
  89.                 <key>spriteOffset</key>
  90.                 <string>{0,0}</string>
  91.                 <key>spriteSize</key>
  92.                 <string>{46,67}</string>
  93.                 <key>spriteSourceSize</key>
  94.                 <string>{46,67}</string>
  95.                 <key>spriteTrimmed</key>
  96.                 <false/>
  97.                 <key>textureRect</key>
  98.                 <string>{{184,0},{46,67}}</string>
  99.                 <key>textureRotated</key>
  100.                 <false/>
  101.             </dict>
  102.             <key>playerWalk0005</key>
  103.             <dict>
  104.                 <key>aliases</key>
  105.                 <array/>
  106.                 <key>sourceColorRect</key>
  107.                 <string>{{0,0},{46,67}}</string>
  108.                 <key>spriteOffset</key>
  109.                 <string>{0,0}</string>
  110.                 <key>spriteSize</key>
  111.                 <string>{46,67}</string>
  112.                 <key>spriteSourceSize</key>
  113.                 <string>{46,67}</string>
  114.                 <key>spriteTrimmed</key>
  115.                 <false/>
  116.                 <key>textureRect</key>
  117.                 <string>{{0,67},{46,67}}</string>
  118.                 <key>textureRotated</key>
  119.                 <false/>
  120.             </dict>
  121.             <key>playerWalk0006</key>
  122.             <dict>
  123.                 <key>aliases</key>
  124.                 <array/>
  125.                 <key>sourceColorRect</key>
  126.                 <string>{{0,0},{46,67}}</string>
  127.                 <key>spriteOffset</key>
  128.                 <string>{0,0}</string>
  129.                 <key>spriteSize</key>
  130.                 <string>{46,67}</string>
  131.                 <key>spriteSourceSize</key>
  132.                 <string>{46,67}</string>
  133.                 <key>spriteTrimmed</key>
  134.                 <false/>
  135.                 <key>textureRect</key>
  136.                 <string>{{46,67},{46,67}}</string>
  137.                 <key>textureRotated</key>
  138.                 <false/>
  139.             </dict>
  140.             <key>playerWalk0007</key>
  141.             <dict>
  142.                 <key>aliases</key>
  143.                 <array/>
  144.                 <key>sourceColorRect</key>
  145.                 <string>{{0,0},{46,67}}</string>
  146.                 <key>spriteOffset</key>
  147.                 <string>{0,0}</string>
  148.                 <key>spriteSize</key>
  149.                 <string>{46,67}</string>
  150.                 <key>spriteSourceSize</key>
  151.                 <string>{46,67}</string>
  152.                 <key>spriteTrimmed</key>
  153.                 <false/>
  154.                 <key>textureRect</key>
  155.                 <string>{{92,67},{46,67}}</string>
  156.                 <key>textureRotated</key>
  157.                 <false/>
  158.             </dict>
  159.             <key>playerWalk0008</key>
  160.             <dict>
  161.                 <key>aliases</key>
  162.                 <array/>
  163.                 <key>sourceColorRect</key>
  164.                 <string>{{0,0},{46,67}}</string>
  165.                 <key>spriteOffset</key>
  166.                 <string>{0,0}</string>
  167.                 <key>spriteSize</key>
  168.                 <string>{46,67}</string>
  169.                 <key>spriteSourceSize</key>
  170.                 <string>{46,67}</string>
  171.                 <key>spriteTrimmed</key>
  172.                 <false/>
  173.                 <key>textureRect</key>
  174.                 <string>{{138,67},{46,67}}</string>
  175.                 <key>textureRotated</key>
  176.                 <false/>
  177.             </dict>
  178.             <key>playerWalk0009</key>
  179.             <dict>
  180.                 <key>aliases</key>
  181.                 <array/>
  182.                 <key>sourceColorRect</key>
  183.                 <string>{{0,0},{46,67}}</string>
  184.                 <key>spriteOffset</key>
  185.                 <string>{0,0}</string>
  186.                 <key>spriteSize</key>
  187.                 <string>{46,67}</string>
  188.                 <key>spriteSourceSize</key>
  189.                 <string>{46,67}</string>
  190.                 <key>spriteTrimmed</key>
  191.                 <false/>
  192.                 <key>textureRect</key>
  193.                 <string>{{184,67},{46,67}}</string>
  194.                 <key>textureRotated</key>
  195.                 <false/>
  196.             </dict>
  197.             <key>playerWalk0010</key>
  198.             <dict>
  199.                 <key>aliases</key>
  200.                 <array/>
  201.                 <key>sourceColorRect</key>
  202.                 <string>{{0,0},{46,67}}</string>
  203.                 <key>spriteOffset</key>
  204.                 <string>{0,0}</string>
  205.                 <key>spriteSize</key>
  206.                 <string>{46,67}</string>
  207.                 <key>spriteSourceSize</key>
  208.                 <string>{46,67}</string>
  209.                 <key>spriteTrimmed</key>
  210.                 <false/>
  211.                 <key>textureRect</key>
  212.                 <string>{{0,134},{46,67}}</string>
  213.                 <key>textureRotated</key>
  214.                 <false/>
  215.             </dict>
  216.             <key>playerWalk0011</key>
  217.             <dict>
  218.                 <key>aliases</key>
  219.                 <array/>
  220.                 <key>sourceColorRect</key>
  221.                 <string>{{0,0},{46,67}}</string>
  222.                 <key>spriteOffset</key>
  223.                 <string>{0,0}</string>
  224.                 <key>spriteSize</key>
  225.                 <string>{46,67}</string>
  226.                 <key>spriteSourceSize</key>
  227.                 <string>{46,67}</string>
  228.                 <key>spriteTrimmed</key>
  229.                 <false/>
  230.                 <key>textureRect</key>
  231.                 <string>{{46,134},{46,67}}</string>
  232.                 <key>textureRotated</key>
  233.                 <false/>
  234.             </dict>
  235.             <key>playerWalk0012</key>
  236.             <dict>
  237.                 <key>aliases</key>
  238.                 <array/>
  239.                 <key>sourceColorRect</key>
  240.                 <string>{{0,0},{46,67}}</string>
  241.                 <key>spriteOffset</key>
  242.                 <string>{0,0}</string>
  243.                 <key>spriteSize</key>
  244.                 <string>{46,67}</string>
  245.                 <key>spriteSourceSize</key>
  246.                 <string>{46,67}</string>
  247.                 <key>spriteTrimmed</key>
  248.                 <false/>
  249.                 <key>textureRect</key>
  250.                 <string>{{92,134},{46,67}}</string>
  251.                 <key>textureRotated</key>
  252.                 <false/>
  253.             </dict>
  254.             <key>playerWalk0013</key>
  255.             <dict>
  256.                 <key>aliases</key>
  257.                 <array/>
  258.                 <key>sourceColorRect</key>
  259.                 <string>{{0,0},{46,67}}</string>
  260.                 <key>spriteOffset</key>
  261.                 <string>{0,0}</string>
  262.                 <key>spriteSize</key>
  263.                 <string>{46,67}</string>
  264.                 <key>spriteSourceSize</key>
  265.                 <string>{46,67}</string>
  266.                 <key>spriteTrimmed</key>
  267.                 <false/>
  268.                 <key>textureRect</key>
  269.                 <string>{{138,134},{46,67}}</string>
  270.                 <key>textureRotated</key>
  271.                 <false/>
  272.             </dict>
  273.             <key>playerWalk0014</key>
  274.             <dict>
  275.                 <key>aliases</key>
  276.                 <array/>
  277.                 <key>sourceColorRect</key>
  278.                 <string>{{0,0},{46,67}}</string>
  279.                 <key>spriteOffset</key>
  280.                 <string>{0,0}</string>
  281.                 <key>spriteSize</key>
  282.                 <string>{46,67}</string>
  283.                 <key>spriteSourceSize</key>
  284.                 <string>{46,67}</string>
  285.                 <key>spriteTrimmed</key>
  286.                 <false/>
  287.                 <key>textureRect</key>
  288.                 <string>{{184,134},{46,67}}</string>
  289.                 <key>textureRotated</key>
  290.                 <false/>
  291.             </dict>
  292.             <key>playerWalk0015</key>
  293.             <dict>
  294.                 <key>aliases</key>
  295.                 <array/>
  296.                 <key>sourceColorRect</key>
  297.                 <string>{{0,0},{46,67}}</string>
  298.                 <key>spriteOffset</key>
  299.                 <string>{0,0}</string>
  300.                 <key>spriteSize</key>
  301.                 <string>{46,67}</string>
  302.                 <key>spriteSourceSize</key>
  303.                 <string>{46,67}</string>
  304.                 <key>spriteTrimmed</key>
  305.                 <false/>
  306.                 <key>textureRect</key>
  307.                 <string>{{0,0},{46,67}}</string>
  308.                 <key>textureRotated</key>
  309.                 <false/>
  310.             </dict>
  311.         </dict>
  312.         <key>metadata</key>
  313.         <dict>
  314.             <key>format</key>
  315.             <integer>3</integer>
  316.             <key>size</key>
  317.             <string>{256,256}</string>
  318.             <key>target</key>
  319.             <dict>
  320.                 <key>name</key>
  321.                 <string>playerWalk.png</string>
  322.                 <key>textureFileName</key>
  323.                 <string>playerWalk</string>
  324.                 <key>textureFileExtension</key>
  325.                 <string>png</string>
  326.                 <key>premultipliedAlpha</key>
  327.                 <true/>
  328.             </dict>
  329.         </dict>
  330.     </dict>
  331. </plist>

cocos2d-js 显示帧序列图中的一帧的更多相关文章

  1. UML中的序列图（时序图）

    序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时.生命 ...

  2. 【夯实PHP基础】UML序列图总结

    原文地址 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色 ...

  3. UML序列图总结（Loop、Opt、Par和Alt）

    序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...

  4. UML序列图总结

    转载请注明出处:htt://blog.csdn.net/tianhai110 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在 ...

  5. (转)UML序列图总结

    序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...

  6. UML 之 序列图和协作图

    序列图(Sequence Diagram)     亦称为时序图或循序图,是一种UML行为图.它通过描写叙述对象之间发送消息的时间顺序显示多个对象之间的动态协作.它能够表示用例的行为顺序,当运行一个用 ...

  7. UML序列图总结(转)

    序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...

  8. UML 序列图

    序列图      序列图主要用于按照交互发生的一系列顺序,显示对象之间的这些交互.显示不同的业务对象如何交互,对于交流当前业务如何进行很有用.序列图是一个用来记录系统需求,和整理系统设计的好图.序列图 ...

  9. UML 序列图详解

    现在是二月,而且到如今你或许已经读到.或听到人们谈论UML 2.0 —— 包括若干进步的 UML 的新规范,所做的变化.考虑到新规范的重要性,我们也正在修改这个文章系列的基础,把我们的注意力从 OMG ...

随机推荐

  1. windows 环境下搭建django 错误分析总结

    最近对于python核心编程学习完后,想进一步学习django的web开发,考虑再三还是决定在本机(win7)上搭建环境. 刚接触难免会出现问题,最大的一个问题是安装完django的包后,在cmd命令 ...

  2. 2.2 Xpath-helper (chrome插件) 爬虫、网页分析解析辅助工具

    1. Xpath-helper下载 可以直接在chrome浏览器中的扩展程序搜索 Xpath-helper进行添加 也可以直接在http://www.chromein.com/crx_11654.ht ...

  3. JavaScript（10）——Ajax以及跨域处理

    Ajax以及跨域处理 哈哈哈,终于写到最后一章了.不过也还没有结束,说,不要为了学习而学习,恩.我是为了好好学习而学习呀.哈哈哈.正在尝试爱上代码,虽然有一丢丢的难,不过,我相信我会的! [Ajax] ...

  4. A. Night at the Museum Round#376 (Div. 2)

    A. Night at the Museum time limit per test 1 second memory limit per test 256 megabytes input standa ...

  5. 《C++ Primer》之面向对象编程（三）

    继承情况下的类作用域 在继承情况下,派生类的作用域嵌套在基类作用域中.如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义.正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就 ...

  6. H5的新应用-使用Web Worker为学生考试计时

    -------------------------- <script type="text/javascript">            //初始化函数       ...

  7. Java类和类成员的访问权限修饰符

    一:访问修饰符: 1.省略访问修饰符 具有默认的访问特性,即具有包访问特性,只能被同一个包中的类使用. 2.public访问修饰符 用于说明类和类的成员的访问权限.这种类叫公有类.在一个文件中只能有一 ...

  8. nodejs全局安装与本地安装区别

    本地安装 1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modul ...

  9. hdu_5683_zxa and xor(非正解的暴力)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5683 题意: 问题描述 zxa最近对按位异或(exclusive disjunction)产生了极大的 ...

  10. QQ 自动接收远程连接之关闭了远程桌面

    之前使用都好好的,后来就不知道怎么了突然就不行了,在另外一个远程桌面软件(向日葵)失效后,木有办法,查查查,终于查出来了,是我本机的时间服务停止了,导致我本机的时间和服务器时间不一致,所以连接不上.只 ...