Learning Cocos2d-x for WP8（7）—

原文: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动起来的更多相关文章

cocos2d基本类介绍 director/scene/layer/sprite
[核心类] 导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步: 导演控制场景,场景控制图层,图层控制精灵,精灵控制动作. 相互之间的关系框架 ...
cocos2d js 利用texture packer生成sprite
cc.spriteFrameCache.addSpriteFrames(res.winLose_plist,res.winLose_png); var frame = cc.spriteFrameCa ...
Cocos2d-x游戏移植到WP8之路 -- c++和c#交互
Cocos2d-x是眼下最流行的手机游戏引擎之中的一个,开源.轻量.多平台等的诸多特性使得它被非常多国内外手游开发人员所喜爱. 利用Cocos2d-x来开发Windows Phone 8的游戏相同也是 ...
【Unity3D基础教程】给初学者看的Unity教程（三）：通过制作Flappy Bird了解Native 2D中的Sprite，Animation
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子上一次我们讲了MonoBehaviou ...
【转】通过制作Flappy Bird了解Native 2D中的Sprite，Animation
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子上一次我们讲了MonoBehaviou ...
（转） [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
iOS-------应用性能调优的25个建议和技巧
性能对 iOS 应用的开发尤其重要,如果你的应用失去反应或者很慢,失望的用户会把他们的失望写满App Store的评论.然而由于iOS设备的限制,有时搞好性能是一件难事.开发过程中你会有很多需要注意的 ...
iOS应用性能调优建议
本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/,你还可以 ...
iOS开发优化的25个方案
写在前面本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

随机推荐

EasyUI - LinkButton 按钮控件
效果: html代码: <div> <a href ="abc.html" id="btn">添加</a> </div ...
ABAP 常用FUNCTION集锦（转）
此文章从网上抄摘,目的用于自己记录 DYNP_VALUES_READ – 读取SCREEN字段的值,也可以用来读取报表SELECTION SCREEN. DYNP_VALUES_UPDATE – 更新 ...
使用JDBC调用数据库的存储过程
本篇讲述如何使用JDBC来调用MySQL数据库中的存储过程.建议在学习如何使用JDBC调用存储过程前,请先了解如何在数据库中使用存储过程. 存储过程是指在数据库系统中,一组为了完成特定功能的SQL语句 ...
uva 11400 Problem F Lighting System Design
紫皮书题: 题意:让你设计照明系统,给你n种灯泡,每种灯泡有所需电压,电源,每个灯泡的费用,以及每个灯泡所需的数量.每种灯泡所需的电源都是不同的,其中电压大的灯泡可以替换电压小的灯泡,要求求出最小费用 ...
Bigcommerce：安装的出错解决方案
我们在本地安装时报错了,具体如下: 1. The database details you entered are incorrect: You have an error in your SQL s ...
【状态DP】 HDU 1074 Doing Homework
原题直通车:HDU 1074 Doing Homework 题意:有n门功课需要完成,每一门功课都有时间期限t.完成需要的时间d,如果完成的时间走出时间限制,就会被减 (d-t)个学分.问:按怎样 ...
【安卓】eclipse中不可错过的几个秘密、！
1.PackageExplorer显示文件层次的默认方式是平行列出全部包,事实上也可显示成多级,并且效果比navigator好多了. PackageExplorer视图中,"右上角箭头→pa ...
Hibernate核心接口
1.Configuration接口 Configuration负责管理Hibernate的配置信息. 2,SessionFactory接口 SessionFactory负责创建Session实例,能够 ...
配置BeanUtils包，同时也是对导入第三包的步骤说明
BeanUtils是由Apache公司开发的针对操作JavaBean的工具包. 对于JavaBean,简单的来说,就是要有一个空参的构造器和对属性的getXXX方法和setXXX方法. 在由JDK提供 ...
Lucene.Net 2.3.1开发介绍 —— 二、分词（六）
原文:Lucene.Net 2.3.1开发介绍 -- 二.分词(六) Lucene.Net的上一个版本是2.1,而在2.3.1版本中才引入了Next(Token)方法重载,而ReusableStrin ...

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

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

随机推荐

热门专题