TexturePackerToSS TexturePackerを使ってssceを作成

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

TexturePacker Version 4.2.3 (2016-08-04) で動作を確認しています。

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

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

 

TexturePacker To SSのダウンロード

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」を選択します。

texture_packer_03

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と画像ファイルは、工程1で読み込んだプロジェクトのssceと画像ファイルに上書きします。
  4. SpriteStudioにウィンドウを切り替えます。
  5. SpriteStudioのプロジェクトウィンドウで、差し替えを行いたい画像と結びついているssceを右クリックし、コンテキストメニューからリロードを選択してください。
  6. ssaeとssceを保存します。(「すべて保存」でsspjを保存しても大丈夫です)

ご注意

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

 

TexturePacker To SS適用の際の注意点

TexturePacker Ver.3.6.0 ではSpriteStudio用エクスポータの Ver.1.1 がバンドルされるようになりました。
ですが、すでにVer.1.0をお使いの場合、TexturePacker 起動時のプロジェクト選択画面に「SpriteStudio」が2つ並び、どちらがバンドルされたものか分からなくなってしまいます。

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と併用できるように変更したバージョンです。