« 衝突のスキャン | トップページ | 数式表示 MathJax -5- »

2012年7月16日 (月)

FlatTable アニメーションの流れ

FlatTable のアニメーションは下に示した流れで動作しています。


[Single]
↓
singleAnim()
↓
prolog()
↓
 -→animate()-----------------------------------------→終了
↑  ↓       ↓                ↓                 ↓
|  aim()    makeBallList()    scanCollision() → clusterCheck()
|  ↓                         ↑__↓
|  shot()                     |
|  ↓                         |
action()-→ hit()---------------
↓             ↑
step()----------
↓
ballMove()


[Anim]
↓
epilog()

ボタン[ Anim ]のメニュー[ Sngle ]をクリックすると singleAnim() が実行され、 prolog() へと移って行きます。この prolog() でアニメーション用のページ animPage が準備されます。

次に prolog() から animate() へ処理が移り、前回説明した衝突のスキャンが実行され、手球の速度が求められます( scanCollision() )。ただし、アニメーションするページがそれ以上無い場合は、この animate() でアニメーションを終了します。

アニメーション続行ならば、処理は aim() へと進んで行きます。 aim() は手球の進行方向に向かってキューを表示するルーチンです。さらに、この aim() では shot() をインターバルに登録します。

    shotId = setInterval("shot()", 1000/FPS);
ここに FPS は1秒あたりのコマ数です。

aim() に続いて shot() が実行されます。このルーチンはキューのテイクバックからフォロースルーまでの描画を実行します。Flash 版 FlatTable を作成した時、初めはキューの表示が無かったのですが、それだと、球が動き出すまで何処へ向かって移動するのか分からないという不便さが有りました。その改善のためにキューを表示するようにしました。また、ここでは action() をインターバルに登録しています。

次に実行するのが action() です。ここで、いよいよ球が動き始めます。このルーチンでは、次の1コマの移動で次の節点に到達するかどうかを調べて、到達する場合は hit() を実行します。到達しない場合は step() を実行します。球の速度が0になったら、その球を動く球のリスト runList から除外します。そして、 runList が空になったら animate() に処理を移します。

step() は実際に球を動かすルーチンです。1コマ分、球を移動させます( ballMove() )。そして、ラシャの抵抗による減速を実施します。

hit() は、球が他の球に当たった時の処理をするルーチンです。ここでは、衝突した球と衝突された球のその後の速度を求め、衝突された球は動く球のリスト runList に追加します。

アニメーション実行中もしくは球の運動が全て終了した後でボタン[ Anim ]をクリックすると epilog() が実行されアニメーションを終了します。 epilog() ではアニメーションのためのインターバルをクリアし、アニメーション用ページ animPage を非表示、現行ページを表示します。さらに、ボタン[ Anim ]の色を通常の色に戻します。

ところで、下図のアニメーションを実行すると、手球が1番に衝突する時の速度が1番の初速度よりも遅いように見えます。まだ何かバグが有るのでしょう。因みに Flash 版では正常に動いています。(追記:バグ修正しました)

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« 衝突のスキャン | トップページ | 数式表示 MathJax -5- »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/55204628

この記事へのトラックバック一覧です: FlatTable アニメーションの流れ:

« 衝突のスキャン | トップページ | 数式表示 MathJax -5- »