cocos2d-xでゲームを作ろう! 第四回 アニメーション編

さて、前回、スプライトの表示まで行ったわけですが、今回はこのスプライトをアニメーションさせてみようと思います。

CCSpriteFrameに登録しよう

前回、切り出したテクスチャからスプライトへ登録したわけですが、
アニメーションしようとした場合は、「CCSpriteFrame」に変更しないといけません。
なので、まず、前回のコードを「CCSprite」から「CCSpriteFrame」に書き換えます。

    // キャラクタ表示
    CCSpriteFrame* pSpritesCharacter[12]; // スプライトフレームの数
    const int WIDTH_SIZE  = 96;      // 一つのスプライトの幅
    const int HEIGHT_SIZE = 64;      // 一つのスプライトの高さ
    
    //「character.png」からスプライトフレームへの切り出し
    int i=0;
    for (int y=0;y<4; y++) {
        for (int x=0;x<3; x++) {
            CCRect rect(float(x * WIDTH_SIZE),  // X座標
                        float(y * HEIGHT_SIZE), // Y座標
                        float(WIDTH_SIZE),      // 幅
                        float(HEIGHT_SIZE));    // 高さ
            pSpritesCharacter[i++] = CCSpriteFrame::create("character.png", rect);
        }
    }

これで、CCSpriteFrameへの登録は完了しました。
では、この登録したCCSpriteFrameを、「CCAnimation」に登録します。
「CCAnimation」はアニメーションを管理してくれる便利なクラスです。
上向き、下向き、横向き、左向きを独立して管理したかったので、
以下のように４つの「CCAnimation」を生成します。

    CCAnimation *pAnimationFront = CCAnimation::create();
    CCAnimation *pAnimationBack  = CCAnimation::create();
    CCAnimation *pAnimationLeft  = CCAnimation::create();
    CCAnimation *pAnimationRight = CCAnimation::create();

生成した「CCAnimation」に「CCSpriteFrame」を登録していきます。

    // 前向き
    pAnimationFront->addSpriteFrame(pSpritesCharacter[1]);
    pAnimationFront->addSpriteFrame(pSpritesCharacter[2]);
    
    //後ろ向き
    pAnimationBack->addSpriteFrame(pSpritesCharacter[7]);
    pAnimationBack->addSpriteFrame(pSpritesCharacter[8]);
    
    //左向き
    pAnimationLeft->addSpriteFrame(pSpritesCharacter[10]);
    pAnimationLeft->addSpriteFrame(pSpritesCharacter[11]);

    //右向き
    pAnimationRight->addSpriteFrame(pSpritesCharacter[4]);
    pAnimationRight->addSpriteFrame(pSpritesCharacter[5]);

ちなみに、配列のインデックスは、前回のテクスチャの画像の
以下の番号に紐づいています。

それぞれの向きの立ち尽くしているアニメーションは省きます。

アニメーションを切り替えるスピードも設定しておきましょう。
「1.0f」で1秒毎に切り替えるということなので、ここではその半分の「0.5f」に設定します。

    pAnimationFront->setDelayPerUnit(0.5f);
    pAnimationBack->setDelayPerUnit(0.5f);
    pAnimationLeft->setDelayPerUnit(0.5f);
    pAnimationRight->setDelayPerUnit(0.5f);

ここで、アニメーションを管理してくれる便利クラス「CCAnimationCache」の登場です。
このクラスにアニメーションを登録しておくわけですが、その時にタグ(名前みたいなもの)をつけておけます。あとで、この名前でこの管理クラスから、ほしいアニメーションを取り出します。こんな感じで登録しておきます。

    pAnimationCache->addAnimation( pAnimationFront, "FRONT" );
    pAnimationCache->addAnimation( pAnimationBack,  "BACK" );
    pAnimationCache->addAnimation( pAnimationLeft,  "LEFT" );
    pAnimationCache->addAnimation( pAnimationRight, "RIGHT" );

格納したアニメーションを取得する場合は、以下のようにタグ名を指定して「CCAnimationCache」から取り出します。

    pAnimationCache->addAnimation( pAnimationFront, "FRONT" );
    pAnimationCache->addAnimation( pAnimationBack,  "BACK" );
    pAnimationCache->addAnimation( pAnimationLeft,  "LEFT" );
    pAnimationCache->addAnimation( pAnimationRight, "RIGHT" );

例えば、前向きのアニメーション「FRONT」を取り出す場合は、

CCAnimation *pAnimation = pAnimationCache->animationByName("FRONT");

というふうに指定します。

取り出したアニメーションをアクションに設定します。

// フレームアニメーションを繰り返す
CCRepeatForever *pAction = CCRepeatForever::create( CCAnimate::create(pAnimation) );

「CCRepeatForever」は繰り返しのアクションです。他にもいろいろ種類があるようです。詳細はまたのちほど。

あとは、プレイヤーのスプライトを用意して、先ほど作成してアクションを設定すると

    // プレイヤースプライトを生成
    CCSprite* pPlayer= CCSprite::create();
    
    // プレイヤーは常に中心
    pPlayer->setPosition( ccp(size.width/2, size.height/2));

    //プレイヤーをシーンに登録して
    this->addChild(pPlayer, 0);
    
    // 作成したアニメーションを実行
    pPlayer->runAction(pAction);

歩き始めました！
次回は、マップをスクロールさせてみたいと思います。