cocos2d创建帧动画

今天我将和大家分享一下我自己实现的 cocos2d 创建帧动画的方法。

步骤一：将 GIF 文件转换为 PNG 图片

将 GIF 文件用 Ulead GIF Animator 打开，然后另存为图像帧，这样就可以将 GIF 转换成一组 PNG 图片。

步骤二：使用 TexturePacker 生成素材

打开 TexturePacker，把上一步得到的 PNG 图片拖进右边的 Sprites 框中，接着设置 Output 的 Data File，最后点击上方工具栏的 Publish 进行生成。

步骤三：将素材添加到工程

把生成的这些素材都拖进工程的 Resource 文件夹里。

步骤四：重写 Init 方法

以下是重写 Init 方法的代码示例：

bool HelloWorld::init()
{
// 1. 首先调用父类的初始化方法
if (!Layer::init())
{
return false;
}

// 获取可见区域的大小
Size size = Director::getInstance()->getVisibleSize();

// 缓存 SpriteFrame 对象，需要传入 .plist 和 .png 文件的路径
auto cache = SpriteFrameCache::getInstance();
cache->addSpriteFramesWithFile("D:\\hello\\Animation\\proj.win32\\res\\light.plist", "D:\\hello\\Animation\\proj.win32\\res\\light.png");

// 创建 sprite 对象，用于执行动画动作
auto sprite = Sprite::create();
sprite->setPosition(size.width / 2, size.height / 2);
this->addChild(sprite);

// 把每帧图片放进向量里
Vector<SpriteFrame*> vec;
for (int i = 1001; i <= 1006; i++)
{
// 生成图片名称
std::string fileName = std::to_string(i) + ".png";
SpriteFrame* spfr = cache->getSpriteFrameByName(fileName);
vec.pushBack(spfr);
}

// 创建 Animation 对象，设置每帧的间隔时间为 0.1 秒
Animation* animation = Animation::createWithSpriteFrames(vec, 0.1);
Animate* action = Animate::create(animation);

// 让 sprite 循环执行动画
sprite->runAction(RepeatForever::create(action));

return true;
}

代码解释：

1. 父类初始化：在 init 方法中，首先调用 Layer::init() 来确保父类正确初始化。如果初始化失败，则返回 false。
2. 获取可见区域大小：使用 Director::getInstance()->getVisibleSize() 获取当前屏幕的可见区域大小，用于设置 sprite 的位置。
3. 缓存 SpriteFrame 对象：通过 SpriteFrameCache::getInstance() 获取单例对象，并使用 addSpriteFramesWithFile 方法将 .plist 和 .png 文件加载到缓存中。
4. 创建 sprite 对象：使用 Sprite::create() 创建一个 sprite 对象，并设置其位置为屏幕中心，然后将其添加到当前层中。
5. 构建帧向量：使用 for 循环将每帧的 SpriteFrame 对象添加到 Vector<SpriteFrame*> 中。
6. 创建动画对象：使用 Animation::createWithSpriteFrames 方法创建一个 Animation 对象，并设置每帧的间隔时间为 0.1 秒。
7. 创建动画动作：使用 Animate::create 方法创建一个 Animate 对象，并使用 RepeatForever::create 方法让动画循环执行。

步骤五：查看运行结果

完成以上步骤后，运行项目，就可以看到创建的帧动画效果了。