>   >  Spineではじめる、動くイラスト制作:第4回:コンストレイントを使ったリグ設定(前編)   
第4回:コンストレイントを使ったリグ設定(前編)   

第4回:コンストレイントを使ったリグ設定(前編)   

こんにちは。HERMIT WORKSの柴田章成です。今回からは、いよいよSpineの実践編です。第2回第3回で解説した3種類のコンストレイント機能を組み合わせ、表現力豊かなリグをつくっていきます。今回と、続く第5回(2019年12月公開予定)で、キャラクターの頭や体の向き、髪の毛などの揺れ物、キャラクターの武器からなる、代表的な3要素の制御方法を説明します。これら3要素以外でも、応用力を高めれば、リグによる自動制御が可能になり、作業効率を高めることができます。それこそが、ほかのツールにはないSpineの強みだと言えます。Spineを使うからには、ぜひ習得しておきたい技術です。

TEXT_柴田章成 / Akinari Shibata(HERMIT WORKS / Twitter:@AkinariShibata
EDIT_尾形美幸 / Miyuki Ogata(CGWORLD)

SDキャラクターのボーン設定とメッシュ調整

今回はサンプルのSDキャラクターを使い、一緒にセットアップをしていきましょう。サンプルデータはこちらからダウンロードしてください。使い方は、以降で順番に説明していきます。

▲メッシュの[ウェイト]調整と[トランスフォーム・コンストレイント]を使って、キャラクターの向きを簡単に制御できるようにしています


▲最終的にはこんな感じで動くようにします


サンプルデータの[SD_elf]フォルダの中には、[images]フォルダと3つのファイルが格納されています【上図】。[images]フォルダの中には、Spine上で使用するSDキャラクターのテクスチャが入っています。第1回で説明したように、Photoshopの配置データをSpineへエクスポートする必要があります。今回はPhotoshopをもっていない方のために、配置データをエクスポートした[SD_elf.json]を用意したので、こちらを使ってください。Photoshopをもっている方は[SD_elf.psd]を読み込んで、第1回の内容を参考に、スクリプトを使ってエクスポートから試してみてください。[SD_elf.spine]は、今回の完成データです。最終的にどうなるかを確認したいときにご使用ください。


まずはSpineを開いて、[SD_elf.json]からSDキャラクターをインポートします。インポート直後はSDキャラクターの位置が右下にずれているので、全スロットを選択し【上図内A】、[root]ボーンのある横軸【上図内B】を地面に見立て、全テクスチャを【上図内C】から【上図内D】まで移動させます。[Hierarchy]内では、[ctrl]キー+クリックで複数アイテムを選択できます。また、[shift]キー+クリックで選択していたアイテムから次にクリックしたアイテムまでをまとめて選択できます。

次に、SDキャラクターへボーンを設定します。詳しい設定方法は第1回を参考にして下さい。今回のサンプルデータの構造は、第1回のキャラクターのそれと似ています。ただし各関節をメッシュで動かす予定なので、上肢[armInner.png][armOuter.png]も下肢[legInner.png][legOuter.png]も1枚のテクスチャとしてまとまっています。このように、メッシュで動かす前提だと、パーツの数は少なくてすみます。


基本的なボーンの設定が完了したら、髪の毛の個々のパーツ[head_hairCenter.png][head_hairInner.png][head_hairOuter.png][head_hairTail.png]の付け根辺りにもボーンを追加しておきます【上図内A】。腰のベルトのパーツ[body_parts.png]や、スカートの背中側のパーツ[body_skirtBack.png]は[body]ボーンに格納し、背中の矢筒のパーツ[body_weapon.png]にはボーンを設定しておきます【上図内B】。


次に、各テクスチャにリグを設定していきます。手前のパーツから作業すると楽なので、まずは左上肢からです。上腕、前腕、手のボーンは既につくってあるので、手のボーンの直下に親指のボーンと、そのほかの指のボーンを追加します【上図内A】。なお、今回の手の形状はミトン型です。左上肢のテクスチャのメッシュを割り、上腕、前腕、手、親指、そのほかの指のボーンをバインドします【上図内B】。


次に[アニメ化モード]に移り、実際に上肢のボーンを動かしながら、最適な形になるよう[メッシュツール]で[ウェイト]を調整していきます。肘関節に注目すると、前腕が上腕よりも奥に位置しているように見えます【左図内A】。[ウェイト]ビューに表示されているボーンの一覧は、描画の優先順位に沿って上から順番に並んでおり、最初はボーンをバインドした順番に沿って上から登録されるので、前腕のボーン[armOuter2]よりも上腕のボーン[armOuter]が上位にあります【左図内B】。今回は前腕が上腕よりも手前に位置しているように見せたいので、ドラッグアンドドロップによって、前腕のボーン[armOuter2]を上腕のボーン[armOuter]よりも上へと移動させます【右図内A】。すると、前腕のボーン[armOuter2]に関連づけられているメッシュの頂点が、上腕のボーン[armOuter]に関連づけられているメッシュの頂点よりも手前に表示されるようになり、肘関節における前腕と上腕の前後関係が逆転します【右図内B】。メッシュの細かい調整時に自分が望むような形にならない場合は、ボーンの優先順位を変更すると解消されることがあります。


前述した通り、今回は上腕、前腕、手に加え、指も制御できるように調整していきます。メッシュにボーンをバインドすると、トランスレートとローテーションだけでなく、スケールも調整できます。このしくみを利用すると、指を開閉させることが可能です。まずは[アニメ化モード]で、先程設定した指のボーンのスケールを縮小してみましょう。すると、ある程度指先が縮小していきます。次に人差し指から小指までの[ウェイト]を調整し、指のボーンの縮小時に指が閉じているように見える状態になる値を探ります。さらに親指のボーンのローテーションも加えると、パーツを分割しなくても、指が閉じているように見せることができます【上図】。


同じように、奥にある右上肢の指も調整します。先のような指のボーンのスケールの縮小ではなく、反転するくらいまでスケールの値を変更した後に、[ウェイト]を調整します。ここでは指を手の平よりも手前に表示したいので、[ウェイト]ビューに表示されている指のボーンを、手のボーンよりも上へと移動させます。描画の優先順位を変更すれば、指と手の平の前後関係を変更できるので、同じしくみで両手の指を表現できます【上図】。

次ページ:
キャラクターの頭の向きの制御方法

その他の連載