メッシュバインディングチュートリアル
January 21st, 2020
Spineでたくさんのキャラクターをリギングしていると、アニメーション中に何かしらの追加パーツ画像が必要になることがあります。たとえば、奥行きを出したりエフェクトを追加したい時などです。そのような新しいパーツをメッシュ化する際、ボーンにバインドしたりウェイトを設定するには注意が必要になります。なぜなら追加パーツが必要なのはアニメーション中のポーズであって、セットアップのポーズでは無いからです。この投稿ではそれらをどうすれば正確に行えるのかをご紹介します!
アニメ化モードでバインドする
こちらの鳥の翼で考えてみましょう:

この鳥の見た目の変化を加えるために、上向きの翼と下向きの翼で分けたメッシュを用いて「羽ばたき」のアニメーションを作りたいと思います。ただそのためにボーンを追加すると、スケルトンが複雑になってしまいますし、2つのメッシュの挙動を同じ翼らしく揃えるのが難しくなってしまうので追加せずに作りたいと思います。代わりに、wing
ボーンで両方のメッシュをコントロールしましょう。
この鳥のセットアップポーズでは上の画像のように左側面が見えています。下向きの翼はbody
とwing
のボーンにバインドされています。wing
ボーンが上下に動くと、メッシュが変形して翼が羽ばたいているように見えます。
上向きの翼のメッシュは注意が必要です。下向きの翼のメッシュでやっているように、wing
ボーンで上向きの翼のメッシュの先端からコントロールしたいところですが、セットアップポーズではwing
ボーンは上向きの翼の先端の位置と合っていません。もしこのまま上向きの翼のメッシュとwing
ボーンをセットアップポーズにバインドすると、それはコントロールしづらいメッシュになってしまうことでしょう。
解決方法としては、これらのボーンをアニメ化モードでバインドすることです(Spine 3.8.77以降でないと出来ませんのでご注意ください)。ご自分で試してみたい場合は、こちらから鳥のプロジェクトをダウンロード してお試しいただけます。bird-before.spine
を開いてアニメ化モードにしてください。そして、タイムラインポジションをwing
ボーンが最も高い位置にある5フレーム目に移動させてください。次に、上向きの翼の画像をトランスレート
ツールでちょうど良い位置に配置してください:

自動キー
が有効になっていれば、上の画像のようにアニメ化モードでメッシュを動かした際に変形のキーが作成されます。これが出来ていれば、以下のステップはどちらでもうまくいくでしょう。
次に、ウェイト
ビューのバインド
をクリックしてbody
とwing
ボーンを選択してください。ウェイト
ツールを使用して上の2つの頂点をwing
に100%、そして下の2つの頂点をbody
に100%にしてください:

ここまで出来たら、両方の翼のメッシュがwing
ボーンでコントロールされ、それらを切り替えるときにとても簡単にコントロールできるようになっているかと思います。

ここで上向きの翼を設定モードで表示してみると、それが変な状態になっていることに気がつくかと思います:

これはアニメーションの中でwing
ボーンが上に移動された時に上向きの翼をバインドしましたが、セットアップポーズではwing
ボーンが下に移動していることにより引き起こされています。そのメッシュをセットアップポーズではなく、アニメーション中のポーズに合わせて使用することを意図している場合は、設定モードでこのように変な見た目になってしまうのは正常な状態です。
バインディングをアップデート
重要なのは、ボーンがメッシュにバインドされる時に正しい位置にあることです。これを「バインドポーズ」と呼びます。ボーンがバインドポーズの位置から移動すると、メッシュはそのメッシュ頂点のウェイトに従って変形されます。ボーンがバインドポーズから外れた位置にある時にバインドされると何が起こるか、そしてそれをどうすれば直せるかを見てみましょう。
bird-before.spine
プロジェクトをやり直してみましょう、ただし今回は設定モードで上向きの翼を表示してトランスレート
ツールで移動させてください。そしてbody
とwing
ボーンにバインドしたら、下向きの翼を表示します。
次にアニメ化モードに切り替えて、タイムラインポジションを5フレーム目に移動させてください。wing
ボーンにはまだウェイトを設定していないので、上向きの翼はbody
ボーンと一緒にただ移動するだけになっています。しかし、もしそれを行う前にウェイトを設定してしまうと、このように望ましくない結果になってしまいます。

ウェイトを調整している間に頂点が移動してしまう場合は常に、ボーンがメッシュにバインドされた時から動いてしまっていることを意味します。この場合、 wing
ボーンがバインドされた場所から上に移動しているため、wing
ボーンにウェイト付けされたときに頂点が上に移動してしまっているのです。
ウェイト
ビューにあるバインディングをアップデート
ボタンはこのような場合に役立ちます!クリックされると、現在のボーンの位置とメッシュ頂点の位置を利用して、ボーンのバインドポーズをリセットしてくれます。その後、ウェイトが変更されても頂点は移動しません。
Spineに戻って、アニメ化モードで5フレーム目でバインディングをアップデート
をクリックして、ウェイトをwing
ボーンに設定してください。すると頂点が移動せず、最終結果はこの位置でボーンをバインドした場合と同じになります。
ミスの修正についてのTips
時に、メッシュに影響を与えずに、メッシュにバインドされたボーンのポーズを調整したい場合があるかと思います。これを行うには、Compensationのイメージ を有効にして、ボーンを調整します。
また、メッシュのすべてのウェイトをやり直したい場合は、ツリーの下部にあるメッシュのプロパティでリセット
をクリックします。するとすべてのウェイトが削除されてメッシュがリセットされて変形していない状態に戻ります。もし現在の頂点の位置だけは保持したい場合は、リセット
を使用する代わりにウェイト
ビューでボーンを削除することが出来ます。
メッシュにバインドされたボーンのバインドポーズのキーを記録したアニメーションを作っておくと便利です。これにより、新しいボーンを追加したり、メッシュのウェイト設定をやり直したりするために、バインドポーズに戻すことができます。こちらの鳥のプロジェクトでも5フレーム目でこれを行うことができますが、ここにあるのは覚えづらいですし、そして5フレーム目にあるボーンが後で移動されている可能性もあります。
結論
ボーンのバインドとウェイト設定は少しややこしくはありますが、大変便利な機能です。違うメッシュをアニメーションの中間で表示することはとても一般的であり、上記のワークフローにより非常に簡単になります。
あなたにこの記事を興味深く思っていただけることを祈っています。ぜひ続きはSpineフォーラムで話し合いましょう。