Spineバージョン: 3.7+
タグ:

Essential、Professional、メッシュ、ウェイト

Power-up(パワーアップ)

パワーアッププロジェクトはウェイト付けされたメッシュを使用することで、シンプルなアニメーションに見た目のインパクトを付け加えられることを説明しています。また、こちらのプロジェクトはSpine Essential(powerup-ess.spine)とSpine Professional(powerup-pro.spine)で別々のSpineプロジェクトが用意されています。Spine Essentialバージョンは回転シアーなど基本的なトランスフォームのみ使用しています。Spine Professionalバージョン(下記参照)は、よりドラマチックな効果を見せるためにウェイトが設定されたメッシュが使用されています。

セットアップ

それぞれの羽は3つのボーンから構成されています。左の羽のボーンで言うと、left-wingleft-wing2left-wing3と名付けられています。これらの3つのボーンがleft-wingスロットの下でwingメッシュアタッチメントを変形しています。

right-wingスロットの下のwingメッシュアタッチメントは、左の羽を複製してX軸のスケールを-1 にして反転させて作成しています。

左右どちらのメッシュも同じイメージを使用しているので、スケルトンのテクスチャアトラスをエクスポートする際のスペースを節約できます。

羽ボーンが回転する際、適切にメッシュを変形させるには、ボーンの方向に沿って頂点の密度が高くなっています。以下の図で示した青い矢印がボーンの方向、赤い線が頂点の流れです。

それぞれの羽の頂点は、まずウェイトビューでAuto(自動)機能を使用して、それぞれのボーンにウェイト付けしました。次にSmooth(スムーズ)を使用して羽の曲がり方を柔軟にし、最後にPrune(削減)機能を使用して5.5の値でウェイトを削減しました。「削減」は指定された値以下のウェイトを除去して、ウェイトを最適化します。

アニメーション

全ての頂点がボーンにウェイト付けされた後は、羽ボーンのキーを設定するだけで羽をアニメーションさせることができます。ウェイト付けされたメッシュがウェイトに従ってボーンに追従します。

トークン

セットアップ

羽の間のトークンは単一のメッシュアタッチメントです。

アニメーション

トークンのメッシュは、ウェイトを使用してボーンで頂点を動かすのではなく、個々の頂点座標を手動で変形してキーにしています。

比較

このGIFの左側はメッシュベースのパワーアップ(Spine Professionalを使用)を、右側はトランスフォームのみを使用してアニメーションされているパワーアップ(Spine Essentialを使用)を表示しています。なお、基本的なパワーアップのアニメーションはメッシュを使用した幾つかのシンプルなステップで調整されています。