原文: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
核心代码
#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代码
<?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完整代码
#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完整代码
#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/ ...
随机推荐
-
ASP.NET MVC5+EF6+EasyUI 后台管理系统（64）-WebApi与Unity注入
系列目录 前言: 有时候我们系统需要开放数据给手机App端或其他移动设备,不得不说Asp.net WebApi是目前首选 本节记录Asp.net MVC WebApi怎么利用Unity注入.系列开头已 ...
-
Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
-
python 补充-decode和encode
1. decode与encode转码 在Python3中默认编码就是uncode,encode转成Byte类型 在Python2中默认编码就是ascii window下默认编码是GBK decode( ...
-
SQL SERVER 只有MDF文件的恢复
方式一: .create a database same name as .mdf file; .Stop SQL Server; . recover .mdf file; . Start SQL S ...
-
Spark RDD概念学习系列之RDD是什么？（四）
RDD是什么? 通俗地理解,RDD可以被抽象地理解为一个大的数组(Array),但是这个数组是分布在集群上的.详细见 Spark的数据存储 Spark的核心数据模型是RDD,但RDD是个抽象类 ...
-
HTML5 为什么这么火？
H5是超文本语言HTML的第五次修订,是近几年来Web标准巨大的飞跃. 以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台.和以前版本不同的是,HTML5并非仅仅用来 ...
-
工作总结之Git
工作中,终端数据的制作好后,使用的是SmartGit(注:Git的一个客户端)来push到服务器:但是出现了奇怪的现象: 1.git checkout到本地的目录,理论上目录下有包括新增,删除,变更在 ...
-
CI环境配置
CI:php的MVC框架M(模型model):与数据库打交道的,一般情况下数据库里面的一张表对应一个Model,在里面对应该表的增删改查的操作V(视图view):用户看到的界面,其中很多数据是从数据库 ...
-
MySql-2019-4-21-复习
数据库对象:存储,管理和使用数据的不同结构形式,如:表.视图.存储过程.函数.触发器.事件.索引等. 数据库:存储数据库对象的容器. 数据库分两种: 系统数据库(系统自带的数据库):不能修改 info ...
-
yum下载rpm包
方法一:downloadonly插件 1.安装插件 yum -y install yum-download 2.下载httpd软件包到当前文件夹内 yum -y install httpd -dow ...