cocos2d-x 3.x 精灵表单动画(Sprite Sheet Animation)实现思路

最新推荐文章于 2024-05-21 09:38:09 发布

boleban

最新推荐文章于 2024-05-21 09:38:09 发布

阅读量1.5k

点赞数

分类专栏： cocos2dx 文章标签： cocos2dx animation plist

本文链接：https://blog.csdn.net/boleban/article/details/37756283

版权

cocos2dx 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

cocos2dx文章翻译：

原文地址：http://www.cocos2d-x.org/wiki/Sprite_Sheet_Animation

精灵表单动画 SpriteSheet Animation

你可以通过一组(a series of)图像来创建动画，如下：

Vector<SpriteFrame*> animFrames(15);
char str[100] = {0};
for(int i= 1; i < 15; i++)
{
    sprintf(str, "grossini_dance_%02d.png",i);
    auto frame = SpriteFrame::create(str, Rect(0, 0, 40, 40));//we assume that the sprites' dimentions are 40*40 rectangles.
    animFrames.pushBack(frame);
}

auto animation = Animation::createWithSpriteFrames(animFrames, 0.2f);
auto animate = Animate::create(animation);
sprite->runAction(animate);

注意，动画(Animation)由精灵帧、每帧延时和持续时间等组成，是一个“数据”包。Animate(不知道如何翻译)是一个动作，基于动画对象(Animation object)创建。

虽然自定义动画(manualanimation)很容易理解，但在真正游戏项目中却很少用到。精灵表单动画是2D动画的常用解决方案。

下面是一个典型的精灵表单。精灵表单可以是一个场景中精灵帧序列或者图像包(images pack)。

精灵表单在OpenGLES 1.1被广泛使用，因为如下好处：

减少文件I/O时间。加载一个大的精灵表单比加载许多张小的文件要快。
减少内存消耗。OpenGL ES 1.1只能使用2的平方大小的纹理(宽度或高度是2,4,8, 64, 128, 256, 512, 1024, …)。换句话说，即便纹理的宽和高不到2的平方大小，OpenGLES 1.1也会为每个纹理分配2的次方大小的内存。所以使用“打包的”精灵表单会减少内存分片。
减少对于OpenGL ES 绘制方法的调用，加速渲染。

Cocos2d-x v3.0升级到OpenGL ES 2.0。OpenGL ES2.0对于纹理不再限制为二的次方的大小的内存，但是使用精灵表单仍然可以减少文件I/O(File I/O )时间和绘制调用。

精灵表单与动画的关系呢？正如我们所知，精灵表单与动画没有必然联系。但是考虑到上面的诸多好处，精灵表单动画是高效的。在cocos2d中，有不同的方式来创建精灵表单动画。

1.由.png和.plist文件创建

在cocos2d-x早期版本中，CCSpriteBatchNode承担创建精灵表单动画的重任。自从v3.0，SpriteBatchNode替代CCSpriteBatchNode。

SpriteBatchNode对象(SpriteBatchNode object)包含所有精灵帧的图像纹理。虽然它不会绘制任何对象，但是必须把它加到场景，原因是它是渲染管线(the rendering pipeline)的一部分。例如：

SpriteBatchNode* spritebatch = SpriteBatchNode::create("animations/grossini.png");

然后需要使用SpriteFrameCache单例来记录帧名称与之对应的帧的范围(即精灵表单的长方形区域)。例如：

 SpriteFrameCache* cache = SpriteFrameCache::getInstance();
    cache->addSpriteFrameWithFile("animations/grossini.plist");

当精灵表单和帧加载之后，精灵被添加到场景，这些帧通过createWithSpriteFrameName方法创建精灵，添加精灵作为精灵表单的一个子结点。

m_pSprite1 = Sprite::creatWithSpriteFrameName("grossini_dance_01.png");
   spritebatch->addChild(m_pSprite1);
   addChild(spritebatch);

createWithSpriteFrameName方法会从grossini.plist中找到对应的坐标和矩形,之后“裁切”grossini.png纹理到一个精灵帧。

需要添加动画的所有的帧到一个Vector对象。在动画的例子中，已知14帧大小相同，所以能通过一个嵌套循环来迭代它们，当完成添加第14帧时结束循环。

Vector<SpriteFrame*> animFrames(15);
  char str[100] = {0};
  for(int i = 1; i< 15; i++)
{
    sprintf(str, "grossini_dance_%02d.png", i);
    SpriteFrame* frame = cache->getSpriteFrameByName(str);
    animFrames->addObject(frame);

}

最后，创建一个Animate动作来由Sprite执行(run on)。为了能够循环播放动画，也可以将Animate动作打包在一个RepeatForever动作中，如下：

Animation* animatin = Animation::createWithSpriteFrames(animFrames, 0.03f);
  m_pSprite1->runAction(RepeatForever::create(Animate::create(animation)));

文件动画(Fileanimation)

xml/plist文件能够很好地描述批量结点(batch node)、精灵帧名称和对应的矩形，AnimationCache能够加载这些xml/plist文件。此接口很容易上手。

//"caches" are always singletons in cocos2d
auto cache = AnimationCache::getInstance();
cache->addAnimationWithFile("animations/animations-2.plist");
//should be getAnimationByName(..) in future versions
auto animation = cache->animationByName("dance_1");
auto animate = Animate::create(animation);
sprite->runAction(animate);