欢迎加入 Cocos2d-x 交流群: 193411763
转载时请注明原文出处 http://blog.csdn.net/u012945598
在游戏中,我们经常会看到鱼在游,人在跑,那么这些便是通过Cocos2d-x中的动画来实现的,一个动画是由精灵帧序列组成。下面笔者将教大家如何如何将多张图片打包到一起,如何利用打包好的图片生成一个动画。
源码下载地址:http://download.csdn.net/download/u012945598/6621329
在此之前先让我们来了解几个概念:
CCSpriteFrame(框帧):包含纹理与纹理中的一个矩形区域,表示纹理的一部分。一个精灵显示的内容就可以用框帧表示,同时框帧还是帧动画的基本元素。
CCAnimationFrame(动画帧):由框帧与单位延时组成,可以表示变速动画中的一帧。通常,匀速动画的单位延时为1。
CCAnimation(动画):由动画帧组成,表示一个动画的内容。
CCAnimate(动画动作): 动画的播放器,使用动画对象创建,只能作用于精灵。为了播放一个动画,通常先创建动画帧或框帧,然后用它们创建动画,最后利用动画创建动画动作,并指派一个精灵来执行此动作。
现在不理解没有关系,下面我们的实例将会帮助大家理解以上概念。
首先我们来看这样一张图片:
之前的教程中我们提过纹理的概念,简单来说,纹理就是一张图片,那么这张图片我们也可以称之为纹理。在同一个纹理中,可以存放很多的精灵,正如大家所看到的一个人奔跑的状态。所谓的动画,无非就是将这些个不同状态的图片连起来播放。下面我将教大家如何生成这样的一张图片,笔者要给大家介绍一款软件——TexturePacker。
TexturePacker是一款强大的图片打包工具,官网下载地址:http://www.codeandweb.com/texturepacker。
现在我们有如下的一组图片(注意图片名字需要由一个规则,具体原因在代码中可见):
打开TexturePacker工具,我们将这些小图片用鼠标拖拽到TexturePacker的右侧区域,如下图所示:
然后观察一下TexturePacker左侧的列表
Data Format:生成配置文件的格式类型,不同的引擎可能会使用不同的配置文件,我们使用Cocos2d即可。
Data filename:生成的图片名及存储位置,笔者将该文件取名为run,之后将会生成一个run.png以及run.plist文件。
Texture Format: 生成的图片格式,我们使用.png格式。
Allow rotation:是否允许图片旋转,因为有些时候图片旋转后可节省空间,存放更多的图片。需要注意的是及时是旋转过的图片在创建精灵的时候也是正常的。
其他的一些相关功能笔者就不过多解释了,之后我们就可以点击工具的Save按钮将生成的文件导出。那么导出的两个文件该如何使用呢?我们来看一下代码:
以上代码便是创建一个动画的全过程,若要看一下动画效果,我们只需要在程序中创建一个精灵,让精灵去执行动画即可
例如创建了一个精灵 sprite,
sprite->runAction(GameScene::createAnimate1());
运行项目,即可看到一个人在屏幕上原地奔跑。
然而我们的游戏中一定会有很多的动画,我们不可能每需要一个动画就写这样一个方法,下面笔者将写一个类,用来创建动画
类名叫做CAnimation .h及文件内的代码如下:
.cpp文件
写完后,我们在HelloWord类中测试一下,在HelloWorld.h文件中引入CAnimation类的头文件,之后在.cpp的init()函数内加入如下代码
完成后运行项目测试,即可看到如下效果: