ShoeBox
ShoeBoxとは?
スプライトパックや、マップタイル、ビットマップフォント、強力なHullパッキング機能やUnityとの連携、SWFアニメーションを作成することができるツール。
Adobe AIRで作られているので、Windows とMac OSXで動作します。
- 公式サイト : http://renderhjs.net/shoebox/
インストール方法
動作には Adobe AIR が必要なので、こちらからダウンロードしてインストールしておきます。
Sprite Sheetの作成方法
パックしたい画像ファイルを「Sprite Sheet」のところに、そのままドラッグ&ドロップすると作成できます。
こんな感じで、1つの画像にまとめてくれます。
そして「Save」を選ぶと、元の画像があるフォルダにパックしたテクスチャと切り抜き情報のテキストが出力されます。 出力形式は「Setting」から選択可能です。
デフォルトは XML 形式ですが、pixl.js を選ぶと JSON 形式で保存することができます(※HaxeFlixelでSprite Sheetを読み込む場合、 JSON形式で指定します)
HaxeFlixelでのSprite Sheetを読み込む方法
Sprite Sheetを「assets/images/sprites.png」「assets/images/sprites.json(JSON形式)」に配置しているとします。そしてSprite Sheet には、「milk.png」というスプライトが含まれているものとします。
var spr = new FlxSprite(); // Sprite Sheet読み込み var tex = FlxAtlasFrames.fromTexturePackerJson("assets/images/sprites.png", "assets/images/sprites.json"); // FlxSpriteに設定 spr.frames = tex; // 元のスプライト名 var sprite_name = "milk.png"; // "milk.png"に切り替え spr.animation.frameName = sprite_name; // 切り替えたスプライトのサイズにする spr.resetSizeFromFrame();
特に難しいところはなく、FlxAtlasFrames?.frameTexturePackerJson? で読み込むだけです。読み込んだSprite Sheet を FlxSprite.frames に設定し、FlxSprite.animation.frameName に切り替えるスプライト名を指定します。最後に、FlxSprite.resetSizeFromFrame でスプライトのサイズを切り替えたスプライトに合わせます。
Atlas Textureを使ったときの中心座標の取得方法
通常は以下の方法でスプライトの中心座標が取得できます。
// 中心座標取得(X) public function get_xcenter():Float { return x + origin.x - offset.x; } // 中心座標取得(Y) public function get_ycenter():Float { return y + origin.y - offset.y; }
ただ、Atlas Textureを使う場合はうまく取れなかったので、以下のようにするとうまく取れました
// 中心座標取得(X) override public function get_xcenter() { var w = frame.frame.width; return x + w/2; } // 中心座標取得(Y) override public function get_ycenter() { var h = frame.frame.height; return y + h/2; }
問題点
Flashビルドでスプライトを回転させると左上原点で回転してしまう
Flashでビルドしたときだけ、なぜか回転がうまくできません(原因不明)