在Cocos2d-x 3.x里用plist和png制作动画的例子

本文将以制作FlappyBird的小鸟动画为例，详细介绍如何在Cocos2d-x 3.x中使用plist和png文件制作动画。

一、准备资源

在制作动画前，我们需要先准备好所需的资源。目前有三种获取资源的方式：

1. 加载每个图片：这种方式比较简单，但效率不高。
2. 把所有图片压缩到一张图片中，然后分割取出：同样存在效率问题。
3. 借助于plist文件与png共同取出图片：这是三种方式中最好的，本文将采用这种方式。

1. 工具选择

通常，plist文件多用于Mac系统，在Windows系统中制作plist文件可以使用TexturePacker（点击下载），这是一个非常方便的工具。

2. 工具使用步骤

安装并打开TexturePacker后，需要选择引擎，这里我们选择Cocos2d。打开后的界面如下（此处可补充界面截图）。 由于该工具的使用细节较为复杂，详细内容可以通过搜索引擎查询。下面简单介绍主要操作步骤：

• 添加图片：点击工具上面的按钮添加需要压缩到PNG里的图片。选择图片时，按住Ctrl键可以单个多选，按住Shift键可以连续多选。如果没有合适的图片，可以使用一些示例图片代替。
• 输出文件：点击左上角的File按钮，在下拉菜单中选择“Public sprite sheet”，然后选择存放PNG和PLIST文件的目录。先选择plist目录，再选择PNG目录，建议两个文件名保持一致。操作完成后，工具会输出相应的文件，你可以到指定目录查看生成的两个文件。

二、Cocos2d-x中调用部分

1. 添加文件到项目

将生成的plist和png文件复制到项目的Resource文件夹中。在VS2012中，右键点击Resource文件夹，选择“添加 -> 现有项”，将这两个文件添加到项目中。

2. 编写代码实现动画

这里我们直接在HelloWorld界面添加小鸟飞行动画。在HelloWorldScene.cpp的Init函数中加入以下代码：

// ①创建缓存，将图片读取进来
CCSpriteFrameCache * cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache -> addSpriteFramesWithFile("hero_bird.plist");

// ②创建第一帧，设置位置，加入到当前场景
CCSprite *sp = CCSprite::createWithSpriteFrameName("bird_hero_01.png");
sp -> setPosition(Point(visibleSize.width/3,visibleSize.height/2));
this -> addChild( sp );

// ③创建集合，存每一张图片
Vector< SpriteFrame* > sfme = Vector< SpriteFrame* >::Vector();
char str[20] = {0};
for( int i = 1 ; i < 4 ; ++i )
{
// ④ 获取图片名字，加入到集合中
sprintf(str,"bird_hero_%02d.png",i);
SpriteFrame *fname = cache -> spriteFrameByName( str );
sfme.pushBack( fname );
}

// ⑤ 创建动画，设置播放速度
CCAnimation *animation = CCAnimation::createWithSpriteFrames( sfme , 0.1f );
sp -> runAction ( CCRepeatForever::create(CCAnimate::create(animation )));

3. 代码解释

• ① 创建缓存：使用CCSpriteFrameCache将plist文件中的图片信息加载到缓存中。
• ② 创建第一帧：通过CCSprite::createWithSpriteFrameName创建第一帧精灵，并设置其位置，添加到当前场景。
• ③ 创建集合：使用Vector< SpriteFrame* >存储每一张图片的帧信息。
• ④ 获取图片名字：使用sprintf函数格式化图片名字，其中%02d表示将数字格式化为两位，不足两位时前面补0。这样可以确保获取到正确的图片名字，例如bird_hero_01.png。
• ⑤ 创建动画：使用CCAnimation::createWithSpriteFrames创建动画，并设置播放速度。最后使用CCRepeatForever让动画无限循环播放。

4. 注意事项

在Cocos2d-x 3.x版本中，CCAnimation::createWithSpriteFrames函数的第一个参数必须为const Vector<SpriteFrame*>& frames，这与之前的版本有所不同，需要特别注意。

5. 运行效果

运行项目，就可以看到小鸟在屏幕上飞翔的动画效果。

三、制作开场动画

如果想将该动画作为开场动画，可以在上述代码后添加一个计划任务，实现指定时间后的跳转。示例代码如下：

this->scheduleOnce(schedule_selector(InkmooFlash::jumpToMain), 4);

通过计算动画播放一帧的时间和总帧数，设置合适的跳转时间，就可以制作出开场动画。

通过以上步骤，你可以在Cocos2d-x 3.x中使用plist和png文件制作出动画效果，并将其应用到项目中。