ShoeBox

shoebox.png

ShoeBoxとは？

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

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

↑

インストール方法

動作には Adobe AIR が必要なので、こちらからダウンロードしてインストールしておきます。

↑

Sprite Sheetの作成方法

パックしたい画像ファイルを「Sprite Sheet」のところに、そのままドラッグ＆ドロップすると作成できます。

spritesheet001.png

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

spritesheet002.png

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

spritesheet003.png

デフォルトは 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でビルドしたときだけ、なぜか回転がうまくできません（原因不明）