キャラクタアニメーションを画像差し替えでキャラ変更したい

画像を差し替えてアニメーションのバリエーションを作成するには、同じ座標にパーツが配置されたテクスチャを準備する必要があります。
手動でパーツを配置し、バリエーション用のテクスチャを作成することもできますが、調整が必要なため、少々手間がかかります。

本ページでは、psdからSpriteStudioの各種ファイルにコンバートする補助ツール「PSDtoSS 6」を活用し、テクスチャのテンプレートを作成し、パッキング・ssce(セルマップファイル)へのコンバートを行う方法を解説します。

テンプレートを作成する

「PSDtoSS」で画像のパッキングを行う際、各レイヤーの名前とサイズが変わらなければ、セルマップでのパーツの並びは毎回同じになります。
この仕様を利用してテンプレートとなるpsdを作成すると、簡単にセルマップのバリエーションを作成することができます。

1.キャラクタのパーツを分割します。
2.各パーツの最大サイズを定義します。

3.新しくレイヤーを作成し、パーツと一緒にグループに格納します。

新しく作ったレイヤーに、想定する最大サイズを四角形で描画します。
四角形はレイヤーマスクにすることをおすすめします。

4.もうひとつレイヤーを作成し、3で定義した最大サイズの左上隅と右下隅に、最大サイズを示す点を置きます。
点を描画する際は、アンチエイリアスをかけないでください。

点の代わりに、枠線を描画しても問題ありません。

5.2~4の作業を繰り返し、すべてのパーツに最大サイズの定義を行います。
6.四角形のレイヤーを不可視にし、点のレイヤーとパーツのみを可視状態にします。
7.PSDtoSSに同梱されているスクリプト「GeneratePivotLayer」を実行し、各パーツの中心点用レイヤーを作成・設定します。
8.PSDtoSSに同梱されているスクリプト「PSDtoSS_Export」を実行し、コンバートを行います。
各パーツの画像と「PSDファイル名.ss5-psdtoss-info」というファイルが出力されます。

9.PSDtoSSでコンバートを行います。
「PSDファイル名.ss5-psdtoss-info」をPSDtoSSにドロップし、設定を行った後「コンバート開始」ボタンをクリックします。

10.PSDtoSSの設定は、どのpsdをコンバートする際も統一するようにしてください。

変更するとパーツの位置がズレてしまうためです。

11.作成した各パーツがパッキングされ、1枚のテクスチャになります。

最大サイズを示す点が残っているので、これを消していきます。

12.テクスチャを画像編集ソフトで開き、最大サイズを示す点をすべて消去し、上書き保存をします。

13.これでセルマップのテンプレートは完成です。
作成したpsdを活用して他のキャラクターも作成し、コンバートを行ってください。

作成したテンプレート利用時の注意

テンプレートのpsdを使って、差し替え用セルマップを作成する際は、以下の点に注意してください。
最大サイズやパーツ数を変更すると、パーツの位置がズレてしまい、意図しない表示になってしまう場合があります。

  • 各パーツの中心点をずらさずに作成する
  • 各パーツに定義した最大サイズを超えないようにパーツを作成する
  • 各パーツに定義した最大サイズを変更しない
  • パーツ数を増やさない
  • レイヤー名を変更しない

差し替え方法

SpriteStudioで画像を差し替えたい場合「参照セルマップの変更」を利用することで簡単に差し替え・確認を行うことができます。
以下のページに詳しく方法が記載されておりますので、併せてご参照ください。

関連ページ

このエントリーは役に立ちましたか?