21、Cocos2dx 3.0游戏开发找小三之Cocos2d-x中的动画与场景特效

重开发者的劳动成果，转载的时候请务必注明出处：http://blog.csdn.net/haomengzhu/article/details/30484205

Cocos2d-x 这个 2D 引擎，一直力图降低游戏开发难度，
并没有使用诸如 3D 和矢量等手段来实现复杂的动画效果，
而是引入 了帧动画来表现一些动作（Action）难以实现的特效。

帧动画类似我们平常播放的MV，引擎把我们编辑好的动画逐帧 播放，并呈现在游戏中。
我们可以把任意特效编辑为一段动画，因此，理论上来说，帧动画可以实现任何一种效果。 

帧动画与电影胶片类似。
一个连贯的动画实际上是由许多独立的图片按时间顺序组合而成的，动画的帧就是指被显示出来的每一张图片。
由于播放动画时，图片间的切换速度极快，展示出来的效果就是动态的动画效果了。
动画的内容是任意的，因此在不计开销的情况下可以表现出任何动态效果。

通常，对于 Cocos2d-x 无法完成的复杂动态效果，我们能利用动画加以实现。
举个例子，<找小三>游戏中，主角的走动动画：



通常，较为简单的动画可以利用 Flash 工具制作出来，
而更为复杂与细腻的动画可以利用三维建模软件逐帧渲染，或完全手动绘制。
由于动画的最终输出文件包 含了每一帧的图片内容，体积比较庞大，会给内存与显存带来较大的压力。
考虑到制作成本以及回放成本，如果没有必要， 我们一般不在游戏中大规模使用动画。

精灵可以用来显示一张静止的图片，而为了显示动态图片，我们需要不停地切换精灵显示的内容。
一旦明白了这个道理，我们可以利用定时器不停地改变精灵的显示内容，把静态的精灵变为动画播放器。
事实上，Cocos2d-x 提供的动画就是基于这个原理。 

动画由帧组成。
在最简单的情况下，每一帧都是一个纹理，我们可以使用一个纹理序列来创建动画。
然而显卡在绘图时，在纹理间切换是一个开销巨大的操作，由于精灵可以显示部分纹理，
因此通常更为高效的做法是把动画用到的多个纹理按照一定的顺序排列起来，然后放置在同一个纹理下。
在创建动画时，我们不仅需要指定动画所使用的纹理，还需要指定每一帧使用的是纹理的哪一部分。

为了方便地记录纹理的显示信息，Cocos2d-x 提供了框帧类SpriteFrame。
一个框帧包含两个属性，纹理与区域。
纹理指的是将要被显示的纹理，而区域指的是此纹理将要被显示的部分。
一个框帧可以完整地描述精灵显示的内容，因此在动画中，我们使用框帧来表示每一帧的内容。

动画帧类AnimationFrame同样包含两个属性，其一是对一个框帧的引用，其二是帧的延时。
一 个 Cocos2d-x 的动画类 Animation 是对一个动画的描述，它包含显示动画所需要的动画帧。
对于匀速播放的帧动画，只需设置所有帧的延时相同即可。

我们使用Animation描述一个动画，而精灵显示动画的动作则是一个 Animate 对象。
动画动作 Animate 是精灵显示 动画的动作，它由一个动画对象创建，并由精灵执行。
动画与动画动作的关系就如同 CD 光盘与 CD 播放机的关系一样--前 者记录了动画的内容，
而后者是播放动画的工具。
关于这几个类，我们没有必要一一赘述。

下面我们来看主角走动的例子，在这个例子中，我们继续使用前文展示过的图片作为动画资源，这张图片由4张小图组成，每一张小图都是一 个独立的状态，为了方便使用，每张图片的宽度和高度都分别相同：
代码如图示：



在实际开发中，帧动画文件通常由工具来生成。
在生成帧动画纹理之前，需要拥有每一帧的图片资源，把这些资源经过类似 TexturePacker 的工具打包到一个较大的纹理之中，然后添加到帧动画里。

场景特效
场景切换，利用 Director 提供的 replaceScene 方法可以方便地把当前场景切换为另一个场景。
然而 replaceScene 方法的场景切换并没有过多修饰，仅仅是停止当前场景，再播放下一个场景。
场景的切换有时会显得生硬而单调。
为了解决这个问题，Cocos2d-x 为我们提供了很多场景切换的特效，包括在切换场景时表现出翻页、波浪等华丽
的特效，这些特效是通过特效类TransitionScene 来实现的。

TransitionScene 派生自 CCScene，换句话说，场景特效本身也是一个场景。
场 景特效的实现方式与复合动作类似：复合动作是一类特殊的动作，它们包含其他动作，
执行复合动作时，被包含的动作也 会按照一定的方式执行；

而场景特效是一类特殊的场景，它们包含了另一个场景，在运行场景特效时，
被包含的原场景会以添加了特效的方式显示出来。
因此，特效场景的使用方法与复合动作也类似。
首先创建一个场景，称作原场景，然后把原场景当做参数来创建一个特效场景，使用时只需要把特效场景传入 Director
的 replaceScene 方法即可，
相关代码如下：

Director::getInstance()->replaceScene (TransitionFlipX::create(3, pScene));

全部的场景特效的代码都位于引擎目录中的"cocos/2d/CCTransition.h（cpp）"文件中，可以参看更多场景切换。
常用的场景特性：

当我们给游戏添加了动画与场景特效，整个游戏已经栩栩如生地动了起来；

总结一下新名词：
框帧 （SpriteFrame） ： 包含纹理与纹理中的一个矩形区域，表示纹理的一部分。一个精灵显示的内容就可以用框帧表示，同时框帧还是帧动画的基本元素。

动画帧（AnimationFrame）：由框帧与单位延时组成，可以表示变速动画中的一帧。通常，匀速动画的单位延时为 1。

动画（Animation）：由动画帧组成，表示一个动画的内容。

动画动作（Animate）：动画的播放器，使用动画对象创建，只能作用于精灵。为了播放一个动画，通常首先创建动画帧或框帧，然后用它们创建动画，最后利用动画创建动画动作，并指派一个精灵来执行此动作。

场景特效（TransitionScene）：一类特殊的场景，可以把另一个场景包装起来，实现诸如特殊翻页、波纹等华丽的场景切换特效。

郝萌主友情提示：
当使静止的帧运动起来的时候，蒙娜丽莎都会笑、、、