Cocos2dx学习笔记（6）——精灵帧

发表于   |   分类于   |  

这一章将学习动画的基础准备工作。

本文仅供个人记录和复习，不用于其他用途

动画的概念

我们在观看动画片时，总能被故事的情节所吸引。动画，顾名思义，就是能够运动的画面。之前我们所添加的图片，例如上一章最后添加的植物大战僵尸的图片，看起来像那么回事，然而，这根本不能算作一个游戏。那么，我们如何让这个生硬的画面动起来呢？看看下面的你就能明白了：

示例图

这是一组僵尸啃食植物的动作分解图。当你按照顺序，以一定的速度播放这些照片时，那么一段僵尸啃食植物的动画便出现在你眼前。过多的原理我不说也很容易理解，总之动画就是由一个个分解图快速播放形成的。然而，要做出这些图片，与美工是分不开的。因此，游戏开发的过程是复杂而漫长的，涉及到的领域也是非常之多，越是复杂的游戏，越是难以开发。

说完了基本的概念，我们来说说如何在Cocos2dx中实现动画。Cocos2dx中有个概念，叫做帧。什么是帧？你的每一张图片就是一帧，连起来就叫做一个动画。那么为了减少重复的图片渲染，我们一般将一个动画中用的图片打包进一张图。

打包常用软件

这里介绍一个名为TexturePacker的软件，这个软件可以将大量的图片整合进一张大图。类似于上一章所说，加载一张大图进入缓存中，利用存储好的位置信息，直接取用图片元素。

示例图

我们将图片加入到右边的方框中，软件将会自动将图片合成进入一张大图，然后点击上方的publish，保存文件即可。这样，我们便得到了两个文件，一个是合成之后的大图，另一个则是.plist的文件。关于这个.plist的文件，它是用于记录大图中各个元素的位置信息，方便我们取用。

精灵帧

这里有必要介绍一下精灵帧，它可以用于创建动画，也可以单独的拿出一张静态图片来创建精灵。首先呢，我们来介绍一下精灵帧缓存：

1
2
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("sprite/zombie.plist");
CCSpriteFrame *sf = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("z_1_attack_01.png");

显然，这个又是一个单例，用于将.plist文件加入精灵帧缓存。当然，该方法还有一个参数，可以将对应的大图加入进来。不过该方法会自动寻找同目录下的大图，所以一般不加。接下来，我们则需要创建一个SpriteFrame指针接收对应的图片元素。sharedSpriteFrameCache()提供了一个用元素名称寻找对应元素的方法，这个名称就是图片元素原来的名称。那么这里我们自然要从第一张图片开始。

1
2
3
CCSprite *zombie = CCSprite::createWithSpriteFrame(sf);
zombie->setPosition(ccp(400, winsize.height / 2));
addChild(zombie);

上述的代码中，我们使用精灵帧来创建精灵。精灵帧的运用很方便，即可以拿去创建动画，需要的时候也可以取一张图片来创建精灵。

1
CCSprite *zombie = CCSprite::createWithSpriteFrameName("sprite/framecache/z_1_attack_01.png");

或者你可以直接一点，不需要创建SpriteFrame，直接用这个方法，效果是一样的，不过我们要提供图片的具体路径。

示例图