本記事では、ちびキャラ作成における骨入れからセットアップ（リギング）までの手順を解説します。
前回はSpineの3つのコンストレイントのうち「パスコンストレイント」を使ってセットアップしましたが、今回は「トランスフォームコンストレイント」と「IKコンストレイント」の2つを使用します。
こんな感じリグを組んでみました。
[Spine]参考＆前提条件
下記の記事にあるチュートリアルの項目で紹介した、CGWORLDのモデルデータを参考にしています。
なお、Spineの基本的な操作方法を習得している前提で解説を進めます。
初めて操作する方は、まず下記の記事をご確認ください。
[Spine]下絵（テンプレート）の準備
下絵は次の目的で使用します。
※Photoshopからの書き出し時に一緒に出力することも可能です。
今回は手動で画像を追加する手順で進めます。
- 元絵とずれてないか確認するため
- 骨の位置のあたりとして
骨を配置するアタリとして使用します。
ファイル名は「template」とします。
背景を透明にしたPNG形式で保存します。
下絵画像「template」をrootボーンへドラッグ＆ドロップします。
親階層にスロットが自動生成されます。
下絵のアタッチメントを選択し、トランスレートツールで位置を合わせます。
位置を合わせたら、誤操作を防ぐために「選択」をOFFにして下絵をロックします。
作業しやすいよう、必要に応じてカラーの透明度（不透明度）を調整します。
[Spine]ちびキャラの骨（ボーン）の作成
骨を作成するには、ビューパネル下部の「作成」ツールを選択し、ドラッグ＆ドロップで配置していきます。
基本の骨の作成
位置は後から微調整できるため、まずは必要な骨を順番に作成します（計16本）。
- 股間 ➡ 腰 ➡ 首元 ➡ 顎（4箇所）
- 肩 ➡ 肘 ➡ 手首（左右で6箇所）
- 足の付け根 ➡ ひざ ➡ 足首（左右で6箇所）
※腕の骨の位置はテンプレート画像を参考に配置しています。
リグ用の骨の作成
※下記画像のピンク部分
制御用（リグ用）の骨を追加で作成します（計10箇所）。
- 前髪
- 横髪
- 後ろ髪
- 顔の前方
- 顔の中央
- 顔の後方
- 左右の肩（×2）
- 左右の股（×2）
骨の微調整
補正（Compensate）の「ボーン」と「イメージ」をONにします。
この設定を有効にすると、子ボーンや画像を維持したまま、対象の骨だけを調整できます。
トランスレートツールや回転ツールを使って、骨の位置と角度を整えます。
- 回転；できればすべて整数に直しましょう。（動かしてしまった時に値を把握しやすい）
- 位置：骨の先端と次の骨の根本のリングが重なるように調整しましょう
- 骨の長さ：骨を選択しツリーパネルの下「長さ」の値を変更します。
データ整理
ここで一度ツリー階層とデータを整理します。
まずは下記画像を参考に、親子階層の整理と骨の名前付けを行います。
※ツリーパネルの矢印アイコンを右クリックすると、すべての階層を一括展開できます。
- 腰（body）
- 胸（body_upper）
- 鎖骨中央（body_neck）
- 頭（head）
- 肩（armOuter,armInner）
- 肘（armOuter_lower,armInner_lower）
- 手首（armOuter_hand,armInner_hand）
- 足の付け根（legOuter,legInner）
- ひざ（legOuter_lower,legInner_lower）
- 足首（legOuter_foot,legInner_foot）
- 前髪（head_hairOuter）
- 横髪（head_hairInner）
- 後髪（head_back）
- 追加した肩の骨（armOuter_shoulder,armInner_shoulder）
- 追加した足の骨（legOuter_hip,legInner_hip）
- 追加した顔の前方の骨（head_Controller）
- 追加した顔の中央の骨（head_face）
- 追加した顔の後方の骨（head_Controller_sub）
骨の色分けとアイコン変更
識別しやすいように骨へ色を設定します。
骨を選択し、プロパティの「カラー」で色を調整します。
また、追加したリグ用の骨はアイコンを変更しておきます。
- 腕と足の付け根は■のアイコンに
- 他は十字のアイコンに
設定が完了すると下記のような表示になります。
[Spine]ちびキャラのセットアップ（リギング）
各アタッチメントを骨にバインドし、ウェイトを調整していきます。
パーツのメッシュ化
パーツのアタッチメント（画像）を選択し、ツリービュー下部の「メッシュ」にチェックを入れて「メッシュ編集」をクリックします。
「作成」ツールで頂点を配置し、「変更」ツールで位置を調整します。
また、頂点を配置する際にドラッグ＆ドロップするとオレンジ色のエッジを作成できます。
エッジを指定することで、意図したメッシュの分割ラインを維持できます。
※今回はすべてのアタッチメントをメッシュ化します（計10箇所）。
※肘や膝などの関節部分は、きれいに曲がるようエッジを3重ほど密集させてメッシュを割りましょう。
パーツのバインド
メッシュと骨を関連付けるバインド作業を行います。
画面上部メニューの「ビュー」から「ウェイト」パネルを表示します。
メッシュを選択した状態でウェイトパネルの「バインド」を押し、連動させたい骨を選択します。
各メッシュに必要な骨をすべてバインドしていきます（計10箇所）。
対応する骨の組み合わせは次のとおりです。
- 前髪➡head, hair_outer
- 横髪➡head, hair_inner
- 後髪➡head, head_back
- 顔のパーツ➡head, head_face, head_Controller_sub
- 顔➡head, head_Controller, head_Controller_sub
- 右腕➡armInner, armInner_Lower, armInner_hand※左腕も同様
- 右足➡legInner, legInner_Lower, legInner_hand※左足も同様
- 体
パーツのウェイト調整
- 前髪➡hair_outer一色
- 横髪➡head_inner一色
- 後髪➡head_backBack一色
- 顔のパーツ➡head_face一色
- 顔➡head一色
- 右腕➡関節を境目に3本均等に
- 右足➡関節を境目に3本均等に
- 体➡7本の骨を影響範囲を考えて塗り分け
ウェイトの調整方法は4種類あります。
部位に応じて使い分け、各骨の影響範囲を設定していきます。
- ダイレクト➡骨を選択して上下にドラッグして値を直接調整
- 追加➡値分、影響度を追加する
- 取り除く➡値分、影響度を削る
- 置換➡指定した値に置き換えられる。0にして消す時に便利
※ウェイトパネルの「オーバーレイ」と「選択済み」にチェックを入れると、影響範囲が色分けされて見やすくなります。
※この段階では大まかな割り当てで問題ありません。
最終的な仕上がりは、テストアニメーションを再生しながら微調整します。
かかとのIKコンストレイントの設定
コントローラー「IK_legInner」の位置を動かすと、膝が自然に曲がる仕組みです。
- 右足「legOuter」骨を選択
- ツリービュー＞新規＞IKコンストレインを選択
- ターゲットは同じ「legOuter」を選択
- コンストレイン名は「IK_legOuter」、「IK_legOuter」という骨も作成されます。
- 「IK_legOuter」の骨を選択して子を追加「legOuter_lower」に指定。
- 「IK_legOuter」の骨を選択して、テンプレートを見ながら元の基本の位置まで調整
つま先のIKコンストレイントの設定
コントローラー「IK_footOuter」の位置を動かすと、つま先が連動して回転する仕組みです。
- 「legOuter_foot」を選択
- 新規＞IKコンストレインを選択
- ターゲットは「legOuter_foot」を選択
- コンストレイン名は「IK_footOuter」
- 階層を整えます。作成した「IK_footOuter」の骨の下に「IK_legOuter」をドラッグ＆ドロップ
- 最後にrootの下にある「IK_footOuter」と子の「IK_legOuter」の位置を微調整
- 「IK_legOuter」の位置を動かせば、膝が曲がり
- 「IK_footOuter」の位置を上下に動かせば、つま先が曲がります。
同様の手順をもう片方の足にも行い、同じIK設定を適用します。
顔のトランスフォームコンストレイント
「head_Controller」を移動させると、顔のパーツが立体的に回り込む仕組みです。
- 顔パーツ「head_face」を選択して、トランスフォームコンストレイン
- ターゲットは「head_Controller」を選択
- ツリービュー下の設定
・リンクスライダーにチェック
・ミックスの値は4 - パーツが動いてしまう場合は、オフセットの「一致ボタン」を押すと元に位置に戻ります。
以上の設定により、「head_Controller」を動かした際に顔の各パーツが追従します。
同様に他の頭部パーツも「head_Controller」をターゲットにトランスフォームコンストレイントを設定します。
| 項目 | コンストレイント名 | ミックスの値 |
|---|---|---|
| 顔のパーツ | cons_head_face | 4 |
| 横髪 | cons_head_hairInner | 2.5 |
| 前髪 | coms_head_hairOuter | 3 |
| 後ろ髪 | cons_head_back | -1 |
| 顔の後方のコントローラー | cons_head_subController | -100 |
肩のコンストレイント
「armOuter」を左右に移動させた際、肩が回り込むように回転する仕組みです。
- 「armInner_shoulder」を選択してトランスフォーム・コンストレイント
- ターゲットは「armInner」
- ミックスのトランスフォームの値を100
- 同様に「armOuter_shoulder」を選択してトランスフォーム・コンストレイント
ターゲットは「armOuter」
ミックスのトランスフォームの値を150
以上の設定でarmInnerまたはarmOuterを位置移動した時に体も追従するようになります。
さらに両肩を連動させる設定を行います。
- 「armInner」を選択
- ターゲットを「armOuter」
- 生成されたコンストレインのオプションのローカルにチェック
- ミックスのトランスレートを-40
- オフセットの一致を押して、パーツのずれた分調整
以上で「armOuter」を左右に動かした際、「armInner」も連動して体の傾きを調整できるようになります。
腰のコンストレイント
同様に「legOuter」を左右に移動させた際、腰周りが回り込むように回転する仕組みです。
- 「legOuter_hip」を選択してトランスフォーム・コンストレイント
- ターゲットは「legOuter」
- ミックスのトランスレートは140
- 続いて「legInner_hip」を選択してトランスフォーム・コンストレイント
- ターゲットは「legInner」
- ミックスのトランスレートは140
両足が連動する設定を行います。
- 「legInner」を選択してトランスフォーム・コンストレイント
- ターゲットは「legOuter」
- 生成されたコンストレインのオプションのローカルにチェック
- ミックスのトランスレートは-65
オフセットの一致ボタンを押しても元の位置に（※基本1回クリックですが場所によっては数回クリックする必要があります）
以上でちびキャラのリグ構造が完成しました。
あとはアニメーションさせて、違和感のある場所はウェイトを再調整しましょう！
[おまけ]メッシュ編集しないで関節を曲げる場合
メッシュ編集を行わずに画像の回転だけで関節を曲げる方法も解説します。
設定手順は以上です。
メッシュ化しない手法は描画負荷を低く抑えられるため、モバイルゲームなどに向いています。
ちびキャラのようなシンプルな形状であれば、メッシュ変形を使わず回転のみで曲げる構成も有効です。
関節を曲げた際につなぎ目がずれる場合は、Compensate（補正）の「ボーン」と「イメージ」をONにして骨の回転軸を調整します。
重なりで隠したい部分は、ツリービューの目アイコンまたは階層展開アイコンから右クリックで階層下すべて非表示に切り替えられます。
3DCGのほかの記事は、まとめからご覧いただけます。
Spineとは何かはこちらです。
Spineの記事は、ほかにもあります。
ちびキャラ作成！骨入れからセットアップまでまとめ
今回は全パーツをメッシュ化したセットアップのため描画負荷の面でゲーム用途には配慮が必要ですが、「トランスフォームコンストレイント」と「IKコンストレイント」を組み合わせた表現手法を紹介しました。
各部位が連動するリグを構築しておくことで、アニメーション作成時のキーフレーム調整箇所が減り作業効率が大幅に向上します。