Spineを活用して2.5Dキャラを作ろう！（後編）
▼はじめに
こんにちは！今回は前回に引き続き、Spineでキャラクターを立体的に動かすための方法を解説しますので、是非ご覧ください！
↓前編（STEP １・２）はこちら
▼STEP 3：向き制御用のボーンを作成し、トランスフォームコンストレイントを適用する
トランスフォームコンストレイントとは、親子関係とは別に動きの依存関係を作ることのできる機能です。
トランスフォームコンストレイントを適用し、Mixの値を変更することで「どの程度動きが連動するか」を設定することができます！
この機能は、キャラクターに持たせる武器に対してトランスフォームコンストレイントでMixを100%にして追従させ、Mixを解除すると独立した動きをつけられるようになります。普段は武器を持っているが、落とすことも可能になるということです。
Spineはアニメーションで親子関係の変更はできないため、親子関係だと常に親へ追従してしまい、制御が難しくなるという問題があります。
今回はこのトランスフォームコンストレイントを使用して立体的な表現を行いますが、決して立体的な表現を作るためにトランスフォームコンストレイントが必須というわけではありません。
ただ、Mixに対して負の値をつけることによってアングル操作が容易になるので、この方法を使用していきます。
Mixを負の値にすると、Mixが正の値の時に対象と同じ方向に動くのに対して、対象とは逆の方向に動くようになります。
©︎G2 Studios inc. All rights reserved
2つの正反対に動くボーンを各パーツに対してバインドし、あるウェイトの付け方をしていくと、このような立体的な動きをさせることができるようになります。
まずは、角度の調整を行うためのトランスフォームコンストレイントを適用する、「コントロールボーンの作成」から行っていきましょう。
まず、体の中心あたりに2つのボーンを作成します。
画像では、ボーンを見やすくするためにroot直下に作成しましたが、ジャンプするなどキャラクターが大きく動くモーションを作成する場合は、大きく動くボーンの子にしておくと、後から立体的に動かしやすくなります！
今回は、body_control_frontを動かすと、それに合わせてbody_control_backが動くように設定していきます。
ボーンを作成したら、追従する側のボーン（今回はbody_control_back）を選択し「新規」から「トランスフォームコンストレイント」を押し、追従させる側（今回はbody_control_front）のボーンを選択します。
これによってトランスレートのMixの値を100にした場合、body_control_frontを動かすとbody_control_backは全く同じように動きます。今回はこのMixの値を-100にして、真逆に動くようにします。
2つのボーンが重なっていると見えづらいので、body_control_frontを右にずらして、反対側にbody_control_backがくるようにしました。
補足ですが、離れた位置のボーンに対してトランスフォームコンストレイントを設定した場合、トランスフォームのMixの値を上げると、基準となるボーンに位置が引き寄せられてしまいます。今のボーンの位置を基準に動かしたい場合は、一致ボタンを押すことでオフセットの値を自動で設定してくれます。
▼STEP 4：向き制御用のボーンをバインドしてウェイトを調整する
ボーンを移動させて見やすくしたら、先ほどメッシュを割ってウェイト調整をしたパーツに対して新しく作成したコントロールボーンをバインドします。
【注意】ウェイト調整やボーンの位置・角度調整が完了していない状態で新しくコントロールボーンをバインドすると、後から修正するのが大変になってしまいます。STEP3までのセットアップを完全に終えてから進めていきましょう。
バインドしたボーンのウェイトを、頂点につけていきます。この時、ウェイトをつけていくときのコツは、SDキャラを立体的に考えてより手前にある頂点はbody_control_frontのウェイトを強く、より奥にある頂点はbody_control_backのウェイトを強くすることです。例えば上の画像の１枚目のケープ の手前の頂点のパラメーターを見るとbody_control_frontが18%、２枚目のケープ の端の頂点のパラメーターはbody_control_backが5%となっています。このように全ての頂点に対して奥行きを意識しながら、body_control_frontまたはbody_control_backどちらかのウェイトをつけていきます。
パーツ全体にウェイトをつけ終わってからbody_control_frontを左に動かしてみると左に、右に動かすと右に向くようになります。一番手前のパーツしかコントロールボーンを適用してませんが、左に向いている感じが出てきたかと思います！
以降、同じように別のパーツにもウェイトを適用していきます。
【注意】他のパーツとのウェイトの強さに差が出ないように気をつけましょう。
例えば、同じ奥行きにあるパーツ同士のウェイトがバラバラであったり、手前にあるパーツなのに奥にあるパーツよりbody_control_frontの値が少なかったりすると、動きに違和感が生まれてしまいます。
つまり、全体の奥行きを意識してウェイトを調整していくことが重要です！もちろん1発で全てのパーツのウェイト調整をするのは難しいので、動かしながら綺麗に立体的に動くように少しずつ調整していきましょう！
STEP 2まででメッシュ割りを必要としなかったパーツ（顔や目など）も、このタイミングで同じように形を意識してメッシュを割り、バインド・ウェイト調整をしていきましょう！
コントロールボーンのバインド、ウェイト調整を全てのパーツに適用していくと、全体が立体的に動くようになります。立体的な2.5DのSDキャラクターの完成です！！
応用として、腕にトランスフォームコンストレイントをつけると、より立体的に表現することもできます！また、体と顔でコントロールボーンを分けることによって、体をひねったような表現も可能になるのでおすすめです！
実際にモーションを作成して、SETP2までの通常のセットアップ（上）と、STEP4までの立体的なセットアップ（下）で比較してみました！
基本となるモーションは同じで、コントロールボーンを動かして立体的に角度が変わるようにしています！
好みはあるかもしれませんが、立体的に動いている下の方が表現の幅が広く、奥の深いモーションになっていることが分かると思います！
▼終わりに
いかがだったでしょうか。今回はSDキャラクターを立体的に動かせるように作成していきましたが、もちろんSDキャラクターではなく一枚絵など、様々な場面で活用できる手法なので、どんどん活用してみてください！通常のセットアップに比べて時間がかかってしまいますが、ワンランクアップしたモーションを作成したいときにはおすすめです！
↓前編はこちら
G2 Studiosでは一緒に働く仲間を募集しています！
