原文: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 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！