ShoeBoxを使って表情パーツのスプライトシート化【TRP_SkitMZマニュアル】
(ver1.01にて、画像読み込みが遅れた際に発生するエラーを修正しました。スプライトシートでご使用の方はお手数ですがアップデートをお願い致します。)
TRP_SkitMZにおいて多層レイヤー方式を利用する場合は、表情パーツ画像をスプライトシートにまとめることで画像の使用メモリを抑えることが可能です。
Shoeboxを利用してスプライトシートを作成する方法を紹介します。
Shoeboxのインストール
ShoeBoxはスプライトシート(テクスチャアトラス)を作成可能な外部ツールです。(2020年10月15日現在では基本無料のドネーションアプリ)
公式ホームページの右上から最新バージョンをダウンロードしましょう。
ShoeBoxホームページ:http://renderhjs.net/shoebox/
動作にはAdobe AIRのランタイムが必要です。
未インストールの場合はこちらもダウンロードしてインストールしてください。
Adobe AIRランタイム:https://airsdk.harman.com/runtime
ダウンロードが完了したらインストールして、アプリを起動しましょう。
スプライトシートを作成
各キャラクターのポーズごとに表情パーツをまとめてスプライトシート化していきます。
ポーズごとの表情パーツを全て選択し、アプリの一番左の「Sprite Sheet」のアイコン部分にドラッグ&ドロップで放り込みます(ポーズのベース画像は含みません)
表情パーツがパッキングされた画像のウィンドウが現れます。
初めて使う場合は、書き出すスプライトシートデータの形式を変更する必要があります。
保存(Save)ボタンの左に設定(Setting)ボタンがあるのでクリックしましょう。
設定ウィンドウがでてきます。
一番上の「Template」の項目を選択し、「pixi.js」を選びましょう。
右下の「Apply」を押して設定完了です!
(ファイル名はあとで手動で変えるのでそのままでOKです)
最後に右下のSaveボタンを押すと「sprites.js」と「sprites.png」の2つのファイルが作成されます!
ファイル名の変更とインポート
スプライトシートをプロジェクトにインポートしていきます。
まずは作成された2つのファイルの名前を変更しましょう。
sprites.pngファイルは「キャラ名_ポーズ名.png」のファイル名に変更します。
sprites.jsファイルは「キャラ名_ポーズ名.json」のファイル名に変更します。
jsをjsonに変更するのをお忘れなく!
サンプルキャラ「アイナ」の場合はそれぞれ「aina_normal.png」「aina_normal.json」
jsonファイルをdataEx/spritesheetに
拡張子が.pngの画像ファイルはそのまま表情パーツ画像があったキャラクターフォルダに入れたままでOKです。
拡張子を.jsonに変更したJSONデータファイルはプロジェクト内のdataEx/spritesheetsフォルダに移動します。
dataExフォルダは表情ピッカーを呼び出したときに自動で作成されますが、もしまだ無かったら右クリックなどからフォルダを作成してください。
次に、dataEx内にspritesheetsという新しいフォルダを作成し、その中に拡張子.jsonのデータファイルを移動させればOKです。
ファイル名やフォルダ名が正しくないと動作しませんのでよく確認しましょう!
TRP_SpriteSheetsプラグインを導入
スプライトシート機能を使うには「TRP_SpriteSheets.js」プラグインを導入する必要があります。
プラグイン素材フォルダ(material/plugins)からTRP_SpriteSheets.jsをコピーしてプロジェクトのjs/pluginsフォルダにコピーし、プラグイン設定から導入しましょう。
設定などは不要です。
続いてTRP_SkitConfigMZの設定を行いましょう!
プラグインのコンフィグ設定
TRP_SkitMZ_Configのプラグイン設定を開き、「スプライトシートを利用」をONに変更します。
「表情の階層レイヤー使用」も同時にONになっている必要があるので動作しない場合はチェックしましょう。
以上でスプライトシートを使用するための手順が完了しました!
なお、表情ピッカーで表情を選ぶ際にはスプライトシート化される前の表情画像が必要なので注意しておきましょう。