Spine技術ブログ

Spineの使い方チュートリアル – 2

こんにちは!

この記事では、Spine公式チュートリアルに沿ってSpineの操作方法について覚書をおこなって行こうかと思います。

この記事では、公式のTutorial VideoとUser Guideを自分なりに噛み砕いて再度記事にしたものになります。

また、今回の記事はMac環境で制作を行っています。

公式User Guidはこちら

公式Tutorial Videoshはこちら

Spine User Guide – KeyFrames 1/2

KeyFrames

この項からKey Frameを使ったアニメーション作成についての解説を行っていきます。

アニメーションは、シーン左上にある、SETUPとANIMATEのボタン押下で表示切り替え可能です。

 ⇄

また、現在選択中のアニメーションはTreeビューのAnimationsの箇所で選択されているかどうか確認可能です。

Timeline

ドゥープシートの上の部分がTimeLineを表す部分になっています。

右上のViewsからTimeline押下でもう一つTimeLineがドゥープシートの上に表示されます。

この表示は、デュアルディスプレイで作業するときなどに、ドゥープシートとTimelineを分けて表示して作業したい時などに便利です。

また、1秒はTimeLine上では、30フレームで表されます。

 

SettingKeys

ここでは、Timeline上でのキーの設定の方法について解説しています。

アニメモードで、Boneを動かしても、自動保存されません。

タイムラインの位置が変更されると変更が失われます。

変更を保存するには、キーボタンを押下して変更を保存します。

キーフレームが設定されていない時のTransformのプロパティのキーマークは緑色になります。

この場合はキーを3で設定したときの場合になります。

ここで、例えば回転の値を変更した場合はキーマークがオレンジ色になります。

TreeViewのBoneの横にもオレンジのキーマークが表示されます。

この状態では、まだ保存はされていない為、タイムラインの位置が変更されると変更が失われます。

キーマークを押下すると表示が赤くなり、Timelineに値が保存されているのがわかります。

Transforms

前項目の復習と、KeyフレームのトランスレーションとスケールはX,Y別々には作成できない等の注意がされています。

Rotation

回転のアニメーションを作成する時の注意点などについて解説が行われています。

ここでは、回転を行う際は、常に最短パスで回転のアニメーションが行われる等の注意がされています。

例えば、

1フレームで0度,10フレーム目で90度付近に設定した場合は半時計周りにボーンは回転します。

1フレームで0度,10フレーム目で240度付近に設定した場合は時計周りにボーンは回転します。(最短パスで移動する為)

注意まとめ

  • 180度以上に回転させる場合は、1つ以上のキーが必要です。
  • ボーンを360度回転させる場合は3つ以上のキーが必要です。
  • 最初のキーを0に設定
  • 次のキーで120に設定
  • 次で240に設定
  • 最後に360に設定します。 これにより半時計周りの回転アニメーションが作成可能です。

Attachments

この項では、Attachmentのキー設定について解説しています。

SlotのAttachされたImageを切り替えた場合にキーマークがオレンジになるので

オレンジになったキーマークをクリックで変更が保存されキーマークが赤くなります。

SlotColor

この項ではSlotのカラー変更について解説が行われています。

今回は、SlotのColorの値を変更するのでViewsからSlotColorを選択します。

カラーピッカーが表示されるのでカラーや透明度を変更します。

変更すると、Colorの横のキーマークがオレンジになります。

キーマークを押下して赤い表示にすれば保存完了です。

DrawOrder

この項では、Slotの表示順のキー登録について解説をおこなっています。

TreeのDrowOrderでSlotの並び順を変えるとDrowOrder横のキーマークがオレンジ色になるので

キーをクリックして赤い表示に変えます。

Spine User Guide – KeyFrames 2/2

この項では、引き続きKeyFrameの設定方法について解説が行われています。

Event

SpineではEventと呼ばれるものがあり、アニメ中にトリガーとして使われます。

(例えば、足音Eventを設定した時に、その足音イベントをトリガーとして効果音を鳴らしたい時などに使える)

このようにアニメ再生時にEventのキー名が表示されます。

Eventのキー作成には、TreeビューのEventsから追加作成できます。

また、Eventを選択時に下部のEventの設定画面で値を変更できます。

値変更時にキーがオレンジになるので、

キーマークをクリックして赤い表示に変えます。(保存完了)

Meshes

SpineではMeshの頂点にもアニメーションを設定することができます。

メッシュアニメを設定するには、ツリー内のMeshの横でキーを設定します。

torso(胴体)を選択します。

Tree上ではtorsoのMeshが選択されていることが確認できます。

Meshの頂点を選択して変形させることが可能です。

Meshのキーマークがオレンジになるのでクリックして保存します。

設定するとMeshの頂点アニメが保存されているのが確認できます。

IK

IKのConstraints(制約)はTreeビューの配下にあります。

例として、任意のikのConstraintを選択します。

下部の箇所で曲げ方向をPositiveか否か選択することができます。

もしくは、値をMixすることができます。

キーマークがオレンジに変わるのでクリックして保存します。

Flip

ここでは、BoneのFlipについて解説が行われています。

ボーンを選択し、右下のViewを見るとチュートリアルでは、Flipの項目があるのですが、

Spine最新版を確認したところ、項目が見当たらなかったので廃止されたのではないかと推察されました。

 

Shortcuts

ショートカットについて

キーボードの「Kキー」につきまして、既定で未設定のキーを保存する機能が割り当てられています。

例えば、

Boneの角度を変更します。

Kキー押下で変更が保存されました。

RuntimeDiff

ランタイム差分

Spineでのアニメ実行とランタイムで実行する際には差分があります!

値にキーが全く作成されない場合、アニメーションは値を変更しません。Spineではアニメーションが適用される前に、スケルトンは常に設定ポーズにリセットされます。このためキーが作成されない場合、スケルトンは設定ポーズの値を有します。

ランタイムでは、アニメ―ションに適用される前にプログラマーがスケルトンを設定ポーズにリセットするかどうか決定します。決定されない場合、キーが作成されないため、スケルトンは最後に設定された値を維持します。

これが便利であることを示す例として「剣」アタッチメントを「武器」スロットに表示するアニメーションがあるとします。「剣」アタッチメントは次のアニメーションが再生される時も表示されたままになります。

これが望ましくない場合もあります。例えば、ルートボーンが回転し、45度で維持されるアニメーションがあるとします。ルートボーンにキーが作成されていない次のアニメーションが再生される時、ルートボーンはいまだに45度の回転位置にあります。ところが最初のアニメーションでルートボーンの回転がゼロで終了する場合、他のアニメーションが再生され最初のアニメーションが早めに終了するために、同じ状況が起こる可能性があります。

この問題の解決方法として「全て」のアニメーション用に「全て」の値をフレーム0でキー作成する方法がありますが、これはアニメーターにとって非常に面倒な作業です。またアニメーションが適用される時、全ての値が毎回(通常、1秒当たり60回)設定されるために、ランタイムにも非効率的です。全ての値にキーが作成されるとコストが高くなり、画面上で1度に多くのスケルトンがアニメ化されるため、問題が生じることもあります。

最も効率的な方法はアニメーションを適用する前に、プログラマーがスケルトンのボーンを設定ポーズにリセットすることです。プログラマーはアニメーションが変更する時、アタッチメントのためにスロットの一部または全部を設定ポーズにリセットします。

公式ガイドより抜粋

Spine User Guide – Animating

1.Animating

ここでは、アニメ化に関する様々なワークフローについて解説が行われています。

2.Workflow

Spineには、いくつかのアニメーション作成のWorkFlowがあります。

今回のこの項の解説前に準備として

Viewsの

Ghostingを選択します。

FramesのBeforeとAfterにチェックを入れます。

また、BeforeFramesとAfterFramesが前回とこの後の表示先のFrame数になります。

このような形でBeforeとAfterのGhostが表示されます。

3.StraightAhead

StraightAheadは、各ポーズを順番に決めて打ち込んでいく方法です。

このように順番にポーズを決めて作っていきます。

この方法は、初心者の方や最初に全てを計画できない時などに便利な方法らしいです。

欠点は、アニメが長くなりすぎたり間違ったポーズになりやすいこと、また工数が多くかかってしまうことなどです。

4PoseToPose

このWorkFlowは、最初に重要なポーズを洗い出して作成し、

後からPose間を補うような形でアニメーションを作成する方法になります。

これらは、少ない作業で動きの範囲を見渡せます。

最初にアニメーションの動きを把握できるので変更が容易です。

このように作り込んで行きます。

主なポーズができたら、あとは自然な動きになるように間に調整用の動きを入れて行きます。

後で調整する時間を省略できるので工数を低く抑えられます。

5.Layered Combined

他のレイヤーのアニメーション(この例では恐竜と少年)と組み合わせる時のWorkFlowについて

まずは、恐竜のみのアニメーションを作成します。

次に作成した恐竜の動きに合わせるように少年にアニメーションをつけて行きます。

6.SecondaryMotion

ここでは、2次的な動きについて解説が行われています。

二次的な動きとは、最初の動きに付随する動きの追加になります。

こういった、二次的な動きを追加していくことでアニメーションが自然な仕上がりになります。

ここでは、ジャンプ後に髪の毛を揺らすなどの動きを与えて自然な仕上がりにしています。

二次的な動きは一次的な動きに遅れて発生すると自然に見えるようです。

7.Curves

Curvesはアニメ間の速度調整に使われます。(アニメーションカーブを適用できます!)

右上のViewsを選択します。

Graphを選択

AnimationのCurveを設定可能なwindowが表示されます。

Graphをいじることで各種Curveを変更できます。

Spine User Guide – Animating PoseToPose

この項では、前回のAnimatingで解説されていたPoseToPoseに対して詳しく作業の流れを見ることができます。

一旦締めます

一旦、区切りが良いのでSpineの使い方チュートリアル – 2 はこのあたりで区切ることにします。

次回、その3に続きます。