原文:Learning Cocos2d-x for WP8（7）——让Sprite动起来

C#(wp7)兄弟篇Learning Cocos2d-x for XNA（7）——让Sprite动起来

本讲将详细介绍Cocos2d-x游戏中动画Animate的创建方式，通过逐帧数组播放动画和创建动画集合播放动画，比较两者的异同，让Sprite动起来。

工程文件：SpriteAnimationTest.h和SpriteAnimationTest.cpp

SpriteAnimationTest.h

添加两类预处理SpriteAnimateFrameScene和SpriteAnimateFrameLayer

核心代码

SpriteAnimationTest.h

 #ifndef _SPRITE_ANIMATION_TEST_

 #define _SPRITE_ANIMATION_TEST_

 #include "cocos2d.h"

 using namespace cocos2d;

 class SpriteAnimateFrameScene:public CCScene

 {

 public:

     SpriteAnimateFrameScene();

     ~SpriteAnimateFrameScene();

     virtual void onEnter();

 };

 class SpriteAnimateFrameLayer:public CCLayer

 {

 public:

     SpriteAnimateFrameLayer();

     ~SpriteAnimateFrameLayer();

 };

 #endif //_SPRITE_ANIMATION_TEST_

通过逐帧数组播放动画，CCSpriteFrame的使用

动画是通过逐帧连续播放图像而形成的动作画面。

既然是逐帧动画，细化话后，即是单帧，通过记录单帧信息，然后再将单帧连续起来，即是逐帧动画。

添加素材文件到Assets/Sprite中，named为PlayerRun.png

在SpriteAnimateFrameLayer::SpriteAnimateFrameLayer()中完成如下步骤：

1.读取素材文件

CCTexture2D* texture=CCTextureCache::sharedTextureCache()->addImage("Sprite/PlayerRun.png");

2.记录单帧信息

     CCSpriteFrame* frame0=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame1=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame2=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame3=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame4=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame5=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame6=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame7=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame8=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame9=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame10=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame11=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

3.设置起始帧

     CCSprite* sprite=CCSprite::spriteWithSpriteFrame(frame1);

     sprite->setPosition(ccp(s.width/,s.height/));

     this->addChild(sprite,);

4.生成逐帧数组

     CCMutableArray<CCSpriteFrame*>* animFrames=new CCMutableArray<CCSpriteFrame*>();

     animFrames->addObject(frame0);

     animFrames->addObject(frame1);

     animFrames->addObject(frame2);

     animFrames->addObject(frame3);

     animFrames->addObject(frame4);

     animFrames->addObject(frame5);

     animFrames->addObject(frame6);

     animFrames->addObject(frame7);

     animFrames->addObject(frame8);

     animFrames->addObject(frame9);

     animFrames->addObject(frame10);

     animFrames->addObject(frame11);

5.执行动画

     CCAnimation* animation=CCAnimation::animationWithFrames(animFrames,0.1f);//Animation动画信息

     animFrames->release();

     CCAnimate* animate=CCAnimate::actionWithAnimation(animation,false);

     CCActionInterval* seq=(CCActionInterval*)(CCSequence::actions(animate,NULL));//动画间隔

     sprite->runAction(CCRepeatForever::actionWithAction(animate));

创建动画帧集合，CCSpriteBatchNode使用

对于通过逐帧数组播放动画，同样可以通过CCSpriteBatchNode实现。

动画帧集合即是导入贴图文件.png和导入贴图文件的配置文件.plist

前面都是通过一张图片或图片的部分创建精灵并将其加入到场景中，这样导致的结果是每次添加精灵时，都要逐个渲染精灵，性能低下，一旦过多精灵渲染，将会影响效率。

精灵批处理

使用CCSpriteBatchNode来批处理这些精灵就可以避免帧率的下降。

创建CCSpriteBatchNode的方法

        static CCSpriteBatchNode* batchNodeWithTexture(CCTexture2D *tex);

        static CCSpriteBatchNode* batchNodeWithTexture(CCTexture2D* tex, unsigned int capacity);

        static CCSpriteBatchNode* batchNodeWithFile(const char* fileImage);

        static CCSpriteBatchNode* batchNodeWithFile(const char* fileImage, unsigned int capacity);

其中capacity是子节点的数量，当然，不显式设置子节点的数量的话，系统会使用默认值29，在运行时如果超过空间了，会增加33%的容量。

CCSpriteBatchNode有一个限制，就是所使用的图片必须来自同一个文件，如果使用一张图片来创建精灵，你将不能指定精灵的深度，这样，所有的精灵都必须在同一渲染层，不过你可以使用贴图集来避免这个问题，如果你的所有贴图都在同一个文件里，那么你只需创建一个CCSpriteBatchNode就可以了。贴图的大小必须满足2的n次方。

将素材文件png和plist文件添加到Sprite/Plist/中

RoleRun.plist代码

RoleRun.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>RoleRun0.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{0,0},{100,124}}</string>

                 <key>offset</key>

                 <string>{-4,-7}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{16,15},{100,124}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun1.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{100,0},{92,118}}</string>

                 <key>offset</key>

                 <string>{1,-3}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{25,14},{92,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun2.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{192,0},{104,112}}</string>

                 <key>offset</key>

                 <string>{1,-1}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{19,15},{104,112}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun3.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{296,0},{110,114}}</string>

                 <key>offset</key>

                 <string>{-2,-2}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{13,15},{110,114}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun4.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{406,0},{112,118}}</string>

                 <key>offset</key>

                 <string>{-6,-5}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{8,16},{112,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun5.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{518,0},{98,118}}</string>

                 <key>offset</key>

                 <string>{-7,-6}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{14,17},{98,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun6.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{616,0},{102,122}}</string>

                 <key>offset</key>

                 <string>{-3,-5}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{16,14},{102,122}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun7.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{718,0},{96,118}}</string>

                 <key>offset</key>

                 <string>{2,-1}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{24,12},{96,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun8.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{814,0},{96,118}}</string>

                 <key>offset</key>

                 <string>{0,-1}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{22,12},{96,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

             <key>RoleRun9.png</key>

             <dict>

                 <key>frame</key>

                 <string>{{910,0},{100,118}}</string>

                 <key>offset</key>

                 <string>{-2,-2}</string>

                 <key>rotated</key>

                 <false/>

                 <key>sourceColorRect</key>

                 <string>{{18,13},{100,118}}</string>

                 <key>sourceSize</key>

                 <string>{140,140}</string>

             </dict>

         </dict>

         <key>metadata</key>

         <dict>

             <key>format</key>

             <integer>2</integer>

             <key>realTextureFileName</key>

             <string>RoleRun.png</string>

             <key>size</key>

             <string>{2048,128}</string>

             <key>smartupdate</key>

             <string>$TexturePacker:SmartUpdate:43e6d77d8691aadfa1c598803e171096$</string>

             <key>textureFileName</key>

             <string>RoleRun.png</string>

         </dict>

     </dict>

 </plist>

RoleRun.png图

1.创建批处理节点，读取plist文件

    //创建批处理节点，读取plist文件

    CCSpriteFrameCache* cache=CCSpriteFrameCache::sharedSpriteFrameCache();

    cache->addSpriteFramesWithFile("Sprite/Plist/RoleRun.plist","Sprite/Plist/RoleRun.png");

2. 起始精灵

     CCSprite* sprite1=CCSprite::spriteWithSpriteFrameName("RoleRun0.png");//纹理plist中包含RoleRun0.png

     sprite1->setPosition(ccp(s.width/,s.height/));    

     CCSpriteBatchNode* spritebatch = CCSpriteBatchNode::batchNodeWithFile("Sprite/Plist/RoleRun.png");//与CCSpriteFrameCache同一纹理

     spritebatch->addChild(sprite1);

     addChild(spritebatch);

其中" RoleRun0.png "为plist文件中的节点纹理

3.创建逐帧数组

     //创建逐帧数组

     CCMutableArray<CCSpriteFrame*>* animFrames1=new CCMutableArray<CCSpriteFrame*>();

     char str1[]={};

     for(int i=;i<;i++)

     {

         sprintf(str1,"RoleRun%d.png",i);

         CCSpriteFrame* pFrame=cache->spriteFrameByName( str1 );

         animFrames1->addObject(pFrame);

     }

4.执行动画

     CCAnimation* animation1=CCAnimation::animationWithFrames(animFrames1,0.2);

     sprite1->runAction(CCRepeatForever::actionWithAction(CCAnimate::actionWithAnimation(animation1,false)));

这样同样可以实现同样的效果

运行效果，两个Sprite都能动起来

SpriteAnimationTest.h完整代码

SpriteAnimationTest.h

 #ifndef _SPRITE_ANIMATION_TEST_

 #define _SPRITE_ANIMATION_TEST_

 #include "cocos2d.h"

 using namespace cocos2d;

 class SpriteAnimateFrameScene:public CCScene

 {

 public:

     SpriteAnimateFrameScene();

     ~SpriteAnimateFrameScene();

     virtual void onEnter();

 };

 class SpriteAnimateFrameLayer:public CCLayer

 {

 public:

     SpriteAnimateFrameLayer();

     ~SpriteAnimateFrameLayer();

 };

 #endif //_SPRITE_ANIMATION_TEST_

SpriteAnimationTest.cpp完整代码

SpriteAnimationTest.cpp

 #include "pch.h"

 #include "Classes\SpriteAnimationTest.h"

 //www.cnblogs.com/suguoqiang

 //---------------------------------------

 //

 //SpriteAnimateFrameLayer

 //

 //---------------------------------------

 SpriteAnimateFrameLayer::SpriteAnimateFrameLayer()

 {

     CCSize s=CCDirector::sharedDirector()->getWinSize();

     //CCSpriteFrame

     //读取素材文件

     CCTexture2D* texture=CCTextureCache::sharedTextureCache()->addImage("Sprite/PlayerRun.png");

     //记录单帧信息

     CCSpriteFrame* frame0=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame1=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame2=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame3=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame4=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame5=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame6=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame7=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame8=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame9=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame10=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     CCSpriteFrame* frame11=CCSpriteFrame::frameWithTexture(texture,CCRectMake(*,,,));

     // 起始帧

     CCSprite* sprite=CCSprite::spriteWithSpriteFrame(frame1);

     sprite->setPosition(ccp(s.width/,s.height/));

     this->addChild(sprite,);

     //生成逐帧数组

     CCMutableArray<CCSpriteFrame*>* animFrames=new CCMutableArray<CCSpriteFrame*>();

     animFrames->addObject(frame0);

     animFrames->addObject(frame1);

     animFrames->addObject(frame2);

     animFrames->addObject(frame3);

     animFrames->addObject(frame4);

     animFrames->addObject(frame5);

     animFrames->addObject(frame6);

     animFrames->addObject(frame7);

     animFrames->addObject(frame8);

     animFrames->addObject(frame9);

     animFrames->addObject(frame10);

     animFrames->addObject(frame11);

     //动画Animate

     CCAnimation* animation=CCAnimation::animationWithFrames(animFrames,0.1f);//Animation动画信息

     animFrames->release();

     CCAnimate* animate=CCAnimate::actionWithAnimation(animation,false);

     CCActionInterval* seq=(CCActionInterval*)(CCSequence::actions(animate,NULL));//动画间隔

     sprite->runAction(CCRepeatForever::actionWithAction(animate));    

     //CCSpriteBatchNode

     //创建批处理节点，读取plist文件

     CCSpriteFrameCache* cache=CCSpriteFrameCache::sharedSpriteFrameCache();

     cache->addSpriteFramesWithFile("Sprite/Plist/RoleRun.plist","Sprite/Plist/RoleRun.png");

     //起始精灵

     CCSprite* sprite1=CCSprite::spriteWithSpriteFrameName("RoleRun0.png");//纹理plist中包含RoleRun0.png

     sprite1->setPosition(ccp(s.width/,s.height/));    

     CCSpriteBatchNode* spritebatch = CCSpriteBatchNode::batchNodeWithFile("Sprite/Plist/RoleRun.png");//与CCSpriteFrameCache同一纹理

     spritebatch->addChild(sprite1);

     addChild(spritebatch);

     //创建逐帧数组

     CCMutableArray<CCSpriteFrame*>* animFrames1=new CCMutableArray<CCSpriteFrame*>();

     char str1[]={};

     for(int i=;i<;i++)

     {

         sprintf(str1,"RoleRun%d.png",i);

         CCSpriteFrame* pFrame=cache->spriteFrameByName( str1 );

         animFrames1->addObject(pFrame);

     }

     CCAnimation* animation1=CCAnimation::animationWithFrames(animFrames1,0.2);

     sprite1->runAction(CCRepeatForever::actionWithAction(CCAnimate::actionWithAnimation(animation1,false)));

     animFrames->release();

     animFrames1->release();

 }

 SpriteAnimateFrameLayer::~SpriteAnimateFrameLayer()

 {}

 //---------------------------------------

 //

 //SpriteAnimateFrameScene

 //

 //---------------------------------------

 SpriteAnimateFrameScene::SpriteAnimateFrameScene()

 {}

 SpriteAnimateFrameScene::~SpriteAnimateFrameScene()

 {}

 void SpriteAnimateFrameScene::onEnter()

 {

     CCScene::onEnter();

     CCLayer* pLayer=new SpriteAnimateFrameLayer();

     this->addChild(pLayer);

     pLayer->release();

 }

 //www.cnblogs.com/suguoqiang

著作权声明：本文由http://www.cnblogs.com/suguoqiang 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！

Learning Cocos2d-x for WP8（7）——让Sprite动起来的更多相关文章

  1. cocos2d基本类介绍 director/scene/layer/sprite

    [核心类]     导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步:     导演控制场景,场景控制图层,图层控制精灵,精灵控制动作.     相互之间的关系框架 ...

  2. cocos2d js 利用texture packer生成sprite

    cc.spriteFrameCache.addSpriteFrames(res.winLose_plist,res.winLose_png); var frame = cc.spriteFrameCa ...

  3. Cocos2d-x游戏移植到WP8之路 -- c++和c#交互

    Cocos2d-x是眼下最流行的手机游戏引擎之中的一个,开源.轻量.多平台等的诸多特性使得它被非常多国内外手游开发人员所喜爱. 利用Cocos2d-x来开发Windows Phone 8的游戏相同也是 ...

  4. 【Unity3D基础教程】给初学者看的Unity教程（三）：通过制作Flappy Bird了解Native 2D中的Sprite，Animation

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了MonoBehaviou ...

  5. 【转】通过制作Flappy Bird了解Native 2D中的Sprite，Animation

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了MonoBehaviou ...

  6. （转） [it-ebooks]电子书列表

    [it-ebooks]电子书列表   [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...

  7. iOS-------应用性能调优的25个建议和技巧

    性能对 iOS 应用的开发尤其重要,如果你的应用失去反应或者很慢,失望的用户会把他们的失望写满App Store的评论.然而由于iOS设备的限制,有时搞好性能是一件难事.开发过程中你会有很多需要注意的 ...

  8. iOS应用性能调优建议

    本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/,你还可以 ...

  9. iOS开发优化的25个方案

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

随机推荐

  1. 使用BigDecimal来进行精确计算

    在一些以金融等行业中的计算是需要十分精确的,即使我们使用像double这样的类型,由于浮点数的原因,会使得数据计算变得不精确,例如下面的例子: double a = 0.1; double b = 0 ...

  2. Appium TestNg Maven Android Eclipse java简单启动实例

    环境准备 Eclipse + maven + appium + TestNg 确保已经在Eclipse 上面安装maven TestNg的插件 打开Eclipse,新建一个java项目,把项目转换成m ...

  3. PHP之操作数据库

    数据库,顾名思义,是一个存放数据的容器.然后在使用过程中对数据库里面的数据增删改查,具体是怎么实现的呢? 这儿不得不提一下一个神奇的东西:SQL语句:结构化查询语言(Structured Query ...

  4. C++建立动态二维数组

    C++建立动态二维数组主要有两种方法: 1.使用数组指针,分配一个指针数组,将其首地址保存在b中,然后再为指针数组的每个元素分配一个数组                           int * ...

  5. ios23- 文件下载（同步和异步）

    1.第一步:创建一个单例视图 #import <UIKit/UIKit.h> @interface ios23_downViewController : UIViewController& ...

  6. Oracle静态监听与动态监听概念全解析

    基于11g,linux5.5做出的测试,单实例数据库做出的测试. 1.注册 Instance到监听器去注册自己的Instance_name与ORACLE_HOME,还可以选择添加global_dbna ...

  7. 与众不同 windows phone (13) - Background Task（后台任务）之后台文件传输（上传和下载）

    原文:与众不同 windows phone (13) - Background Task(后台任务)之后台文件传输(上传和下载) [索引页][源码下载] 与众不同 windows phone (13) ...

  8. SVN权限解析规则详解(转)

    首先创建一个版本库后,会生成最初的目录结构和基本的配置文件,本文主要分析“authz”文件的内容:我们先抛开alias和groups不谈,将重点放在路径的权限配置上. 一. 权限格式 svn权限的基本 ...

  9. QT5.6，5.7，5.8的新特征以及展望

    https://wiki.qt.io/New_Features_in_Qt_5.6 (跨平台High-DPI,改进WebEngine到45,支持WIN 10,Canvas3D,3D) https:// ...

  10. apache的开源项目-模板引擎(Velocity)(转)

    然后修改conf文件下的server.xml文件,在server.xml里的           <Connector port="8080" .... />字段后   ...