0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Spine 公式サンプル 127 アニメーションを計測してわかった待機(idle)アニメーションのタイミング

0
Posted at

本記事は英語の原文 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)。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?