クロスプラットフォーム対応ゲームフレームワーク「Cocos2d-x」のデータ構造と、画像の表示

トランプゲームを作成しながら学ぶ、速習「Cocos2d-x」 第2回

トランプ画像の表示

　それではプロジェクトを編集し、トランプ画像を表示してみましょう。大きく分けると、2つの手順が必要になります。一つは表示する画像の配置、もう一つはソースコードの編集です。

（1）画像の配置

　先の説明で、リソースは「Resources」フォルダに配置するように紹介しました。また、テンプレートプロジェクトでは、「Resources」フォルダ直下に配置されている画像を表示しました。しかし、ここでは「Resources」フォルダ直下にある「res」フォルダに配置しましょう。iOSやMacのプロジェクトでは、プロジェクトに含めるリソースの設定が必要になりますが、この「res」フォルダに含まれるリソースは、すべて読み込むように設定されています。そのため面倒な設定を必要とせず、簡単に利用できます。

　画像（Trump_Back.png）を、記事添付のサンプルファイルからダウンロードしてください。そして、「NewProject/Resources/res」フォルダに保存してください。

図4-1　Trump_Back.png

（2）ソースコードの編集

　それでは、先ほど追加した画像が表示されるようなソースコードに編集しましょう。HelloWorldクラスのinit関数を、以下のように書き換えましょう。

bool HelloWorld::init()
{
    //スーパークラスの初期化
    if ( !Layer::init() )
    {
        //初期化に失敗した場合はfalseを返す
        return false;
    }

    //Trump_Back.pngを読み込みスプライトを生成する
    auto sprite = Sprite::create("res/Trump_Back.png");

    //スプライトの位置を指定
    sprite->setPosition(Vec2(480, 320));

    //レイヤーにスプライトを表示する
    this->addChild(sprite, 0);

    return true;
}

　実際に処理している内容は、これまでに説明した内容と変わりありません。4行目でスーパークラスの初期化を行い、11行目で先ほど配置した「Trump_Back.png」画像を指定しています。14行目で「x: 480, y:320」の位置に表示するようにしました。

　それでは実際に起動してみましょう。第1回で紹介したように、プロジェクトフォルダ（「NewProject」フォルダ）に移動し、「cocos run」コマンドを実行します。ここではプラットフォームに「ios」を指定しています。

$ cd NewProject
$ cocos run -p ios

図4-2　アプリ起動

　いかがでしたか？ 新しく追加した画像を、簡単に表示できることが分かっていただけたのではないでしょうか。

　次回は、トランプゲームを構成するために必要な、トランプクラスを作成したいと思います。