Cocos2d-x教程(4)－创建动画效果，TexturePacker工具

     欢迎加入 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（）函数内加入如下代码

完成后运行项目测试，即可看到如下效果：