ShoeBox の変更点

#ref(shoebox.png);

* ShoeBoxとは？ [#c68cdf94]
スプライトパックや、マップタイル、ビットマップフォント、強力なHullパッキング機能やUnityとの連携、SWFアニメーションを作成することができるツール。

Adobe AIRで作られているので、Windows とMac OSXで動作します。

- 公式サイト : http://renderhjs.net/shoebox/

----
#contents
----

** インストール方法 [#w0c5b130]
動作には Adobe AIR が必要なので、こちらからダウンロードしてインストールしておきます。
- https://get.adobe.com/jp/air/
** Sprite Sheetの作成方法 [#gde9850b]
パックしたい画像ファイルを「Sprite Sheet」のところに、そのままドラッグ＆ドロップすると作成できます。

#ref(spritesheet001.png);

こんな感じで、1つの画像にまとめてくれます。

#ref(spritesheet002.png);

そして「Save」を選ぶと、元の画像があるフォルダにパックしたテクスチャと切り抜き情報のテキストが出力されます。
出力形式は「Setting」から選択可能です。

#ref(spritesheet003.png);

デフォルトは XML 形式ですが、pixl.js を選ぶと JSON 形式で保存することができます(''※HaxeFlixelでSprite Sheetを読み込む場合、 JSON形式で指定します'')

** HaxeFlixelでのSprite Sheetを読み込む方法 [#o37fbcaa]

Sprite Sheetを「assets/images/sprites.png」「assets/images/sprites.json(JSON形式)」に配置しているとします。そしてSprite Sheet には、「milk.png」というスプライトが含まれているものとします。

#geshi(ActionScript3){{

  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>FlxSprite#le3ea969]] でスプライトのサイズを切り替えたスプライトに合わせます。

*** Atlas Textureを使ったときの中心座標の取得方法 [#u6aa1392]
通常は以下の方法でスプライトの中心座標が取得できます。

#geshi(ActionScript3){{
  // 中心座標取得(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を使う場合はうまく取れなかったので、以下のようにするとうまく取れました

#geshi(ActionScript3){{
  // 中心座標取得(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;
  }
}}

** 問題点 [#w481dcb3]
*** Flashビルドでスプライトを回転させると左上原点で回転してしまう [#za1637a4]
Flashでビルドしたときだけ、なぜか回転がうまくできません（原因不明）