画像を差し替えてアニメーションのバリエーションを作成するには、同じ座標にパーツが配置されたテクスチャを準備する必要があります。
手動でパーツを配置し、バリエーション用のテクスチャを作成することもできますが、調整が必要なため、少々手間がかかります。
本ページでは、psdからSpriteStudioの各種ファイルにコンバートする補助ツール「PSDtoSS 6」を活用し、テクスチャのテンプレートを作成し、パッキング・ssce(セルマップファイル)へのコンバートを行う方法を解説します。
- PSDtoSS6 PSDからSpriteStudio Ver.6用データ生成
PSDtoSS6 の使用方法について解説しています。 - PSDtoSS 6のダウンロードはこちらからどうぞ
テンプレートを作成する
「PSDtoSS」で画像のパッキングを行う際、各レイヤーの名前とサイズが変わらなければ、セルマップでのパーツの並びは毎回同じになります。
この仕様を利用してテンプレートとなるpsdを作成すると、簡単にセルマップのバリエーションを作成することができます。
| １．キャラクタのパーツを分割します。 |  |
| ２．各パーツの最大サイズを定義します。 |  |
|
３．新しくレイヤーを作成し、パーツと一緒にグループに格納します。 新しく作ったレイヤーに、想定する最大サイズを四角形で描画します。 |
 |
|
４．もうひとつレイヤーを作成し、3で定義した最大サイズの左上隅と右下隅に、最大サイズを示す点を置きます。 点の代わりに、枠線を描画しても問題ありません。 |
|
| ５．２～４の作業を繰り返し、すべてのパーツに最大サイズの定義を行います。 |  |
| ６．四角形のレイヤーを不可視にし、点のレイヤーとパーツのみを可視状態にします。 |  |
| ７．PSDtoSSに同梱されているスクリプト「GeneratePivotLayer」を実行し、各パーツの中心点用レイヤーを作成・設定します。 |  |
| ８．PSDtoSSに同梱されているスクリプト「PSDtoSS_Export」を実行し、コンバートを行います。 各パーツの画像と「PSDファイル名.ss5-psdtoss-info」というファイルが出力されます。 |
 |
|
９．PSDtoSSでコンバートを行います。 |
 |
|
10．PSDtoSSの設定は、どのpsdをコンバートする際も統一するようにしてください。 変更するとパーツの位置がズレてしまうためです。 |
 |
|
11.作成した各パーツがパッキングされ、1枚のテクスチャになります。 最大サイズを示す点が残っているので、これを消していきます。 |
 |
|
12.テクスチャを画像編集ソフトで開き、最大サイズを示す点をすべて消去し、上書き保存をします。 |
 |
| 13.これでセルマップのテンプレートは完成です。 作成したpsdを活用して他のキャラクターも作成し、コンバートを行ってください。 |
|
作成したテンプレート利用時の注意
テンプレートのpsdを使って、差し替え用セルマップを作成する際は、以下の点に注意してください。
最大サイズやパーツ数を変更すると、パーツの位置がズレてしまい、意図しない表示になってしまう場合があります。
- 各パーツの中心点をずらさずに作成する
- 各パーツに定義した最大サイズを超えないようにパーツを作成する
- 各パーツに定義した最大サイズを変更しない
- パーツ数を増やさない
- レイヤー名を変更しない
差し替え方法
SpriteStudioで画像を差し替えたい場合「参照セルマップの変更」を利用することで簡単に差し替え・確認を行うことができます。
以下のページに詳しく方法が記載されておりますので、併せてご参照ください。
関連ページ
- PSDtoSS6 PSDからSpriteStudio Ver.6用データ生成
PSDtoSS6 の使用方法について解説しています。 - NULLパーツの使い方 – パーツをプログラムで差し替えられるような仕組みを構築したい
再生環境のプログラムやスクリプトでssceを切り替えたい場合は、こちらをご参照ください。