記事の目次

    こんにちは。HERMIT WORKSの柴田章成です。第4回では、Spineの［トランスフォーム・コンストレイント］を使ってSDキャラクターの頭と体のリグを作成し、基本的な動きを制御できるようにしました。今回も同じSDキャラクターを使い、付属バーツにあたるポニーテール（揺れ物）と弓（武器）を制御するリグの作成方法を解説します。

    ポニーテールと弓の弦には、柔らかく弧を描き変形するという共通点があります。こういう変形のためのよくある選択肢は、メッシュにバインドした複数のボーンで制御する、メッシュをそのままデフォームで動かすの2つだと思います。ただし、どちらの選択肢も制御する箇所が多くなり面倒です。そこで［パス・コンストレイント］を用いて揺れ物を簡単に動かすしくみを紹介します。

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

    ［パス・コンストレイント］を使い、ひとつのボーンで揺れ物を制御

    まずはポニーテールを簡単に揺らす方法を説明していきます。アニメーション制作では、揺れを制御する場面がとても多いです。複数のボーンに動きを付け、ひとつひとつのタイミングをずらし、自然に見えるように何度も修正することも少なくありません。しかし今回説明する方法を使えば、ひとつのボーンだけで自然な揺れを制御できます。髪の毛は勿論、スカートや触手など、長い形状で、よく揺れるものに対して、汎用的に使うことが可能です。


    【上図内A】はポニーテールのボーンです。最初に、前準備としてポニーテールをメッシュ化しましょう。あまりディテールが描かれていないので、細かくメッシュを割る必要はありませんが、下部にいくほど頂点の間隔を狭めると自然な動きを表現できるようになります。


    メッシュを割り終えたら、［パス・コンストレイント］に登録するためのボーンを作成します。第3回ではひとつのボーンだけを［パス・コンストレイント］に設定しましたが、今回は複数のボーンを設定します。


    まずはポニーテールのボーンの直下に、1本の大きなボーンをつくります【上図内A】。次に［ツリー］ビューの［Hierarchy］の下部にある［分割］ボタンを押し、［分割］ダイアログを表示させます。数値を8に設定し、［入れ子］と［フィボナッチ］のチェックボックスが選択されていないことを確認してから［OK］ボタンを押し、ボーンを8等分します【上図内B】。一度目の分割を終えたら、先端のボーンを選択し、また［分割］ボタンを押してダイアログを表示させます。今度は数値を3に設定し、［フィボナッチ］のチェックボックスを選択してから［OK］ボタンを押します【上図内C】。


    するとさらにボーンが分割されますが、今度は同じ大きさではなく、下部にいくほど小さくなります【上図内A】。［フィボナッチ］のチェックボックスを選択すると、フィボナッチ数列を利用して少しずつ大きさが減衰していくように分割されます。なお、あまり大きな数字で分割すると、先端のボーンが小さくなりすぎてしまうので、3～5くらいの数値が望ましいです。揺れ物の動きは先端にいくほど細かくなるので、下部にいくほど小さくなるようにセットアップすると、とても綺麗に動くようになります。


    ボーンの分割を終えたら、パスを作成します。ポニーテールのボーンを選択し、［ツリー］ビューのオプションの［新規］ボタンから［パス］を選択します。パスの頂点（アンカーポイント）は増やしすぎないように注意してください【上図内A】。パスの作成を終えたら、前述のボーンを全て選択し【上図内B】、［ツリー］ビューのオプションの［新規］ボタンから［パス・コンストレイント］を選択します【上図内C】。今回は［ミックス］の［回転］オプションを［チェーンスケール］に設定します【上図内D】。［パス・コンストレイント］には複数のボーンを登録でき、［回転］オプションを変更すると挙動がかなり変化します。［チェーンスケール］と［チェーン］はパスの形に沿ってボーンが移動する点では似ていますが、［チェーンスケール］の場合は、パスがカーブしている部分でボーンが拡大・縮小します。


    ボーンがパスに沿って配置されたことを確認したら、ポニーテールのメッシュに［パス・コンストレイント］に登録した全てのボーンをバインドします【上図内A】。バインドした段階で、ある程度綺麗に動く［ウェイト］の値が設定されていると思いますが、［スムーズ］ボタンを一度押しておくと、より綺麗に動くようになります【上図内B】。［ウェイト］の［スムーズ］機能は、近隣の頂点同士の値を平均化し、全体の数値を滑らかにしてくれます。


    メッシュへの［ウェイト］付けが終わったら、ポニーテールの揺れを制御するためのコントローラ用のボーンを作成します。最終的にはこのボーンの［トランスレート］と［回転］だけで、揺れのアニメーションを付けられるようになります。


    まずはポニーテールのボーンを選択して、その先端にボーンを作成します。ボーンの名前に［_controller］を加えておくと判別しやすいです【上図内A】。ボーンの作成を終えたら、前述のパスを選択し、［head_hairTail（ポニーテールのボーン）］と［head_hairTail_controller（コントローラ用のボーン）］をバインドします【上図内B】。なお、バインドしてもパスには［ウェイト］の値が自動的に設定されないので、注意が必要です。


    パスへのボーンのバインドを終えたら、次は［アニメ化モード］に移り、パスの［ウェイト］を調整します。コントローラを左右に動かしたときにパスが左右に動くようにすると、［パス・コンストレイント］で登録されているボーンと、ポニーテールのメッシュも追従して揺れるようになります。


    まずは0フレーム目で前述のコントローラ用のボーンを左下に動かし【上図内A】、15フレーム目で右上に動かします【上図内B】。このようにコントローラを先に動かしておくと、［ウェイト］を調整しやすくなります。


    次に［ウェイト］ツールを使い、パスの［ウェイト］を調整します。根元から先端にいくほど、コントローラからの［ウェイト］値を大きくすることで、パスが滑らかにカーブしながらコントローラに追従するように調整します。パスの［ウェイト］調整が完了すると、【上図】のようにポニーテールがコントローラに追従して揺れるようになります。


    この時点でもかなり綺麗に動いているように見えますが、等速直線で揺れているため、まだ不自然と言えます。ここに［回転］の動きを追加すると、劇的に滑らかに動くようになります。


    まず、コントローラが0フレーム目にある（左下に位置している）ときは右回転【上図内A】、15フレーム目にある（右上に位置している）ときは左回転を加えます【上図内B】。


    0フレーム目のキーを30フレーム目にコピーしたら、［トランスレート］のキーを全選択し【上図内A】、［グラフ］ビューを開き【上図内B】、［ベジェカーブ］ボタン【上図内C】を押してグラフをカーブさせます。


    続いて［回転］のキーを全選択し【上図内A】、同様に［グラフ］ビュー【上図内B】の［ベジェカーブ］ボタン【上図内C】を押してグラフをカーブさせた後、アンカーを下に引っ張って［Ｕ］のような形にします。このようにグラフにカーブを付けると、キーを打たなくても動きに緩急を付けられます。今回は［回転］の開始を少し遅らせることで、動きのズレを表現しました。ポニーテールのボーン自体も回転させると、より自然な動きを実現できます。


    以上の設定をした上でコントローラを動かすと、ポニーテールが滑らかに揺れるようになります。


    ▲コントローラを使った、ポニーテールの揺れの制御のちがい。最初はコントローラを［トランスレート］させているだけ、2番目は［トランスレート］と［回転］の併用、3番目はポニーテールのボーン自体も回転させています


    次ページ：
    コンストレイント機能を組み合わせ、弓を引く動作を制御

    [[SplitPage]]

    コンストレイント機能を組み合わせ、弓を引く動作を制御

    戦闘に伴うアクションは、キャラクターアニメーションの代表例のひとつです。最初から武器を手に持っており、それを使って戦うのであれば難度は低いですが、収めていた武器を取り出したり、武器の持ち手を切り替えたりといったアクションが加わる場合は、単純なボーン構造だとやや難度が高くなります。こういうときは、［トランスフォーム・コンストレイント］を使い、追従するボーンを切り替えられるようにするといいでしょう。

    また、今回のSDキャラクターが持っているような弓は、変形しない剣とはちがい、一般的なしくみで動かすのは面倒くさそうです。少しでも制御する部分を減らすために、IKと［パス・コンストレイント］を使った簡略化も行いましょう。


    ▲矢の取り出しは［トランスフォーム・コンストレイント］、弦の揺れは［パス・コンストレイント］を使って制御することで、弓を引く動作を表現してみました


    今回の弓は上下対称のデザインなので、中央のグリップパーツと、上部パーツの画像データだけ用意して、下部パーツは複製します。このような同じデザインのアイテムは、ひとつだけ画像データを用意してSpine上で複製するとデータが軽くなります。まずは弓の形を完成させることから始めましょう。


    弓のグリップパーツの［スロット］を選択し、新規ボーンを作成します。今回は［weapon］という名前にしました【上図内A】。ボーンの作成を終えたら、そのボーンの中に、弓関係の全てのスロットを格納します【上図内B】。次に上部パーツをメッシュ化し【上図内C】、［複製］ボタンを押します【上図内D】。


    同じ位置に弓の上部パーツが複製されるので、Y座標の反転を適用し、下方に移動させます【上図内A】。これで弓の形は完成しました。


    次に［トランスフォーム・コンストレイント］を使って、弓の持ち手の切り替えができるように設定していきます。まずは両手のボーンの直下、手の中心あたりにボーンを作成します【上図内AB】。このとき名前に［_grip］を加えておくとわかりやすいです。これらのボーンだけでも持ち手の切り替えは可能ですが、コンストレイントを設定すると完全に手の動きと連動してしまうため、コンストレイント用のボーンとは別に、弓の制御用ボーンを用意します。先程つくった［armInner_grip］［armOuter_grip］ボーンの直下に、それぞれ［armInner_weapon］［armOuter_weapon］ボーンをつくり、同じ位置に移動させます【上図内CD】。今回は汎用性を優先し、手の位置に弓の制御用ボーンをつくりましたが、弓（武器）自体に制御用ボーンを付けても大丈夫です。


    弓のボーン［weapon］を選択し、［armInner_weapon］をターゲットに［トランスフォーム・コンストレイント］を作成すれば、［ミックス］の値を操作することで武器が手に引っ付くようになります【上図内A】。［armInner_weapon］のコンストレイントを作成し終えたら、［armOuter_weapon］にも同様の［トランスフォーム・コンストレイント］を作成しておきます【上図内B】。これら2つの［トランスフォーム・コンストレイント］の［ミックス］の値を0、あるいは100に切り替えることで、武器を持ったり、持たなかったり、持ち替えたりといった動きを制御できるようになります。なお、両方の値を0にすると、武器が両手から離れて最初の位置に戻ります。


    弓の持ち手を切り替えるしくみが完成したら、弓自体のしくみを作成します。弓の構造は単純ですが、その動きは複雑なので、少し応用が必要となります。


    まずは弓の形に沿ってボーンをひとつ作成し、次に弦の形に沿って、弦の半分の位置くらいまでボーンをつくります【上図内A】。これら2つのボーンを選択し、［IKコンストレイント］を作成します。このとき弦の真ん中あたりをクリックし、制御用ボーン［weapon_rope］を新規作成し、［IKコンストレイント］のコントローラとして使用します【上図内B】。逆側にも同様に2つのボーンを作成し、［IKコンストレイント］を作成しますが、今度は制御用ボーンを新規作成するのではなく、前述の制御用ボーン［weapon_rope］を共通で使用します【上図内C】。次に弓の上部パーツ、および下部パーツのそれぞれに、弓のボーン［weapon］と、弓の形に沿ってつくったボーン［weapon2］［weapon3］をバインドします【上図内D】。最後に［weapon2］［weapon3］の直下に、それぞれボーン［weapon_rope_sub］［weapon_rope_sub_lower］を新規作成します。【上図内EF】のように、それぞれ弓の両端に配置してください。


    弓の構造をつくり終えたので、今度は弦の構造をつくっていきます。弦は柔らかく弧を描くように変形してほしいので、［パス・コンストレイント］を使い、パスの形に沿って変形するしくみをつくります。つくり方は前のページのポニーテールと同じです。


    まずは弦のメッシュを割ります【上図内A】。今回は等間隔になるように頂点を配置したいのですが、目分量で配置するのは難しいと思います。こういった場合は［メッシュ編集］オプション内の［生成］機能が便利です。これは、現状の頂点を基準に、その頂点と頂点の中間点に新規の頂点を追加してくれる機能です。弦が柔らかく変形するであろう細かさになるまで［生成］ボタンを連打します【上図内B】。メッシュを割り終えたら、弓のボーン［weapon］の直下に弦の端から端までのボーンを1本つくり【上図内C】、［分割］機能で10分割します【上図内D】。次に、ボーン［weapon_rope_sub］の直下に弦の形に沿ったパスを作り【上図内E】、［weapon_rope_sub］【上図内F】、［weapon_rope_sub_lower］【上図内G】、［weapon_rope］【上図内H】の3つのボーンをパスにバインドします【上図内I】。


    パスとボーンの用意が終わったので、続いて［パス・コンストレイント］を作成します。


    まずは前述の10分割したボーンを全て選択して、［ツリー］ビューのオプションの［新規］ボタンから［パス・コンストレイント］を選択し、前述の弦の形に沿ったパスを指定して、［パス・コンストレイント］を作成します【上図内A】。このとき、［ミックス］の［回転］オプションは［チェーン］にしておきます【上図内B】。次に、弦のメッシュに対して、10分割したボーンを全てバインドします【上図内C】。


    最後に［アニメ化モード］に移り、パスにバインドした3つのボーン［weapon_rope_sub］、［weapon_rope_sub_lower］、［weapon_rope］の［ウェイト］を調整したら完了です。


    制御用ボーン［weapon_rope］を、弓を引くように右に移動させてから、パスが弧を描くように3つのボーンの［ウェイト］を調整します。一連の設定が完了すると、弓のしなりと弦の変形をひとつのボーンだけで制御できるようになります【上図】。


    最後に、矢の先端から末端までのボーンを作成し、前述の手の中心あたりにつくったコンストレイント用のボーン［armInner_grip］［armOuter_grip］に［トランスフォーム・コンストレイント］を設定しておきます【上図】。


    ▲ここまでの手順を踏むと、制御用ボーン［weapon_rope］を移動させるだけで、弓と弦を同時に制御できるようになります


    第4回と今回とで、少し複雑なリグ設定の実例をご紹介しました。Spineにはコンストレイント機能が3種類しか用意されていませんが、組み合わせ次第で、その可能性は無限に広がると思います。今後の連載でも、サンプルキャラクターのセットアップをしながら、実用性の高いリグの実例を紹介していきます。興味のある方は、引き続きご覧ください。



    第6回の公開は、2020年1月を予定しております。

    プロフィール

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

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