原文: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. Python中的继承

    继承: 面向对象程序语言的一个重要特点是继承.继承提供了在已存在类的基础上创建新类的方法.继承的子类 拥有被继承的父类的所有方法,在此基础上,子类还可以添加自己的专有方法.继承是类的强有力的特点.一些 ...

  2. EasyUI - Draggable 拖动控件

    效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...

  3. 移动端网页JS框架-手机触摸事件框架，日历框架带滑动效果

    swiper.js,hammer.js,mobiscroll http://www.mobiscroll.com/       日历

  4. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  5. ORM增删改查询例题

    public partial class Form1 : Form     {         private MydbInfoDataContext context = new MydbInfoDa ...

  6. STL内存管理器的分配策略

    STL提供了很多泛型容器,如vector,list和map.程序员在使用这些容器时只需关心何时往容器内塞对象,而不用关心如何管理内存,需要用多少内存,这些STL容器极大地方便了C++程序的编写.例如可 ...

  7. 定位vc运行时库问题 依赖问题，屡试不爽的一招

    用vc 菜单 文件| 打开|指定EXE或DLL,如有指定运行时库,则PE文件的资源中可以看到manifest 配置节 然后据此判断EXE依赖的运行时库, 再根据编译选项调整 运行时库设置

  8. c++实用技巧

    原地址:http://www.cnblogs.com/easymind223/articles/2576904.html 晚上的时间总是习惯性的在cnblogs逛街,今天又看到了好文章,其c++味道浓 ...

  9. Lambda高手之路第一部分

    转http://www.cnblogs.com/lazycoding/archive/2013/01/06/2847574.html 介绍 Lambda表达式是使代码更加动态,易于扩展并且更加快速(看 ...

  10. [Android学习笔记]startActivityForResult和onActivityResult的使用

    发开过程中,免不了多个页面之间相互交互通信. Android中使用startActivityForResult方法和onActivityResult配合完成任务 startActivityForRes ...