Cocos2d-x スプライトシートを作成して画像を楽に管理したい
この記事では、スプライトシートの作成方法と、スプライトシートを利用することのメリットについて紹介します。
スプライトシート（テクスチャアトラス）とは
スプライトシートとは、いくつかの画像をひとまとめにしたものです。ひとまとめにされた画像は設定ファイルとセットになって管理されます。また、スプライトシートはテクスチャアトラスとも呼ばれるようです。
スプライトシートを使用するメリット
・画像ファイルの管理が簡単になる
ゲームを作成していると、だんだんと大量の画像を管理しなくてはならないようになります。複数の画像をスプライトシートにまとめてしまえば、管理するファイルの数は１/10以下にすることも可能です。
・メモリ効率が良くなる
Cocos2dxでは画像を読み込む際に、画像の大きさに応じて、2の乗数分の正方形分のメモリ空間を確保するようです。その分無駄なメモリを消費するのですが、スプライトシートにすることで無駄を減らすことができます。
ShoeBoxを使用してスプライトシートを作成する
スプライトシートを作成するために、ShoeBoxというツールを使用します。このツールを採用する理由としては「無償である」、「導入が簡易」、「シンプルな機能のみ備えている」の3点です。
ShoeBoxのダウンロード
下記のリンクからダウンロードしてください。
１．右上の赤枠の「ShoeBox3.6.5」からインストーラをダウンロードして下さい。
２．左下の赤枠はインストール手順です。
１．AdobeのAIR runtimeをインストールします。
２．古いバージョンがある場合はアンインストールします。
３．ダウンロードしたインストーラからインストールします。
ShoeBoxの使い方の説明
１．ツールを立ち上げると下記のような画面が現れます。赤枠のところを右クリックします。
２．設定画面が現れます。主要な項目を変更していきます。
・Animation Name Ids ： 値を削除します。削除しないと、スプライトシートに不要なファイル名が表示されてしまいます。
・File Name ： スプライトシートのファイル名です。必要に応じて変更します。
・Tex Crop Alpha ： trueならば画像ファイルの余白（透過部分）を自動でカットしてくれます。falseなら余白部分はそのままです。必要に応じて変更します。
項目を設定したら「Apply」を押します。
３．赤枠のところに、スプライトシートとしてまとめたい画像群をドラッグアンドドロップします。
４．確認画面が現れるので「Save」して完了です。
・sprites.png
・sprites.plist
の２つのファイルが出力されます。
プロジェクトへの追加
「ShoeBoxの使い方の説明」で生成した２つのファイルをプロジェクトのResources配下に配置します。
プログラムの実装
cocos2d::SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sprites.plist");
Size visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();
Sprite* sprite = Sprite::createWithSpriteFrameName("effect_cure01_0001.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite, 0);
シミュレータの起動
シミュレータを起動して目的の画像が表示されることを確認します。
以上になります。ご覧頂きありがとうございました。
