記事の目次

    こんにちは。HERMIT WORKSの柴田章成です。今回と次回は、Spineのメッシュ機能と、3種類のコンストレイント機能の詳細を前後編に分けて解説します。これらの機能を理解すれば、より汎用性の高いリグを構築できるようになるので、ぜひマスターしてください。さて、本連載の第1回公開後、Spineのメジャーアップデートがあり、Spine 3.8がリリースされました。様々な便利な機能が追加されましたが、基本的な操作は変わりません。今回からは、Spine 3.8をベースに解説していきます。

    TEXT＿柴田章成 / Akinari Shibata（HERMIT WORKS / Twitter：＠AkinariShibata）
    ILLUSTRATION＿平野悟史 / Satoshi Hirano（HERMIT WORKS）
    EDIT＿尾形美幸 / Miyuki Ogata（CGWORLD）

    メッシュ機能を活用し、奥行きを表現。さらにデータ容量も削減

    イラストを複数のパーツに分けて動かす場合、移動や回転だけでは表現の幅に限界があります。特に奥行きを感じさせる表現をしたいときは、分割するパーツの数をかなり増やさなければならず、手間がかかり、データ容量も圧迫しがちです。しかしメッシュ機能を使えば、本来であれば分割する必要がある部分も、結合された1個のパーツで済ませることができるため、分割の手間も、最終的なデータ量も削減できます。

    ▲以降で紹介する機能を応用すると、こんな感じの奥行き表現ができます。本記事では、この魚人型モンスターを使い、メッシュ機能の使い方と、［IKコンストレイント］機能について解説します


    それでは、メッシュの切り方から解説します。まずは前回紹介した方法で、キャラクターデータをSpineにインポートし、ボーンを設定します。なお、前回の女の子のキャラクターとはちがい、今回の魚人型モンスターはメッシュを使って肘や膝の関節を動かす前提なので、前腕や下腿はパーツに分割していません。続いて［Hierarchy］からメッシュ化したい［アタッチメント］を選択し【上図内A】、オプションの［メッシュ］のチェックボックスを選択すると、メッシュ化された［アタッチメント］が水色の四角形で囲まれます【上図内B】。このままでも、四角形の頂点を操作すればメッシュを動かすことができますが、より複雑な操作をしたいので、メッシュを編集していきます。［メッシュ編集］ボタンを押すと【上図内C】、メッシュ編集画面となり、［メッシュ編集］ダイアログが新しく表示されます【上図内D】。Spine 3.7までは、この後で手動による頂点の追加が必要でしたが、Spine 3.8からは待望の自動メッシュ生成機能が追加されました。［トレース］ボタンを押すと【上図内E】自動メッシュ生成の画面に切り替わります。


    【上図】は、自動メッシュ生成の画面です。メッシュのシルエットに沿って自動的に頂点を追加してくれるだけの機能ですが、作業効率がグーンと上がりました。この後の作業でシルエットに沿って頂点を整えるので、ここではラフな状態に留めることにします。［メッシュ編集：トレース］ダイアログの［詳細］では、使用する頂点の数を設定できます。［凹面］では、シルエットが凹んでいる部分の優先度を設定できます。［改良］では、どれだけ精密に演算するかを設定できます。100にするとかなり時間がかかるので、50くらいが丁度いいでしょう。［アルファ閾値］では、透明度を設定してある部分をどれだけ切り抜くかを設定できます。［パディング］に0以外の数値を入れると、その数値の分だけシルエットから離れた位置に頂点が形成されます。


    ［メッシュ編集］ダイアログを操作し、メッシュのシルエットに沿って頂点を綺麗に整えます。［変更］ツールを使うと、選択している頂点を移動できます。まずは、間隔が狭すぎたり広すぎたりする部分を調整していきます。頂点を移動させるときに［変形済み］のチェックボックスを選択しておかないと【上図内A】、メッシュ自体が歪んでしまうので注意してください。［分離］のチェックボックスを選択すると、編集しているパーツのみが表示されるので、作業がやりやすくなります。


    ［作成］ツールを使い、【上図】のようにメッシュの内側の頂点を追加していきます。クリックすると頂点が追加され、ドラッグするとアニメーションを付けることのできるオレンジ色のラインが追加されます。慣れてくると少ない頂点数で形をとることができますが、最初は頂点数が増えるのを気にせず、画像に沿うように頂点を配置していくといいでしょう。 同じ手順で、メッシュ化したい全てのパーツに頂点を追加していきます。なお、今回はほぼ全てのパーツをメッシュ化しています。


    メッシュ化したパーツは、個々の頂点を直接動かしてアニメーションさせることもできますが、ボーンの動きとメッシュの頂点を連動させることで、ボーンを使ってメッシュの動きを制御することもできます。どの頂点が、どのボーンに、どのくらい連動するのかを設定する値を［ウェイト］と言います。各パーツに［ウェイト］を設定することで、ボーンを操作すれば、ある程度自動的にメッシュが動くようにしていきます。まずは［ウェイト］ツールを選択し【上図内A】、［ウェイト］ビューを表示します【上図内B】。［ウェイト］付けしたいパーツを選択したら、［バインド］ボタンを押します【上図内C】。続いて、連動させたいボーンを選択し、もう一度［バインド］ボタンを押したら、ある程度自動的に［ウェイト］の値が登録されます。【上図】では、個々の頂点が、個々のボーンに、どのくらい連動するのかが色分けによって示されています。この後は［ウェイト］ビュー内の［ダイレクト］［追加］［取り除く］［置換］モードを使い、細かく調整していきます【上図内D】。


    ［ウェイト］ビューは［アニメ化モード］でも使えるので、［ウェイト］の細かい調整は［アニメ化モード］で行うと便利です。「このボーンは、大体このくらい動く」といった具合のアニメーションを先に付けておくと、動きを見ながら［ウェイト］を調整できます。Spineを［アニメ化モード］に変更したら、調整したいボーンと頂点を選択し、値を設定していきます。前述した4つのモードのうち、ブラシで塗るように値を増減できる［追加］と、［取り除く］をメインで使っていきます。［強度］では、1～100％までの値で、選択したボーンが頂点にどのくらい影響するかを設定できます。［サイズ］では、どのくらいの範囲の頂点に指定した値を影響させるかを設定できます。［フェザー］では、指定した範囲の中心から端までで、影響をどのくらい減少させるかを設定できます【上図内A】。これらの機能を使い、自分好みの動きになるまで、少しずつ調整していきます。 　


    次ページ：
    歩きや走りのアニメーションに必須の
    ［IKコンストレイント］

    [[SplitPage]]

    歩きや走りのアニメーションに必須の［IKコンストレイント］

    Spineには3つのコンストレイント機能があります。その中でも［IKコンストレイント］は、ほとんどのSpineユーザーが使う機能と言っていいでしょう。今回は［IKコンストレイント］の代表的な使用例である、モンスターの脚部への組み込みを通して、基本的な使い方と機能を説明します。


    まずは大腿と下腿のボーンを選択し【上図内A】、［Hierarchy］の下部にある新規ボタンから［IKコンストレイント］を選択します【上図内B】。


    ターゲットを選択するモードになったら、下腿のボーンの先端あたりをクリックし、［IKコンストレイント］のターゲット用のボーンを作成する位置を指定します【上図内A】。表示されたダイアログに、新規に作成するコンストレイントの名前を入力すると【上図内B】、［Hierarchy］の［コンストレイント］グループ内に、入力した名前の［IKコンストレイント］が作成されていることが確認できます。ここでは［IK_legOuter］という名前を入力しました。


    次に、足にも［IKコンストレイント］を設定します【上図内A】。先程は2本のボーンを選択しましたが、今回は足のボーン1本だけを選択し、同じ手順で足のボーンの先端あたりをクリックし、［IKコンストレイント］を作成します。ここでは［IK_footOuter］という名前を入力しました。 ここまでで、2つの［IKコンストレイント］の設定が完了しました。［Hierarchy］を見ると、作成した［IKコンストレイント］と同じ名前のボーンが2つ、［root］ボーンの直下に自動生成されているのが確認できます。これは先程クリックしたボーンの先端に作成された、［IKコンストレイント］のターゲット用のボーンです。［IKコンストレイント］を設定したボーンの先端は、必ずこのターゲット用のボーンの方向を向くようになります【上図内B】。ここで大腿と下腿の［IKコンストレイント］のボーン［IK_legOuter］を、足の［IKコンストレイント］のボーン［IK_footOuter］の直下に移動させます【上図内C】。


    反対側の脚（大腿・下腿・足）にも同じように［IKコンストレイント］を設定したら、腰のボーンを選択して、［トランスレート］ツールで上下に動かしてみましょう。先程自動生成された2つのボーンに下腿のボーンが接触した瞬間、【右図】のように自動的に膝が曲がることが確認できます。逆に足の［IKコンストレイント］のボーンを動かしても膝が曲がるようになっているので、このしくみを利用すると、歩きや走りのアニメーションを付けやすくなります。


    ［IKコンストレイント］は、いくつかの設定項目により挙動を変更できます。大腿と下腿のような2本のボーンの場合と【上図】、足のような1本のボーンの場合とでは【下図】、設定できる項目がちがいます。 ［親］［子］［ターゲット］に表示されているボーンの名前をクリックすると、それぞれのボーンを選択できます。【上図】の2本のボーンの場合にのみ設定できる［正］では、2本のボーンが自動的に曲がる方向を変更できます。［ソフトネス］はSpine 3.8で追加された機能で、登録したボーンがターゲット用のボーンに接触する際のやわらかさを制御できます。【下図】の1本のボーンの場合にのみ設定できる［圧縮］は、後述する［ストレッチ］の挙動とは逆に、ボーンが縮小するようになります。［統一］では、通常はY軸（縦）方向にしか自動伸縮しないボーンが、X軸（横）方向にも連動して伸縮するようになります。


    共通項目である［ストレッチ］のチェックボックスを選択すると、ターゲット用のボーンから対象のボーンが離れた場合に、その分だけボーンとパーツが伸びるようになります【下図】。前述したように、2本のボーンを用いている場合は、ボーンの縮小ができないので注意が必要です。同じく共通項目である［ミックス］では、［IKコンストレイント］で自動的に制御されるボーンの動きを、どれだけ正確にトレースさせるかを0～100までの値で指定できます。各設定項目は、アニメーション中にいつでも変更可能なので、様々な動きを実現できます。


    今回はメッシュ機能と、［IKコンストレイント］の基本的な使い方を説明しました。この2つの機能を使うだけでも、格段に表現の幅を広げることができるので、ぜひ活用してください。次回は3つのコンストレイント機能のうちの、残る2つの機能、［パス・コンストレイント］と［トランスフォーム・コンストレイント］について、作例を使って説明していきます。



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

    プロフィール

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

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