「cocos2d-x」动画创建笔记

看cocos2d快2个月了，除了物理引擎与粒子系统没看外，其他的都掌握得差不多了，cocos2d中的纹理、纹理缓存、精灵、精灵帧、精灵表、精灵帧缓存、动画对象、动画动作，这几个也相互之间有一定的转化关系，记得他们之前的关系比较麻烦，在实际的游戏开发中，90%是与这些东西打交道的，所以一定得搞清楚他们之间的相互生成转化关系，我来简单地总结一下：

1. 纹理就是图片文件在内存中存储形式，有些人喜欢叫贴图，对应的类是CCTexture2D，他是由图片加载到内存中生成的
2. 纹理缓充是个单例，里面存储了所有的纹理，对应的类是CCTexture2DCache
3. 精灵是纹理的显示展示，可以由纹理、图片及精灵帧生成，对应的类是CCSprite
4. 精灵帧表示精灵以及精灵的矩形，对应的类是CCSpriteFrame
5. 精灵表（CCSpriteBatchNode）的作用是加快精灵的渲染速度的，如果单个精灵逐个渲染的话，需要初始化openGL渲染环境，初始化完再清除环境，这些步骤其实就是一个很大的开销，把需要渲染的对象全部塞入精灵批处理节点中可以一次性全部渲染完毕，节约了系统开销
6. 精灵帧缓存又是一个单例，存储了系统中所有的精灵帧，对应的类是CCSpriteFrameCache

下面是一个这些对象之间的转化关系图。

页游中可以直接使用Flash来形成动画，但在cocos2d中是不能用Flash做动画的，需要借助以下几个步骤：

1. 先将精灵帧放在一个数组中
2. 然后利用CCAnimation::animationWithSpriteFrames方法生成一个动画对象
3. 再由动画对象生成一个动画动作
4. 最后由相应的精灵执行该动作

以下为一个具体的实例：

在666rpg中找一个人物行走的素材，我比较喜欢动漫，就找了一个火影的人物行走的图片，如下图所示：

这个图中有人物向下，向左、向右及向上行走的动作，一共16张图，我们取其中每4个动作可以做成4个不同方向行走的动画。

void HelloWorld::InitAnimation()
{    
    //将图片加入纹理缓充中
    CCTexture2D *texture = CCTextureCache::sharedTextureCache()->addImage("you.png");
    //声明一个数组，用来存放这16个精灵帧
    CCArray * texturearray = CCArray::arrayWithCapacity(16);
    //texturearray->retain();
    
    //通过纹理缓充来生成精灵帧，我们用了一个循环，分别从向至下按每个精灵帧的矩形大小取精灵帧
    for (int i = 0; i < 4; i++)
    {
        for (int j = 0; j < 4; j++)
        {
            CCSpriteFrame *SpriteFrame = CCSpriteFrame::frameWithTexture(texture, CCRectMake(j * 45, i * 64, 45, 64));
            texturearray->addObject(SpriteFrame);    //将精灵帧加入数组中
        }
    }

    //我只想要向右行走的动画，所以再声明一个数组存放4个精灵帧
    CCArray * texturearrayrun = CCArray::arrayWithCapacity(4);
    //纹理在内存中是上下倒置的，我们看到是第4-7个元素，其实是第8-11个
    for (int i = 8; i < 12; i++)
    {
        texturearrayrun->addObject(texturearray->objectAtIndex(i));
    }
    //利用精灵帧生成一个动画对象
    CCAnimation *animation = CCAnimation::animationWithSpriteFrames(texturearrayrun, 0.5f);
    animation->setDelayPerUnit(0.16f);                //设置每帧的执行时间
    animation->setRestoreOriginalFrame(true);        //动画执行完毕后返回第一帧
    animation->setLoops(-1);                        //设置动画为无限循环，也可以用CCRepeat动作来实现无限循环
    //用动画对象创建一个动画动作
    CCAnimate *animate = CCAnimate::actionWithAnimation(animation);
    //用第3行第1列的精灵帧创建精灵
    CCSprite *pSprite = CCSprite::spriteWithSpriteFrame(CCSpriteFrame::frameWithTexture(texture, CCRectMake(0, 128, 45, 64)));
    pSprite->runAction(animate);                //执行动作
    pSprite->setOpacity(100);                    //设置透明度
    pSprite->setPosition(ccp(100, 100));        //放置精灵位置
    this->addChild(pSprite);                    //加入CCLayer节点中
}