「FITC Tokyo 2009」詳細レポート
#2 Keith Peters氏「Making Tings Move」物理アニメーションの基礎
11月28日,ベルサール汐留にて,FITC Tokyo 2009が開催された。以下は,Keith Peters氏のセッションのレポート。
Keith Peters氏「Making Tings Move」
Keith Peters(キースピータース)氏は,日本国内でも高い評判を得ている "ActionScript 3.0 アニメーション" の作者として有名であり,また彼が運営するbit-101.comは,世界中で愛され翻訳されているFlash開発のチュートリアル,ラボサイトである 。日本でも,彼のウェブログを覗いたことがあるという開発者も多いことだろう。
このセッションでは,アニメーションをActionScriptに落とし込む基本的なテクニックを解説した。
氏によれば,プログラミングでアニメーションさせる場合には,3つのプロセスを経て,それがサイクルしているいう。ひとつめは,"ルール"。オブジェクトをどのようなルールで,どこに動かすのか,またはどのような状態変化をさせるのかを決定するプロセス。ふたつめは"動かす"。このプロセスでオブジェクトを実際に動かしたり,変化を起こす。そして,"リフレッシュ"。前のプロセスで動かされたオブジェクトの確認や,初期化を行う。これを何度も何度も繰り返すことで,複雑なアニメーションをつくっていくことができるのだという。また,この繰返しに使用する処理はプログラミング言語によって異なり,ActionScript3.0では,"EnterFrame"と"Timer"だと紹介。実際にボールを平行移動するシンプルなサンプルを作成しながら,デモを披露した。氏は「ActionScriptで行うアニメーションのほぼ全てで,この処理が必要になってくる。あとはどのような"ルール"を当てはめるか,ということだ」との述べ,アニメーションを制御する"ルール"を紹介。ルールごとにわかりやすくデモを行いながら解説した。
まずひとつめに重要な要素になってくるのが,Velocity(速度)である。Velocityは一見,Speed(速さ)と混同しがちだが,"速さ"に加えて"方向"を表すのが重要だという。また,これらのVelocityをXY座標にあてはめていくのがFlashアニメーションの基本であるとした。また,角速度からXY速度への変換の例では,度をラジアンに変換するコードから,Math.cosをXに,Math.sinをYに当てはめるといってた,三角関数を用いた基礎的なコードを紹介。
スピードに角度を自在に操ることで,柔軟性を得ることが出来るとした。
次に,スピードを変えたい場合のルールとして,Acceleration(加速)が紹介された。オブジェクトの移動スピードを上げたい場合にはもちろんのこと「スピードを落とす場合にもAccelerationと読んでいる」と述べた。Accelerationのシンプルなコードは以下のようになる。この例では,ボールがだんだん加速しながら移動していく。
//ballが加速していく
vx = 0;
vy = 0;
ax = .2;
ay = .3;
vx += ax;
vy += ay;
ball.x += vx;
ball.y += vy;
基本的な考え方として"加速を速度に追加させ,速度を位置に追加させる"と述べるキース氏。常に,Velocityに対してルールを加えていくという。また,加速の延長として,Gravity(重力)を紹介。Gravityはy軸方向のみの加速として定義される。これは,地球が常に同じ方向に物体をひっぱいてる事と同じだ。氏はコード自体は加速とほぼ変わらないとし,オブジェクトが落ちていくデモを見せた。Velocityの初期値をマイナス値にすることで,最初は上昇するものの,重力に引っ張られて落ちていくといった表現や,Gravityを極端に低くすると言ったパラメータのちょっとした変動で表現の幅が広がり,リアルになることを示した。氏は,「とはいえ,これは物理の教科書に書いてあることとは違う。つまり,完全な精度はない。だが,ゲームやアプリケーションに使うには十分だ。短時間で,短いコードで表現することが出来る。精度をだそうとすれば,その分負荷が掛かり,コードも複雑になる。」として,必ずしも精度の高いアルゴリズムを利用する必要がないことをアドバイス。
//重力に引っ張られてballが落ちていく
var vx = 2;
var vy:Number = -10;
var gravity:Number = .95;
addEventListener(Event.ENTER_FRAME,function(e){
vy += gravity;
ball.x += vx;
ball.y += vy;
})


