原文: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. Swift - 一步步教你使用SpriteKit创建开发游戏项目

    一,什么是SpriteKit SpriteKit是苹果公司官方出品,用于制作2D游戏的框架.这个框架具备了图形渲染和动画的功能.可以使图像或者精灵(sprite)动 起来.SpriteKit的渲染方式 ...

  2. App 运营 推广相关

    基本要素 1.定位和产品 2.取个好名字,一目了然+下载冲动 3.设计一个好图标,有感性和直观的认识 4.做好产品的说明.关键字,截图(前1-2行是重点) 5.做市场的排名(相关因素如下)   (1) ...

  3. 循环灯控制器，该控制器控制红、绿、黄三个发光管循环发亮（VHDL语言）

    设计一个循环灯控制器,该控制器控制红.绿.黄三个发光管循环发亮.要求红发光管亮2秒,绿发光管亮3秒,黄发光管亮1秒.(假设外部提供频率为1MHz的方波信号) library ieee; use iee ...

  4. 微信公众平台应用开发框架sophia设计不足（1）

    设计一个小框架考虑的东西真不少,每一样都不easy: 1.既要解决当前技术的不足: 2.又要方便他人使用(基本的目的). 3.同一时候又要设计得优雅.easy扩展. sophia一開始设计用来支持智能 ...

  5. 配置虚拟主机并更改Apache默认解析路径

    配置虚拟主机,非常easy 改动以下文件: 加入以下几句话 <VirtualHost *:80> ##ServerAdmin webmaster@dummy-host2.example.c ...

  6. 程序猿的量化交易之路（26）--Cointrader之Listing挂牌实体（13）

    转载须注明出处:http://blog.csdn.net/minimicall? viewmode=contents,http://cloudtrade.top Listing:挂牌. 比方某仅仅股票 ...

  7. 网络知识汇总(2) - Linux下如何修改ip地址

    在Linux的系统下如何才能修改IP信息   以前总是用ifconfig修改,重启后总是得重做.如果修改配置文件,就不用那么麻烦了-   A.修改ip地址   即时生效:   # ifconfig e ...

  8. 高效 Java Web 开发框架 JessMA v3.2.3 beta-1 发布

    JessMA(原名:Portal-Basic)是一套功能完备的高性能 Full-Stack Web 应用开发框架,内置可扩展的 MVC Web 基础架构和 DAO 数据库访问组件(内部已提供了 Hib ...

  9. 树莓派玩耍笔记4 -- 树莓派ssh党必备的配置

    1. 关闭桌面显示 对于ssh 党.当然不须要系统花费资源在显示上. 所以我们先在 "raspi-conifg" 下选择默认启动为Text 启动(这好像也是Raspbian 的默认 ...

  10. 动态创建按钮的JS

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...