Spineではじめる、動くイラスト制作:第1回：Spineを使うと、何ができるのか？ | 連載

SpineのANIMATEモードの代表的な機能

アニメーション制作は、［ANIMATEモード］で行います。画面左上の［SETUP］ボタンを押すと、［ANIMATEモード］に切り替わります。このモードでキーフレームを打つことで、アニメーションを制作できます。前述の［SETUPモード］でパーツを動かすと、その変更が全てのアニメーションデータに反映されてしまうので注意してください。デフォルト状態では様々なウインドウが非表示になっているので、画面右上にある［ビュー］ボタンを押してウインドウの一覧を表示し、各ウインドウの表示・非表示を切り替えて作業を進めます。

以降では、上で示した【A】〜【F】のウインドウの役割を解説します。

［ツリー］ウインドウは、ボーンやパーツをはじめ、様々なデータを管理する際に使います。同じ階層にあるアイテムは名前順に自動的にソートされ、入れ替えができません。適切な順番でソートされるよう、パーツなどの命名規則に留意しましょう。

［ゴースト化］ウインドウは、後述する［ドープシート］ウインドウ上のアニメーションのながれを可視化する際に使います。XY方向にずらして表示することも可能なので、前後の動きを確認したり、大きく移動するアニメーションを制作したりするときに重宝します。

［ウェイト］ウインドウは、メッシュ割りをしたパーツに対するボーンからの影響値を調整する際に使います。メッシュの各頂点が、バインドされたボーンの動きにどの程度追従するのかを、0〜100％の値で指定します。

［グラフ］ウインドウは、キーフレーム間の再生速度をアニメーションカーブによって制御する際に使います。キーフレーム間の補間方法は、等速直線で補間する［リニア］、曲線で補間する［ベジェカーブ］、途中補間をなくす［ステップ］の3種類があります。

［アニメーション］ウインドウは、制作したアニメーションの選択と管理をする際に使います。ここで選択したアニメーションのキーフレームが［ドープシート］ウインドウに表示されます。右上のボタンを押すと、新規アニメーションを制作できます。

［ドープシート］ウインドウは、各ボーンにキーフレームを打つ際に使います。基本的には、［自動キー］を有効にして、ボーンを動かしたら自動的にキーが打たれる状態にして作業します。［シフト］を有効にした状態でキーを移動させると、それ以降のキーも全て移動します。［オフセット］を有効にした状態で、最初と最後に同じ値のキーが打たれたループアニメーションの全てのキーを同時に移動させると、アニメーションの見た目を維持したまま、タイミングをずらすことができます。［調整］を有効にした状態で複数のキーを選択し、関連するボーンなどを移動させると、選択した全てのキーに変更結果が適用されます。

Spineでの走りのループアニメーションの制作

0フレーム目。左脚を前に出し、体が宙に浮いている状態。腰のパーツを少し上げ、さらに少し左回転させて前傾姿勢にしています。左脚は大腿のパーツから少し前に移動させ、さらに右回転させて足を前に出します。右脚は大腿のパーツから少し後に移動させ、さらに左回転させ、膝関節を曲げます。右腕は各関節を曲げることで前に振り上げ、左腕も各関節を曲げることで後に下げます。

5フレーム目。腰が下がりきり、左脚に全体重が乗っている状態。腰のパーツを下げ、左脚の大腿はやや回転した状態で少し上げ、膝関節を曲げて足が地面を踏んでいる姿勢にします。右脚は0フレーム目より膝を前に移動させます。左腕は前に振り上げる途中の状態で、肘はまだ体の後にあります。右腕は後に下げる途中の状態なので、肘は体の少し前か、真横くらいにあります。

10フレーム目。右脚を前に出し、体が宙に浮いている状態。基本的には0フレーム目の真逆のポーズなので、0フレーム目からキーフレームをコピーして流用します。腰のパーツの高さや回転の角度はそのままで、脚と肩の左右の各関節を逆方向に回転させ、0フレーム目とは逆の位置になるように調整します。

15フレーム目。腰が下がりきり、右脚に全体重が乗っている状態。5フレーム目の真逆のポーズなので、5フレーム目からキーフレームをコピーして流用します。重心は右脚にかかっているため、腰のパーツの高さはそのままで、右脚の大腿をやや回転した状態で少し上げます。アニメーションをループさせるため、最後に0フレーム目のキーフレームを20フレーム目にコピーしたら完成です。

▲走りのループアニメーションの完成映像

次回予告

駆け足でしたが、キャラクターデータのセットアップから走りアニメーション制作までのながれをお伝えしました。Spineを使うと、何ができるのか、大枠だけでも伝わっていれば幸いです。次回からは、3種類のコンストレイント機能の詳細と、その組み合わせ方をお伝えします。Spineのコンストレイント機能を理解すれば、より汎用性の高いリグを構築できるようになります。

第2回の公開は、2019年9月を予定しております。

プロフィール

柴田章成

HERMIT WORKS所属のデザイナー・アニメーター・テクニカルディレクター。3度の飯よりリグが好き。
Twitter：＠AkinariShibata

HERMIT WORKS

主にアートディレクターで構成されたデザイナー集団。ハイクオリティなデータ制作でゲーム開発をサポートしています。本記事やSpine、そのほかのツールに関するお問い合わせは、下記メールアドレスまでお送りください。
shibata.hermitworks@gmail.com
hermitworks.jp