TexturePackerToSS　TexturePackerを使ってssceを作成

Code And Web社開発、販売のTexturePacker は、バラバラの画像を1つの画像に隙間なく詰めこむツールです。
また同時に、バラバラの画像そのものをSpriteStudio用のセルとして登録できますので、「セルマップを新規作成・追加する」「セル(リスト)を新規作成・追加する」作業を簡略化することが出来ます。
利用するにはOPTPiX SpriteStudio 用のエクスポータ「TexturePacker To SS」が必要になります。

「TexturePacker To SS」は「TexturePacker」のライセンスを所持している方向けのエクスポータです。
TexturePackerの試用版では、エクスポートを行った際に画像の一部が変換されてしまいます。ご了承ください。

なお、バラバラの画像を詰め込む作業は「PSDtoSS」で代用できる可能性がございます。

TexturePacker Version 5.0.0 にて TexturePacker To SS Ver.1.2 がバンドルされました。
原点が意図しない位置になってしまう症状を改善しています。
アップデートしてご利用ください。

TexturePacker To SSのダウンロード

TexturePacker Ver.5.0.0以降をご利用の場合、TexturePacker To SS Ver.1.2 がバンドルされているため、この作業は不要です。

TexturePacker To SSはこちらからダウンロードを行ってください。

TexturePacker To SS

エクスポートフォルダの設定を行う

1.TexturePackerの「File」から「Prefences・・・」を選択します。 texture_packer_04

2.「Preferences」ダイアログが表示されます。
「Settings」タブの「Custom data Exporters」欄の直下にある「Exporter Directory」で、データをエクスポートするフォルダを指定します。

 texture_packer_05
3.「Exporter Directory」で指定したフォルダに、「TexturePacker To SS」内にある「SpriteStudio」フォルダを、中にあるファイルごと設置します。 texture_packer_014

4.TexturePackerを終了し、再起動します。

これで「SpriteStudio」フォーマットを選択してエクスポートすることができるようになります。

TexturePackerを利用してssceのエクスポートを行う

1.まずssce(セルマップファイル)としてパッキングしたいパーツの画像を、TexturePackerへ登録します。 texture_packer_01a

2.Settingsでテクスチャの設定を行います。

画像は「Basic settings（基本設定）」のときのSettings項目ですが、丸で囲われている「Advanced settings」ボタンで詳細設定に切り替えることができます。

 texture_packer_02

3.テクスチャの設定が完了したら、エクスポートするフレームワークを「SpriteStudio」に変更します。

Basic settings

「Output files」の中にある「Framework」のボタンをクリックしてください。

Advanced settings

「Data」の中にある「Data Format」のボタンをクリックしてください。

texture_packer_06

texture_packer_07

4.「Convert to framework」というダイアログが表示されるので、リストをスクロールし、「SpriteStudio」を選択します。

5.エクスポートした後のssceのファイル名を指定します。

Basic settings

「Output files」の中にある「Data file」をクリックすると、エクスプローラのダイアログが表示されるため、保存先と、任意のファイル名を指定してください。

Advanced settings

「Data」の中にある「SpriteStudio ssce file」をクリックすると、エクスプローラのダイアログが表示されるため、保存先と、任意のファイル名を指定してください。

texture_packer_08

texture_packer_09

6.エクスポートした後のテクスチャ画像のファイル名を指定します。

Basic settings

「Output files」の中にある「Texture file」をクリックすると、エクスプローラのダイアログが表示されるため、保存先と、任意のファイル名を指定してください。

Advanced settings

「Texture」の中にある「Texture file」をクリックすると、エクスプローラのダイアログが表示されるため、保存先と、任意のファイル名を指定してください。

texture_packer_011

texture_packer_012

texture_packer_0107.「Publish sprite sheet」を選択すると、ssceとテクスチャ画像のエクスポートを開始します。

8.エラーが出ず完了したことを確認し、「TexturePacker」でのエクスポート作業は完了です。

 texture_packer_013

使用時の注意点

  • 「imageformat」のTrim modeを「Crop, keep position」設定にした場合、セルの原点が中央になるようにした画像がずれてしまうケースが確認されています。
    その場合は、「Crop, flush position」設定にて実行してください。

アニメーションを作成した後に、画像を差し替える方法

パーツの原点位置の編集やアニメーション設定をSpriteStudioで変更したあとに、TexturePackerを利用して、テクスチャ画像をリサイズしたり、追加したい場合は、必ず以下の手順で追加を行ってください。

  • 重要：SpriteStudioの起動とファイルの読み込みは必ず初めに行う必要があります。
    SpriteStudioは一連の動作がすべて終わるまで終了させないでください。

  • 下記作業の過程でssceの上書きが発生するため、事前に、そのssceが属しているsspjやssaeもまとめてバックアップすることをお勧めします。

  1. SpriteStudioを起動し、差し替えを行うssae、ssce、参照イメージを読み込んでおきます。
  2. 差し替えたいパーツの含まれる画像をTexturePackerに読み込ませます。
    (アニメーションで使用しているパーツすべてを読み込ませる必要があります)
    追加の画像がある場合は、TexturePackerに追加(ドラッグ＆ドロップ)してください。
  3. 「publish sprite sheet」でエクスポートを行います。
    この時エクスポートを行うssceと画像ファイルは、工程１で読み込んだプロジェクトのssceと画像ファイルに上書きします。
  4. SpriteStudioにウィンドウを切り替えます。
  5. SpriteStudioのプロジェクトウィンドウで、差し替えを行いたい画像と結びついているssceを右クリックし、コンテキストメニューからリロードを選択してください。
  6. ssaeとssceを保存します。（「すべて保存」でsspjを保存しても大丈夫です）

ご注意

X/Yサイズの異なる画像に差し替えた場合、その画像から作られたセル、およびそのセルを参照しているパーツの原点位置を調整しなくてはいけない場合があります。

 

TexturePacker To SS適用の際の注意点

TexturePacker Ver.5.0.0 でSpriteStudio用エクスポータの Ver.1.2 がバンドルされるようになりました。
TexturePacker v4.1.0 以降をご利用の場合は Ver.1.2 をご利用ください。

Ver.1.0 をご利用の場合

すでにVer.1.0をお使いの場合、TexturePacker 起動時のプロジェクト選択画面に「SpriteStudio」が２つ並び、どちらがバンドルされたものか分からなくなってしまいます。

2014年12月25日に判別が付くように改修したVer.1.0.1を配布していますのでTexturePacker Ver.3.6.0以降をご利用の際は、こちらをダウンロードしてご利用ください。

TexturePacker To SSのバージョン別の違い

Ver 1.0
Ver 1.1 TexturePacker Ver.3.4.0 以降対応。
TexturePacker Ver.3.6.0以降でバンドルされています。
Ver 1.0.1

「原点出力有」では困る場合に使用します

Ver.1.1 をTexturePacker に適用すると Ver.1.0に上書きされるため、Ver.1.1と併用できるように変更したバージョンです。
v1.2

TexturePacker Ver.4.1.0以降をご利用の方は、こちらのバージョンをご利用ください。

TexturePacker Ver.5.0.0にてバンドルされています。

TexturePacker で設定した原点を維持する場合

Ver 1.0 原点は出力されません。
Ver 1.1 常に原点が出力されます。
Ver 1.0.1

「原点出力有」では困る場合に使用します

Ver.1.1 をTexturePacker に適用すると Ver.1.0に上書きされるため、Ver.1.1と併用できるように変更したバージョンです。
v1.2

Settings の Data ペインにある Write pivots にチェックを入れてください

SpriteStudio で設定した原点を維持する場合

Ver 1.0 TexturePacker側の原点は出力されないため、特に設定などは必要ありません。
Ver 1.1 常にTexturePacker側の原点が出力される仕様のため、SpriteStudioの原点を維持することはできません。
Ver 1.0.1

TexturePacker側の原点は出力されないため、特に設定などは必要ありません。

Ver.1.1 をTexturePacker に適用すると Ver.1.0に上書きされるため、Ver.1.1と併用できるように変更したバージョンです。
Ver 1.2

Settings の Data ペインにある Write pivots のチェックを外してください
Published : Edit : OPTPiX User Support