cocos2d-xでゲームを作ろう! 第三回 キャラクタ表示編

画像を準備しよう

さて、今回はキャラクターの表示を行ってみたいと思います。キャラクターの表示の方法は色々あるみたいですが、今回は一枚のテクスチャに上下左右に歩きのパターンが描かれた以下のテクスチャを使ってみようと思います。ちなみにこれは同僚のサイトから拝借しました。

おそらくプロパティリストとか用意して、切り出し座標をそちらで管理してってやり方がスマートだと思いますが、今回はゴリゴリごりごりやってしまおうと思います。

cocos2d-xには、テクスチャ内の矩形を指定して、スプライトして切り出してくれる便利な機能があります。今回はこれを利用します。それではまず、キャラクタの表示から。この画像のキャラクタは、以下のように「幅96、高さ64のサイズで格納されています。

テクスチャからスプライトを切り出そう

まずは、切り出したスプライトを格納する領域を準備します。
あと、スプライトの幅と高さ定数も用意しておきます。
今回のコードは、前回のマップ表示の下に追加してください。

    // キャラクタ表示
    CCSprite* 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++] = CCSprite::create("character.png", rect);
        }
    }

切り出したスプライトを表示しよう

格納したスプライトに対して、座標を設定しシーンに追加します。
これで、切り出したスプライトが表示されるようになります。

    // 座標を確定して、シーンに追加
    for (int i=0; i<12; i++)
    {
        int x = 50;
        int y = 50;
        pSpritesCharacter[i]->setPosition(ccp(x + (i * 50), y + (i * 50)));
        this->addChild(pSpritesCharacter[i]);
    }

実行させるとこんな感じになります。

これで、テクスチャからスプライトを作成することができました。
次回は、このスプライトをアニメーションさせてみたいと思います。