本記事は英語の原文 Idle animation timing, measured on 127 official Spine animations の日本語版です。翻訳には AI を使い、数値は原文および計測スクリプトの出力と照合済みです。
待機(idle)は、キャラクターが操作や行動をしていないときのアニメーションです。動かしすぎると落ち着きがなく見え、動かさなすぎると静止画に見えます。勘に頼るかわりに、Spine 公式サンプルのアニメーターが実際にどうしているかを数えてみました。
何を計測したか
今回の計測対象は、公式リポジトリ spine-runtimes(4.2 ブランチ)の examples/ フォルダーから取得した JSON 書き出しです。スケルトン 26 体、アニメーション 127 本、キー約 18,000 個。spineboy、raptor、owl、goblins、hero、windmill などが含まれます。
アニメーションごとに、各キーの時間と値、キーに付いたカーブ、タイムラインごとの値の幅、サイクルが閉じているか、対になるボーン同士の位相差を計測しました。ボーンの役割(脚・腕・胴体・頭・揺れ物)はボーン名から割り当てたので、以下の数値は個々のスケルトンの評価ではなく、おおまかな傾向をつかむための目安として読んでください。
グリッドは 30 fps
計測対象のキーの約 98% は、書き出し時の丸め誤差を許容すると、1/30 秒刻みのグリッド上にあります。24 fps のグリッドに乗るのは 39% だけです。特にグリッドから外れるキーが多いのが coin で、約 38% のキーがグリッドの外にあります。回転の周期を優先したタイミングと考えられます。
ランタイムは任意の小数の時間を受け付けますが、同じグリッドを使うと、アニメーション間のタイミングやイベントの発生時刻をフレーム単位で調整しやすくなります。以下、「フレーム」は 1/30 秒を指します。
待機の長さ
サンプルの待機ループは 30〜200 フレーム、つまり 1〜6.7 秒です。hero/idle は 30 フレーム、spineboy/idle は 50、owl/idle は 200 フレーム。待機は同じキャラクターの歩行の 1 サイクルより明らかに長く、spineboy は 50 フレームかけて呼吸し、歩行サイクルは 30 フレームです。
呼吸の周期を歩行サイクルの整数倍に固定する必要はありません。周期をずらすことで、毎回同じタイミングで動きが重なるのを避けやすくなります。
キーは少なく、動かす部位は絞られている
待機アニメーションの回転タイムラインでは、キー密度の中央値は毎秒 3.0 個です。第1四分位数から第3四分位数までの範囲は毎秒 2.4〜4.3 個で、走行では中央値が毎秒 11.2 個、歩行では 5.5 個です。
待機アニメーションでは、ボーン全体のうち、直接キーが設定されているボーンの割合の中央値は約 31% です。歩行や走行では約 54% です。キーのないボーンも親ボーンの変形などで動くため、残りが画面上で静止しているという意味ではありません。待機では、リグ全体を一律に動かすより、動かす部位を絞ることが制作上の目安になります。
待機中の動きの幅
待機中の各回転タイムラインについて、キーの値の最大値と最小値の差を集計しました。中央値を出発点に、第3四分位数(75 パーセンタイル)を「元気な」動きの目安にしてください。
| ボーンの役割 | 中央値(°) | 第3四分位数(°) |
|---|---|---|
| 脚(太もも・すね・足) | 14 | 29 |
| 腕(肩・前腕・手) | 12 | 35 |
| 胴体(背骨・胸) | 4.6 | 8 |
| 頭・首 | 4.1 | 12 |
| 揺れ物(髪・尻尾・布) | 8.5 | 17 |
待機中の移動量の幅です。X・Y 各軸の最大値と最小値の差を求め、大きいほうを採用しています(書き出しデータ上のピクセル単位)。
| ボーンの役割 | 中央値(px) | 第3四分位数(px) |
|---|---|---|
| 腰 | 6.9 | 16 |
| 胴体 | 5.4 | 8 |
| 頭 | 2.9 | 11 |
待機は、数度・数ピクセルの微小な動きでできています。歩行中は頭の動きが小さく(頭 8.9°、脚 79°)、待機中は胴体の動きが小さく、髪などの揺れ物の動きが相対的に目立ちます。spineboy/idle では、髪が 16.7° 動くのに対し、胴体は 3.8° です。
ループは閉じ、0 秒のキーがポーズを保つ
アニメーション終端に最後のキーがあり、複数のキーを持つボーンの回転・移動・拡縮・シアーのタイムラインに限ると、85.5% で最初と最後の値がほぼ一致しました。待機はループなので、最後のキーは最初のキーを繰り返します。そうしないと、つなぎ目がサイクルごとのカクつきとして見えます。
今回集計したボーンの回転・移動・拡縮・シアーのタイムラインの約 86% には、0 秒のキーがあります。これがないと、ミックス中にボーンが前のアニメーションのポーズを引きずります。キーが 1 つだけのタイムラインも有効で、サンプル全体には 872 本あります。「このアニメーションでは、このボーンの値を維持する」という意味です。
カーブは思ったより少ない
次のキーが存在するキーだけを集計すると、53.2% がリニア、43.1% がベジェ、3.7% がステップでした。2 つのキー間の区間で正規化すると、ベジェ曲線の制御点座標 (cx1, cy1, cx2, cy2) の各中央値は (0.31, 0.00, 0.70, 1.00)。一方のキーからゆっくり出て、次のキーにゆっくり入る S 字カーブです。エディターのプリセット (0.25, 0, 0.75, 1) だけで、ベジェ使用の 17.7% を占めます。
胴体・頭・腕など、重さを感じさせたい部位にはイージングを使い、素早く動く部位ではリニア補間を使うのが目安です。待機でいえば、呼吸する胴体にはイージングを付け、数フレームごとにキーが入るちらつきは、追加のイージングを設定せずリニア補間でも表現できます。カーブがファイルにどう書かれるかは Spine 4.2 Bezier curves in JSON, explained(英語)で解説しています。
ボーンごとにキーを打つタイミングをずらす
アニメーションごとにキー時刻の組み合わせを重複排除して数え、その数を合計すると、タイムライン総数の約 57% でした。キーはサイクルの始まり・中間・終わりに集まり、それ以外ではほぼ均等に散らばっていて、「4 分の 1 ごとにキー」のようなグリッドはありません。
owl/idle の 7 枚の葉は周期 20 フレームを共有しながら、0・5・10 フレームずれた 3 つの位相に分かれています。windmill の木の葉は振れ幅を保ったまま、周期が 10〜15% 揺らいでいます。すべてのボーンのキーが同じフレームにあると、体全体が一斉に止まっては動き出し、機械的な印象になりやすくなります。
これらの計測結果は、筆者が開発している Riggy のアニメーション生成用リファレンスに取り入れています。Riggy は、レイヤー分けした PSD からチャットの指示で Spine アニメーションを作成するツールです(有料サービス、英語 UI)。