記事の目次

    こんにちは。HERMIT WORKSの柴田章成です。第2回ではSpineのメッシュ機能と［IKコンストレイント］について解説しました。Spineには［IKコンストレイント］を含め、全部で3種類のコンストレイント機能が実装されています。今回は残る2種類のコンストレイント機能である、［パス・コンストレイント］と［トランスフォーム・コンストレイント］を紹介します。どちらもキャラクターを普通に動かすだけなら必須ではありませんが、アニメーション制作を効率化したい人にとっては重要な機能です。それぞれ奥の深い機能ではあるものの、基本さえ押さえてしまえば使いどころは明確になります。今回紹介する基本的な使用方法を習得するだけでも、多くのシーンで応用できます。

    TEXT＿柴田章成 / Akinari Shibata（HERMIT WORKS / Twitter：＠AkinariShibata）
    EDIT＿尾形美幸 / Miyuki Ogata（CGWORLD）

    曲線に沿った動きを表現できる［パス・コンストレイント］

    放物線を描きながら飛ぶ投擲（とうてき）物や、円を描くようにグルグル回る物体をトランスレートとローテーションだけで表現しようとすると、大変な労力がかかります。そんなときは［パス・コンストレイント］を使うと、曲線に沿った動きを簡単に実現できます。また、この機能を応用すると、髪の毛やスカートなどの長い揺れ物を1つのボーンで制御することもできます。 今回は［パス・コンストレイント］の最も基本的な使い方を解説するため、楕円形のパスに沿ってグルグル回るオブジェクト（火の玉）を表現します。

    ▲2つの［パス・コンストレイント］を使って、火の玉の動きと尾の揺れを制御しています。今回は、この火の玉を作例として、［パス・コンストレイント］について解説します


    ［パス・コンストレイント］を使う際に必要なオブジェクトは2つあります。1つはパスに沿って動かすためのボーンで、もう1つはパスオブジェクト自体です。これら2つを作成していきます。ますはボーンを用意します。 動かしたい素材（作例では火の玉）を読み込み、ボーンを作成します【上図内A】。【上図】では、［wisp］のボーンの中に火の玉の画像と尾の画像の2点が格納されています。次にパスオブジェクトを作成します。パスオブジェクトは［スロット］内に格納する必要があります。［スロット］は、パスオブジェクトを格納したいボーン（今回は［root］）を選択し、新規にパスオブジェクトを作成（［ツリー］ビューのオプションの［新規］ボタンから［パス］を選択）すれば自動的につくられます【上図内B】。


    ［新規］ボタンから［パス］を選択すると、【上図】のように名前を入力するダイアログが表示されるので、任意の名前を入力します。［ツリー］ビューの［Hierarchy］内で見分けやすいように［path_］という文字列を加えておくといいでしょう。


    名前を入力し終えると、［パス編集］ダイアログが表示されます。［パス編集］ダイアログには、3つのツールが用意されています【上図内A】。［新規］は、画面上の何もない所をクリックして、新しいアンカーポイントをつくり、パスを延長できます。［作成］は、既存のオレンジ色のパス上にアンカーポイントを追加できます。［削除］は、アンカーポイントを削除できます。基本的には［新規］ツールで次々とクリックして、パスを延ばしていきます【上図内B】。パスは、両端がつながっている円状のものと、両端がつながっていない線状のものをつくれます。今回は、火の玉がグルグルと円を描くように回る動きを制御したいので、円状のパスを作成します。パスの作成が終わると、新しくつくった［スロット］の中にパスオブジェクトが追加されていることが確認できます【上図内C】。


    以上の手順を経て、ボーンとパスオブジェクトの用意ができました。続いて、ボーンをパスオブジェクトに関連づける［パス・コンストレイント］の設定を行います。［パス・コンストレイント］の設定では、【1】［パス・コンストレイント］で制御したいボーンの選択、【2】［パス・コンストレイント］の名前の入力、【3】動きの軌跡となるパスオブジェクトの選択、という3つの手順を踏みます。まずは制御したいボーンを選択して、［ツリー］ビューのオプションの［新規］ボタンから［パス・コンストレイント］を選択します【上図内A】。


    【上図】のように名前を入力するダイアログが表示されるので、任意の名前を入力した後、［ツリー］ビューの［Hierarchy］から先程作成したパスオブジェクトを選択します。


    ［パス・コンストレイント］の設定が終わると、制御用のボーンと火の玉の画像がパスに沿って移動するのがわかると思います【上図内A】。今回はボーンを1つだけ登録しましたが、複数のボーンを登録し、同時に制御することもできます。 ［パス・コンストレイント］は、一度設定すればオプションの値による複雑な制御ができます【上図内B】。

    ［パス・コンストレイント］のオプションの［間隔］は、複数のボーンを登録した場合に、ボーン間の距離を設定できます。［位置］は、関連づけたパスオブジェクト内の、どの位置にボーンを移動させるかを値で設定できます。［オフセット］の［回転］は、設定した各ボーンにどの方向を向かせるかを設定できます。［ミックス］の［回転］は、設定したボーンの向きがどの程度パスオブジェクトの形から影響を受けるかを設定できます。なお［回転］には、［接線］［チェーン］［チェーンスケール］からなる3つのモードが用意されてます。［接線］は、登録した個々のボーンがパスの形に沿って配置されます。［チェーン］は、複数のボーンを登録した場合に、ボーンの端と端がつながり、鎖のような形になります。［チェーンスケール］は、鎖のような形になったボーンが、パスの形によって伸縮するようになります。［トランスレート］は、設定したボーンがどの程度パスに沿って配置されるかを設定できます。


    最後に前述の［位置］の値に0～100のアニメーションキーを打てば、火の玉がパスに沿ってグルグルと回るループアニメーションを作成できます。【上図】では［位置］の値を50に設定し、円状のパスの下から上に火の玉を移動させてみました。


    次ページ：
    細かい制御を自動化する
    ［トランスフォーム・コンストレイント］

    [[SplitPage]]

    細かい制御を自動化する［トランスフォーム・コンストレイント］

    単純にアニメーションさせるだけなら、［トランスフォーム・コンストレイント］は必須の機能ではありません。しかし、これを上手く使いこなせれば、リグやアニメーションの細かい制御の多くを自動化することで、量産作業を効率化できます。［トランスフォーム・コンストレイント］は、親子関係にないボーンでも、親子関係があるかのように設定できる機能で、1つのボーンの動きに、ほかのボーンを連動させることができます。普通の親子関係とはちがい、動きの影響を受ける値を指定できるため、例えば親に相当するターゲットボーンの動きのうち、50％だけ子に相当する制御ボーンが影響を受けるといった設定もできます。 今回は、身体の各パーツが浮遊しているゴーレムの攻撃モーション作成を通して、［トランスフォーム・コンストレイント］の使い方を解説します。

    ▲［トランスフォーム・コンストレイント］を使って、ゴーレムの身体の浮遊パーツを自動制御しています。普通にアニメーションを付けると、各パーツを個別に制御する必要があり、とても手間がかかります。アニメーションのたびに各パーツを動かすのは面倒なので、［トランスフォーム・コンストレイント］を設定し、右上肢の前腕の巨大なパーツを動かすと、体幹のパーツとの中間点に、上腕のパーツが自動的に移動するように設定しています


    一般的な人型のキャラクターの場合、上肢のボーンは、上腕から前腕、前腕から手へと、親子関係を設定します。今回のゴーレムでは［トランスフォーム・コンストレイント］を用いてバラバラに制御したいので、すべて体幹（今回は［body］ボーン）の子にしておきます【上図内A】。ゴーレムの左上肢は人型のそれと同じように、上腕、前腕、手からなる3つのパーツで構成されていますが、右上肢は上腕と巨大な前腕の2つのパーツで構成されています。複数の関節の制御は少し複雑なので、まずは関節が1つだけの右上肢の設定方法を解説した後、関節が複数ある左上肢の設定方法を解説します。

    ボーンの設定が終わったら、［トランスフォーム・コンストレイント］を設定していきます。この設定では、【1】子に相当するボーン（制御ボーン）の選択、【2】［トランスフォーム・コンストレイント］の名前の入力、【3】親に相当するボーン（ターゲットボーン）の選択、という3つの手順を踏みます。制御ボーンは、ターゲットボーンから移動や変形の情報を受け取り、自動的に追随します。今回は巨大な前腕を動かした際に、自動的に上腕が体幹と前腕の中間点まで移動するように設定します。まずは自動的に動いてほしい制御ボーン（今回は［armInner_upper］ボーン）をワークスペース上で選択します【上図内B】。続いて［ツリー］ビューのオプションの［新規］ボタンから［トランスフォーム・コンストレイント］を選択します【上図内C】 。


    【上図】のように名前を入力するダイアログが表示されるので、任意の名前を入力します。［ツリー］ビューの［Hierarchy］内で見分けやすいように［trans_］という文字列を加えておくといいでしょう。


    名前の入力を終えると、ターゲットボーンの選択画面となります。ワークスペース上で親に相当するターゲットボーン（今回は［armInner_hand］ボーン）を選択すると【上図内A】、［コンストレイント］の中に新規で［トランスフォーム・コンストレイント］が作成され、そのオプションが表示されます【上図内B】。


    ［トランスフォーム・コンストレイント］のオプションは、とても複雑でわかりづらいので、今回は概要だけ簡単に説明し、今後の連載で実例を使って詳しく解説していきます【上図】。 今回は［一致］ボタンを押せば、それ以外はデフォルトのままで大丈夫です。［一致］ボタンを押すと、現在の制御ボーンの位置が［オフセット］に記録され、その位置からアニメーションを開始できます。［オフセット］は、制御ボーンのアニメーションを、どれだけずれた位置から開始するかを設定できます。

    なお［ローカル］のチェックボックスを選択すると、制御ボーンはターゲットボーンのローカル座標の情報を受け取ります。チェックボックスを選択しなければ、ワールド座標の情報を受け取ります。デフォルトは選択なしの状態で、このまま使用する場合が多いです。今回も選択なし、すなわちワールド座標の情報を受け取ります。［相対的］のチェックボックスを選択すると、ターゲットボーンの［親］座標、つまりペアレントボーンの座標との差が、［トランスフォーム・コンストレイント］を設定した制御ボーンに追加されます。あまり使うことはありませんが、このチェックボックスを選択すると、［トランスフォーム・コンストレイント］を設定しても、制御ボーンが固定されずに動かせるというメリットがあります。［ミックス］は、制御ボーンがターゲットボーンの移動や変形の情報を何％受け取るかを設定できます。


    ［トランスフォーム・コンストレイント］の設定が終わったら、［アニメ化モード］に移り、［ミックス］の値を調整してみましょう。値を変えると、制御ボーン（今回は［armInner_upper］ボーン ）が移動する様子が確認できます【上図内A】。【上図の上】は［ミックス］の値が0の場合、【上図の下】は値が50の場合です。［設定モード］に戻り、［ミックス］に好みの値を反映させておけば、ターゲットボーンの動きに追随して、自動的に制御ボーンも動きます。 また、［ミックス］の値にアニメーションキーを打つことも可能です。


    最後に、複数の関節をもつ左上肢にも［トランスフォーム・コンストレイント］を設定します。左上肢は上腕、前腕、手からなる3つのパーツに分かれているので、それぞれ1つ下のボーンをターゲットにします。上腕の［armOuter_upper］ボーンは、前腕の［armOuter_lower］ボーンをターゲットにして［トランスフォーム・コンストレイント］を設定し、［ミックス］の値を50にします。前腕の［armOuter_lower］ボーンは、手の［armOuter_hand］ボーンをターゲットにして［トランスフォーム・コンストレイント］を設定し、［ミックス］の値を60にします。このように設定しておくと、常に等間隔を維持しながら各パーツが動くようになります。【上図】のように、複数のパーツからなる上肢を伸ばす方法はいくつかありますが、これが一番オーソドックスなやり方です。


    【上図】では右上肢の前腕にメッシュ機能による変形を適用し、腕を振り回して叩きつけるモーションを作成しています。

    今回は［パス・コンストレイント］と［トランスフォーム・コンストレイント］の基本的な使い方を説明しました。どちらも複雑な機能なのでとっつきにくいですが、使いこなせれば、Spineで実現できない表現はほとんどなくなるくらい便利です。第4回では、3種類のコンストレイント機能を組み合わせて複雑なリグを設定したキャラクターの制作事例を紹介します。



    第4回の公開は、2019年11月を予定しております。

    プロフィール

    • 柴田章成
      HERMIT WORKS所属のデザイナー・アニメーター・テクニカルディレクター。3度の飯よりリグが好き。
      Twitter：＠AkinariShibata

    • HERMIT WORKS
      主にアートディレクターで構成されたデザイナー集団。ハイクオリティなデータ制作でゲーム開発をサポートしています。本記事やSpine、そのほかのツールに関するお問い合わせは、下記メールアドレスまでお送りください。
      shibata.hermitworks@gmail.com
      hermitworks.jp