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）：一类特殊的场景，可以把另一个场景包装起来，实现诸如特殊翻页、波纹等华丽的场景 切换特效。

郝萌主友情提示：

当使静止的帧运动起来的时候，蒙娜丽莎都会笑、、、