アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » NEWS & REPORT » レポート » 「FITC Tokyo 2009」詳細レポート » #2 Keith Peters氏「Making Tings Move」物理アニメーションの基礎

「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に落とし込む基本的なテクニックを解説した。

写真1 ActionScriptでアニメーションさせる方法を解説した著書が有名な,Keith Peters氏

画像

氏によれば,プログラミングでアニメーションさせる場合には,3つのプロセスを経て,それがサイクルしているいう。ひとつめは,"ルール"。オブジェクトをどのようなルールで,どこに動かすのか,またはどのような状態変化をさせるのかを決定するプロセス。ふたつめは"動かす"。このプロセスでオブジェクトを実際に動かしたり,変化を起こす。そして,"リフレッシュ"。前のプロセスで動かされたオブジェクトの確認や,初期化を行う。これを何度も何度も繰り返すことで,複雑なアニメーションをつくっていくことができるのだという。また,この繰返しに使用する処理はプログラミング言語によって異なり,ActionScript3.0では,"EnterFrame"と"Timer"だと紹介。実際にボールを平行移動するシンプルなサンプルを作成しながら,デモを披露した。氏は「ActionScriptで行うアニメーションのほぼ全てで,この処理が必要になってくる。あとはどのような"ルール"を当てはめるか,ということだ」との述べ,アニメーションを制御する"ルール"を紹介。ルールごとにわかりやすくデモを行いながら解説した。

写真2 スクリプトアニメーションでは3つのプロセスがサイクルしていると説明

画像

まずひとつめに重要な要素になってくるのが,Velocity(速度)である。Velocityは一見,Speed(速さ)と混同しがちだが,"速さ"に加えて"方向"を表すのが重要だという。また,これらのVelocityをXY座標にあてはめていくのがFlashアニメーションの基本であるとした。

写真3 "速さ"に加えて"方向"の概念を持つ,速度の利用が重要

画像

また,角速度からXY速度への変換の例では,度をラジアンに変換するコードから,Math.cosをXに,Math.sinをYに当てはめるといってた,三角関数を用いた基礎的なコードを紹介。

写真4 三角関数を用いてxy方向の速度を算出

画像

スピードに角度を自在に操ることで,柔軟性を得ることが出来るとした。

次に,スピードを変えたい場合のルールとして,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;
})

著者プロフィール

加茂雄亮(かもゆうすけ)

株式会社ロクナナにて,ActionScriptを伴うFlashコンテンツや,AjaxコンテンツなどRIA開発に従事するフロントエンドエンジニア。テクニカルライターとしての一面を持ち,WEB・雑誌・書籍、媒体問わず執筆。また,イベントやセミナーでの講演など,精力的に活動している。

URLhttp://log.xingxx.com/
URLhttp://rokunana.com/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

サイエンスに片思い

本連載では,サイエンスという学問を軸に,そこから広がる可能性やつながり,そしてWebの世界との関係について,前田邦宏氏がさまざまな取材を元に考察し,これからの可能性について展望します。

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス