読者です 読者をやめる 読者になる 読者になる

森クマblog

スマートフォン向けアプリ開発者の奮闘記

【Cocos2d-x】ShoeBoxで複数画像を1つにまとめて扱うクマ!

ゲームを作っていくと、キャラごとのアニメーション差分が増えてきて、画像の管理も煩雑になってきますクマ。 

f:id:shakeflower93:20160520222723j:plain

(増えていくアッチャパルピカ。これは地獄クマ・・・)

 

そこで今回は、「複数画像を1つの画像にまとめて、ゲームで展開する方法」について書きますクマ!(技術的な話題をブログに書くのは何ヶ月ぶりか・・・

f:id:shakeflower93:20160606221757j:plain

(無限に増えていく画像たちをまとめてやるクマ!!)

 

森クマはフリーツールのShoeBoxを利用してますクマ。

ShoeBoxは、複数画像をいろんなフレームワークに対応した形で1つの画像にまとめてくれる優れもののフリーツール!もちろん、我らがcocos2d-xで扱える形式にも対応しているクマ!

 

早速、KUMANTAの助走シーンで使用する4枚の画像を、1つにまとめてみましょうクマ。

 

 ShoeBoxを起動して、ウインドウ内のSpriteSheetのアイコンに、1つにまとめたい画像をドラッグするクマ。

f:id:shakeflower93:20160606211834p:plain

すると・・・

f:id:shakeflower93:20160606212927p:plain

 おぉ・・・KUMANTAたちが読み込まれたクマ!!

 

続けて右下のSettingボタンをクリックすると、設定ウインドウが表示されますクマ。

f:id:shakeflower93:20160606213335p:plain

TemplateをCococs 2DにしてFile Nameに任意の名前を入力して、Applyクマ!!

 

f:id:shakeflower93:20160606213407p:plain

最後に、画像が表示されているウインドウのSaveボタンをクリック!!これで、 画像のドラッグ元と同じディレクトリに以下2つのファイルが出来るクマ。

(ファイル名はFile Nameで指定したものになるクマ)

  • sprites_kumanta.png(1枚にまとめられた画像)
  • sprites_kumanta.plist(1枚にまとめられた画像の各情報が定義されている)

これをcocos2d-xでアニメーションに展開してSpriteに読み込む方法は以下です 

クマ(C++で実装)。

 

    // plistから画像情報をキャッシュに追加

    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sprites_kumanta.plist");

    // ファイル名を指定して、キャッシュからSpriteを作成

    Sprite *spriteKumanta = Sprite::createWithSpriteFrameName("kumanta_run_00.png");

 

 次回は、今回まとめた画像ファイル&plistから、パラパラアニメーションを作成する方法を書きますクマー!