立絵とイベントCG
Photoshop用プラグインの追加
『PhotoshopToSpine.jsx』をダウンロードしてください
Photoshopを終了させた状態でダウンロードしたファイルを以下のフォルダに入れてください
C:\Program Files\Adobe\Adobe Photoshop 2020\Presets\Scripts
※ バージョンやインストール先に合わせてパスは調整してください
Photoshopを起動し ファイル -> スクリプト -> PhotoshopToSpine という項目が追加されていれば設定完了です
PhotoshopToSpine の配布元リンク
https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop
レイヤーの結合とレイヤー名の設定
出力する png ファイルとレイヤーが１対１になるようにレイヤーを統合してください
統合したレイヤーのレイヤー名に出力するファイル名を設定してください
レイヤー名に重複があるとエラーとなるので注意してください
レイヤーグループを使用していても問題ありません
レイヤー名(ファイル名)の命名規則
レイヤー名(ファイル名)は以下の命名規則でお願いします
ベースファイル名は全パーツで同じものを使用してください
<基本ファイル名>
ベースファイル名 ＋ レイヤーアルファベット(半角1～2文字) ＋ 差分番号(半角3桁) で名前を設定してください
| ベースファイル名 | 先頭につける全パーツ共通の名前 |
|---|---|
| レイヤーアルファベット | レイヤー番号を示す a～z 又は za～zz の何れかの半角小文字アルファベット |
| 差分番号 | 差分を示すゼロ埋め３桁の半角数字 |
例1) ev004a000
例2) ev004zc012
<コスチューム差分>
コスチューム差分がある物は基本ファイル名の後ろに半角アンダーバーとコスチューム番号(半角2桁)を追加してください
例) ev004a000_03
<ハート目差分>
目のレイヤーはハート無しとハート有りの２パターンのレイヤー用意してください
ハート有のレイヤー名の末尾に半角小文字の h (heartの略)を追加してください
ハート無し例) ev004d004
ハート有り例) ev004d004h
<ボテ腹差分>
ボテ腹は通常用とボテ腹の２パターンのレイヤーを用意してください
ボテ腹のレイヤー名の末尾に半角小文字の p (pregnantの略)を追加してください
通常例) ev004f006
ボテ例) ev004f006p
<複合型>
コスチューム差分＆ボテ腹差分のような複数の差分を併せ持つレイヤーは以下の優先度で各情報を末尾に並べてください
基本名 ＋ コス差分 ＋ ハート目 ＋ ボテ腹
コスチュームとボテ腹がある場合) ev004g009_16p
ピボットレイヤーの追加
座標合わせの基準を示すピボットレイヤーを追加してください
このレイヤーで指定した位置がゲーム画面の中央下部に一致するようにオフセット座標が計算されます
pngファイルを出力する際はピボットレイヤーも合わせて出力してください
座標の指定方法は２種類ありレイヤー名のつけ方で区別されます
@Origin
ピボットのレイヤー名を "@Origin" とするとレイヤーの中央が基点座標となります
立絵などの画像の下部がゲーム画面からはみ出すような画像のときはこちらを使用します
空のレイヤーを作成し、レイヤー名を半角文字で "@Origin" にしてください
ゲーム画面の下部中央にあたる位置に正方形を描いてください
正方形の中央がゲーム画面の下部中央の位置と一致するようにしてください
正方形のサイズは縦横が必ず偶数ピクセルになるようにしてください
判りやすければ色やサイズはお好きなもので構いません
@OriginBtm
ピボットのレイヤー名を半角文字で "@OriginBtm" とするとレイヤーの下部中央が基点座標となります
イベントCGのような画像とゲーム画面が同じサイズ(画像の下部がゲーム画面の下部と一致するもの)のときはこちらを使用します
空のレイヤーを作成しレイヤー名を半角文字で "@OriginBtm" にしてください
ゲーム画面の下部中央にあたる位置に正方形、又は、▽(下向き三角)を描いてください
描いた模様の中央下部とゲーム画面の中央下部が一致するようにしてください
模様の幅は必ず偶数ピクセルになるようにしてください
判りやすければ色やサイズはお好きなもので構いません
ご注意
ピボット画像は誤認防止のため半透明のピクセルがないように描いてください
鉛筆ツールや矩形ツールを使用することをお勧めします
レイヤー内に１ピクセルでもゴミが入ると座標が狂ってしまうので注意してください
画像の出力
Photoshopのメニューバーから ファイル -> スクリプト -> PhotoshopToSpine を選択してください
出力設定ダイアログから以下の設定を行った後『OK』ボタンをクリックしてください
※ 画像サイズやレイヤー数によって出力に時間がかかる事があります
| 設定値 | 機能 | |
|---|---|---|
| Ignore hidden layers | 任意 | 非表示レイヤーを出力しない |
| Ignore background layer | 任意 | 『背景』に設定されたレイヤーを出力しない |
| Trim whitespace | ON | 余白部分をトリミングするか |
| Write Spine JSON | ON | Spine用JSONファイルを作成するか |
| Write template image | OFF | テンプレート画像(全レイヤーを統合した画像)を作成するか |
| Scale | 100% | 出力時のスケーリング。座標誤差を防ぐため出力時のスケーリングは使用しないでください |
| Padding | 0 | 周囲に挿入する余白。常に 0 にしてください |
| Images | 任意 | pngの出力先のパス |
| JSON | Imagesと同じ場所 | JSONファイルの出力パス。Imagesと同じ場所を指定してください |
Unityへのインポート
インポート先のフォルダ
立絵とイベントＣＧはそれぞれ以下のフォルダを使用してください
必要に応じてサブフォルダを作ってください
| イベントCG | Assets/ABAssets/event_cg |
|---|---|
| 立絵 | Assets/ABAssets/stand_images |
インポート
Unityのメニューバーから Tools -> ADV Image Importer をクリックしてインポート画面を開いてください
『JSON Path』に上の項で出力したJSONファイルのパスを設定してください
『Import Path』にはインポート先のフォルダをドラッグ＆ドロップで設定してください
下部の『Import』ボタンを押すとpngのインポートを開始しします
| JSON Path | Photoshopから出力したJSONファイルののパス |
|---|---|
| Import Path | インポート先のフォルダ |
| Ignore Empty | 空の png ファイルを無視する |
| Path | インポート先のフルパス |
ご注意
png画像とJSONファイルは同じ場所にある必要があります
インポート時に画像サイズが４の倍数になるように右下に余白を入れて調整されます
インポート後の画像を直接置換えたりしないでください (修正する際は再インポートしてください)