便利ツール！！「TexturePacker」について

投稿日：2013年4月16日更新日：2020年1月22日

こんにちは。今回エンジニアブログを執筆します新卒の長屋と申します。

今回はCocos2d-xを扱う上でとても便利な「TexturePacker」について紹介します！

ゲームを作る上で画像ファイルを一つの画像ファイルにまとめるテクスチャアトラス化は必須です。個々の画像を個別に読み込むよりも一つの画像にまとめたほうがGPUに優しくなります。

ただこのテクスチャアトラス化。普通にやろうとすると結構めんどくさいもので画像編集ツールで１枚１枚の画像を一枚の画像ファイルに配置していく作業は地味にずれたりして途中で投げたくなるものです。(僕が不器用なだけかもですが)

またプログラム側で読み込むのも面倒で計算して切り取り位置をもとめ・・・とそんな風に一工夫が必要になってきます。

そんなめんどくさいことはツールに任せてしまおう！という事で「TexturePacker」というツールを紹介いたします。

「TexturePacker」 (有料です)

http://www.codeandweb.com/texturepacker

このツール。使い方は至極簡単で

1. 追加したい画像or画像が入ったフォルダをドラッグ&ドロップ

2. ファイルを出力したいフォルダと使用するフレームワークを選択

（今回はcocos2dを選択します)

3. publish!

はい。これで画像の生成は完了です！もう１枚ずつ配置しなくてもいいんです！

先ほど指定したフォルダに画像ファイルとplistファイルができているはずです(今回は仮でblocksというファイル名にしました)

出力されたファイルです

さて次は今生成した画像をプログラム側で読み込んでみましょう。

//インスタンス取得  
CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();

//このメソッドを呼び出して生成されたプレイリストファイルとpngファイルを読み込みます  
cache->addSpriteFramesWithFile("blocks.plist","blocks.png");

//画像を切り取りたいときはアトラスに追加した元の画像のファイル名を指定してあげれば大丈夫です。  
//後は通常のスプライトを生成するときとかわりません  
CCSprite *m_pTest = CCSprite::createWithSpriteFrameName("block00.png");

//またCCSpriteFrameも取得できます  
//こちらも同じようにもとのファイルの名前を指定しましょう  
cache->spriteFrameByName("block00.png");

//CCSpriteBatchNodeと組み合わせることもできます  
CCTexture2D *pTexture2D = CCTextureCache::sharedTextureCache()->addImage("blocks.png");
CCSpriteBatchNode *batchNode = CCSpriteBatchNode::createWithTexture(pTexture2D);
CCSprite *m_pTest2 = CCSprite::createWithSpriteFrameName("block01.png");
batchNode->addChild(m_pTest2);

とこのように簡単に読み込むことができます。
また「TexturePacker」はCocos2d-xだけならず、XNAやUnity、AndEngineなどでも使える形式で吐き出すことができるのが出来るのでかなり便利ですよ！

便利ツール！！「TexturePacker」について

採用情報