言語ゲーム

とあるエンジニアが嘘ばかり書く日記

Twitter: @propella

アニメーションの図形的表現

アニメーションを表すデータ構造をどうするかで悩む。多分、このような分野はみんなが同じようなプログラムを書いているはずだが、僕のグーグル力(ちから)では上手く引っ掛ける事が出来ないので、とりあえず今の考えを整理する。

問題点は、アニメーションと言うのは、より小さなアニメーションの集合で出来ているのだが、それらを統一的に表現する方法は無いかという事だ。例えば「ある場所まで歩く」という行動を考えてみる。「歩き始め」「一歩」「一歩」「一歩」「歩き終わり」と言う風に行動を分けると作りやすい。「歩き始め」や「一歩」等のアニメーションをツールで作成する際は、一つところで足踏みしているような奴を作る。これと、「ある場所まで全体を進ませる」というアニメーションを同時に動かすと、全体として「足踏みしながらある場所まで進む」つまり「ある場所まで歩く」という風になる。

「一歩」の部分を細かく見てみる。場合によって速く歩いたりゆっくり歩いたりしたい場合もあるかと思うが、全ての場合において別にアニメーションを作成するわけにも行かないので、原型となるアニメーションを基準に、伸ばしたり縮めたりすれば良い事が分かる。そのような原型は、とりあえず 0.0 秒から1.0 秒の間に「一歩」の行為を起こすことを考えよう。ここで、「ローカル時刻」と「グローバル時刻」の考えを取り入れれば色々便利になることに気が付く。

例えば、普通の二倍の速さで歩きたいときは、グローバル時刻が 0 秒から1 秒に進む間に、「一歩」のアニメーションは 0 秒から2 秒まで進む(2歩になってしまうけど)。また、最初の10秒をじっとしておいて、それから歩き始める時、「歩き始め」の 0 秒をグローバル時刻の 10 秒に対応させればよい。

だんだんややこしく感じられるかも知れないが、ここで、アニメーションを図形のように考えれば分かりやすい事に気づく。ある単位アニメーションを長方形として考え、左上の座標を (グローバル開始時刻, ローカル開始時刻) 右下の座標を (グローバル終了時刻, ローカル終了時刻) と考える(左上原点です)。このような長方形が大体左から右に並んでいるとき、x 軸がアニメーション全体の時刻を表す。現在時刻を表す縦線を、左から右に動かすと、縦線と重なった長方形が現在処理が必要なアニメーションという事が分かる。

もっと言うと、長方形には左上から右下に対角線が描かれてあって、それと現在時刻の縦線が重なる点の y 座標が実行すべきアニメーションのローカル時刻になる。

このモデルにおいて、アニメーションの繰り返しや伸縮、逆転の操作も図形的に表現されるので、図形的な演算、すなわち行列を使って統一的に計算する事が出来る。同時に実行される、もしくは順に実行されるアニメーションを纏めて単位アニメーションとして考える事も簡単だし、単位アニメーションがキーフレームであってもサンプリングしたやつであっても同じように扱える(ただし、関数的に時刻からフレームが求まる物でないとダメだ。一枚目のフレームを計算しないと二枚目のフレームがわからないような手続き的なアニメーションだとこのモデルは難しい)。

アニメーションというのは時間を俯瞰して考えないといけないので、なかなか想像しにくい要素が沢山ある。そこで、やたらとノウハウの溜まっている静止画の操作と同じように扱いたいというのが事の発端である。とにかく、普通アニメのデータ構造はどうする物なのか、その辺知りたいなあ。

図形的表現といいつつ図の全く無い日記ですみません。