>   >  Spineではじめる、動くイラスト制作:第2回:メッシュ機能と、3種類のコンストレイント機能(前編)
第2回:メッシュ機能と、3種類のコンストレイント機能(前編)

第2回:メッシュ機能と、3種類のコンストレイント機能(前編)

こんにちは。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コンストレイント]

その他の連載