Spineで動くキャラクターを作成する場合、等身の高い立ち絵よりもSDイラスト（ちびキャラ）を動かす事例が多く見られます。
ゲームでちびキャラを動かすならSpineですよね
そこで今回は、SDイラストの作成からSpineへのインポートまで実際に行い、制作時の作画ポイントや注意点を解説します。
IllustratorでのSDイラスト作成と作画ポイント
Spine用にIllustratorを用い、解像度に依存しないベクターデータでイラストを作成します。
IllustratorでのSDイラスト作成
全体のバランスを見ながらパスを引いて作画していきます。
土曜の午前中に、まとめて描き上げています。
朝から無の気持ちでイラレで作成。
せっかくSpine買ったので
ささっと土日でセットアップの検証を終わらせたい…#ねむいねこ pic.twitter.com/gGE8TXWWuk— すいみん💤@CGブロガー (@cg_method) March 7, 2020
作画ポイント1：関節部分は円を意識して作成する
ボーンで回転させた際に破綻しにくくするため、関節の接合部分は円形状を意識して描くと綺麗に曲がります。
作画ポイント2：関節部分の輪郭線はクリッピングマスクで隠す
各パーツに輪郭線を設定している場合、重なる関節部分の線が見えると不自然になるため、マスク処理で非表示にします。
作画ポイント3：パーツの分割
アニメーションで動かす部位ごとにパーツを分けます。
目・口・眉などの表情パーツは1つのグループにまとめます。
IllustratorからPhotoshopへの書き出し
Illustratorから直接Spine向けに書き出すことも可能ですが、ラスタライズして解像度や色味を微調整するため、PSD形式で書き出してPhotoshopへ移行します。
- ・非表示のレイヤーは格納されないので、必要なパーツは表示をONに。
- ・背景レイヤーを作成しておくとそのサイズのカンバスサイズになります。
- ・ファイル＞書き出し＞書き出し形式
- ・レイヤーを保持にチェック（※カラーモードはCMYKにする必要）
書き出したPSDファイルをPhotoshopで開き、レイヤー構成や解像度を確認します。
セットアップ方法に応じた腕や足のパーツ設計
関節の変形方式やリギングの手法に合わせて、パーツを分割して書き出すか、統合して1枚にするかを決めます。
- 骨を入れるだけでそのまま関節を曲げる場合は関節ごとにパーツを分けておきましょう。
手・前腕（前腕部）・上腕の3パーツに細かく分割する構成です。
- 画像をメッシュ化してウェイト調整にて腕を曲げる場合は腕の素材は、一枚絵に統合しておきましょう。
メッシュ変形などを前提とし、腕や足を分割せず1枚の画像に統合する構成です。
PhotoshopからSpineへの書き出し
Photoshopでレイヤー名や構造を整理し、Spine用のデータを出力します。
- カラーモードをRGBに変更（※CMYKだとPNG保存できない）
- カンバスのサイズを1024×1024pxに変更
- ルーラーの位置（0,0 ）を足元に変更 ※原点のアタリのガイドは必ず残しておきましょう！
- レイヤー名の階層順と名前の確認（日本語NG）
- bgは背景レイヤーに変換（レイヤー＞新規＞レイヤーから背景へ）
レイヤー名における左右の表記は、画面基準で手前側を「Outer」、奥側を「Inner」として整理しています。
Photoshopの上部メニューから「ファイル」＞「スクリプト」＞「PhotoshopToSpine」を実行します。
- 背景レイヤーを無視するにチェック
- 余白をトリミングするにチェック
- 倍率指定を50%に（512x512pxにする）
設定内容を確認し、「OK」をクリックして画像とJSONデータを書き出します。
同名のレイヤーが存在すると書き出し時に警告が表示され、出力先フォルダー内のerror.txtにエラー内容が記録されます。
Spineを起動し、左上のSpineメニューから「データのインポート」を選択して、書き出されたJSONファイルを読み込みます。
3DCGやSpineに関する他の解説記事は、まとめ一覧より確認できます。
Photoshopからの詳細な書き出し手順はこちらで解説しています。
Spineの記事は、ほかにもあります。
Spine SDイラスト制作のまとめ
本記事では、SDイラストの作成からSpineへのインポート手順について解説しました。
Illustratorでベクター作画を行うことで、後からのプロポーション調整や修正を容易にしています。
さらにPhotoshopを経由することで、公式スクリプトを活用して位置関係を保ったままスムーズにSpineへインポートできます。
この記事は2020年3月の作業記録です。
IllustratorやSpineの書き出し設定は版によって項目名が変わることがあるので、お使いの版の画面と見比べてください。
