Spineで画像をMesh化し、FFD(Free Form Deform)を実現する流れ

本章では、Spineで画像を伸び縮みさせ、滑らかに動くキャラクタを制作する方法について共有します。

FFDとは

deformの定義

deformには、以下の意味があります。

• ゆがめる
• 変形する

つまり、FFDを直訳すると「自由に形を変形する」という意味となります。

SpineでのFFD

SpineにおけるFFDの実現方法は、画像を多角形で分割し、頂点を移動させることで画像を変形させます。頂点の数が少ない場合では画像を大きく変更させることができ、頂点の数が多い場合には細かく画像を変形させることができます。画像を綺麗に変形させるためには、「頂点」の数だけでなく「辺」の作り方にも注意を払う必要があります。伸びる・回転する方向に「辺」を引く意識を持つと、綺麗に表現できます。上手く調整すると、以下図のように、あたもかも3Dモデルをアニメーションさせているかのように表現できます。

それではFFDの作り方について確認します。

FFDの作り方

メッシュの追加

まず、1枚のパーツ絵をメッシュに切り替えます。

1枚絵を選択

1. 対象の画像を選択
2. 「Options」で「Mesh」を選択
3. Editor上の対象のパーツ絵がメッシュに切り替わる

伸び縮みさせる箇所を囲む

1. 「Edit」を選択
2. 「New」を選択
3. Photoshopのペンツールと同様に、加工させたい箇所を囲む

※なお、上記ではサンプルとして分かりやすいよう、全体を囲んでいます。

コツとして、衣服やゴムのように伸び縮みする特性の箇所をメッシュ化させると、綺麗に表現できます。

細かい調整

1. 編集ツール「Modify」「Create」「Delete」を選択
2. パスの中で、過不足あるアンカーポイントを調整

重みの追加

伸び縮みの特性は、ボーンの相互の力の関係で変わってきます。そのためメッシュに対して、重みの調整を予め設定する必要があります。

メッシュの選択

1. 重みを追加するメッシュを選択
2. 「Views」から、「Weights」ツールを選択
3. Weightsツールの「Bind」を選択

ボーンの選択

1. メッシュに影響を与えるボーンを複数選択
2. 選択されたボーンがWeightsツールの一覧に表示される
3. 「Bind」を選択
4. ToolsのWeightsを選択すると、重みの一覧がEditor上に表示される

重みの微調整

Spine側で自動で追加された重みに問題がある場合、問題の箇所を修正します。

1. アンカーポイントを選択
2. 重みを加減させるボーンを選択
3. 重みの値を調整

総括

Spineでは、画像を伸び縮みさせることで、キャラクタを滑らかにアニメーションさせることができます。

参考までに公式でDeformさせた記事を紹介します。

是非、Deform機能を有効活用して下さい。