>   >  Spine開発元スタッフも登場! Spineアニメーター向けイベント「Spiners MeetUp vol.2」レポート
Spine開発元スタッフも登場! Spineアニメーター向けイベント「Spiners MeetUp vol.2」レポート

Spine開発元スタッフも登場! Spineアニメーター向けイベント「Spiners MeetUp vol.2」レポート

2020年9月29日(火)、Spineアニメーター向けイベント「Spiners MeetUp vol.2」がYouTubeにてライブ配信された。本イベントは昨年5月にG2 StudiosArtnerの共催でvol.1を実施したが、セミナー形式だった前回とは異なり、今回はG2 Studios主催のハンズオン形式で行われた。また、特別ゲストとしてSpineの開発会社であるEsoteric Softwareのエリカ・インズィタリ氏も登場し、アニメーションを制作する様子をライブで公開。参加者からは「とても参考になった」、「無料イベントとは思えない内容だった」という声も上がるなど、大好評に終わった。

TEXT&PHOTO_エマール美咲(G2 Studios)
EDIT_小村仁美 / Hitomi Komura(CGWORLD)、山田桃子 / Momoko Yamada

"ひねり"を加えたアニメーションをつくる

vol.2は「"ひねり"を加えたアニメーションを作る」というテーマのもと、アニメーション途中でキャラクターが向いている方向を切り替えながら、滑らかなアニメーションをつくるための方法が紹介された。

▲完成イメージ動画

解説を行なったのはvol.1でも登場したG2 Studiosのエマール美咲氏だ。

はじめに、本イベントで使用するSpineプロジェクトの構成が解説された。今回、このイベントのためにオリジナルのキャラクターが用意されており、イベントが終了した現在もGitHub上で無料配布されている。中には完成イメージのスケルトンと、解説の各STEPに合わせた3つのスケルトン、合わせて4つのスケルトンが入っている。スケルトンとは、Spine用語のひとつで、Spineではボーンや画像などにより構成されたキャラクターやオブジェクトなどがこの「スケルトン」という単位で管理される。

本イベントでは、差分パーツのセットアップ法からアニメーションのつくり方までが解説された。

STEP 1:差分パーツのセットアップ

Spineにおいて、画像をボーンで動かすには、各関節に合わせてボーンを作成し「親子付け」を行うのが一般的で、多くの初心者向けの解説記事などで説明されているのもこの方法だ。ただし、特定のタイミングのポーズ、例えば横向きにポーズを切り替えたとき専用のパーツをセットアップする場合などは少々ややこしくなってくる。そこで本イベントではアニメ化モードでセットアップを行う方法が紹介された。イベント中で紹介されたながれは以下の通りだ。

1.設定モードで横向き用の腕差分パーツを配置し、全てメッシュ化する
2.アニメ化モードに切り替え、腕差分パーツに合わせて腕ボーンを動かす
3.位置合わせができたら、腕ボーンに対して腕差分パーツを[ウェイトビュー→バインド]でバインドする

この方法により、「ボーンがこの位置に来たらこのパーツに切り替えたい」という座標を、キーとして記録しながらセットアップすることが可能になる。新たに横向き用のボーンを増やしたりせず正面向きと同じボーンを流用できることにより、腕の動きを一連のながれとして制御しやすくなるとエマール氏は解説した。

▲バインド後の腕の動き

STEP 2:キーポーズをつくる

STEP 2は横向きの差分パーツのセットアップが全て完了したところからのスタートだ。ここでの目的は、待機ポーズ、横向きポーズ、腕を広げたポーズの3つのポーズだけで構成されたアニメーションに、キーポーズを追加してアニメーションのながれをわかりやすくすることだ。バインドポーズとは、STEP 1で紹介したような、アニメ化モードでバインドを行なったときのポーズのこと。

ここでは[再生ビュー→ステップ]をONにし、補間を無効にしてアニメーションを確認する。3つのポーズでつくられたアニメーションは以下のようになる。

▲バインド後の腕の動き

このアニメーションに、「待機ポーズから横向きポーズに変わるまで」と、「腕を広げてから元の待機ポーズに戻るまで」の2つの中間点にポーズを追加してみると、アニメーションは以下のようになる。

このように、まず先に大きなながれをつくれば、あとは細かいところを詰めていけば良いだけになるとエマール氏は解説した。

STEP 3:アニメーションをなめらかにする

今度は[再生ビュー→ステップ]をOFFにし補間を有効にしてアニメーションを確認してみると、現在のポーズを単純に繋いだだけでは違和感のある動きになることがわかる。正面向きから横向きに切り替わるところや、横向きから正面向きに切り替わるところで大きく体が崩壊してしまっているほか、ステッキが指を貫通するように回転して戻ってしまっているからだ。

STEP 3ではこの問題を解決するために以下の手法が紹介された。

1.横向きまたは正面向きに切り替わる瞬間までは直前のポーズを保ち、ステップカーブで切り替える
「ステップ」カーブとは、キーとキーの間の補間法のひとつだ。デフォルトでは[リニア]に設定されているが、グラフビューから補間を[ステップ]に変更すると、一瞬でカチッと切り替えられる。たとえ1フレームごとにキーを打っていたとしても、カーブの形がリニアのままだと僅かな時間でも補間が入るので、再生した際に変な「チラつき」が発生する原因になってしまう

2.補間中のポーズをキーとして保存して、再利用する
1.の手法でポーズを切り替えたとしても、ポーズそのものが前後のフレームで大きく異なっている場合には、「切り替えが急すぎる」という印象は変わらない。そのため、補間ポーズ(まだキーフレームになっていないポーズ)を、ショートカット[Ctrl(Cmd)+Shift+L]キーを利用してキーとして記録し、そのキーを切り替え直後のポーズにもってく