« プログラミング講座(163) ハロウィン | トップページ | レゴ »

2014/11/01

プログラミング講座(164) タイマーイベント

ハロウィンのために作ったプログラム中にコウモリのアニメーションがあり、実は最初ブラウザ上ではうまく動いていませんでした。Timer オブジェクトを使った処理なのですが、今回はそのことについて説明します。

結論から言うと、

  • Timer には 10ms 程度の誤差が生じる。
  • ブラウザ上では Shapes の動作が遅い。
  • 特に Shapes.HideShape(), Shapes.ShowShape() は遅い。
  • Timer を使ってアニメーションを動かすときは、Interval の間に処理が終わるように、処理の長さあるいは Interval を調整する必要がある。

ということです。処理時間を測るには Clock.ElapsedMillisecond を使うと便利です。誤差の測定を行ったサンプルプログラムを ZHB659 として発行しました。

また、コウモリのアニメーションの部分だけを取り出して処理時間を測定したプログラムを QHH936-9 として発行しました。IDE から [実行] した場合 10ms 程度で 9 頭のコウモリを動かせますが、ブラウザ上では 100ms 以上かかります。

図151 コウモリのアニメーション(IDE から実行)
【図151 コウモリのアニメーション(IDE から実行)】

アニメーションのフレーム数 (FPS) は映画と同じ 24fps が主流です。このコウモリのアニメーションを 24fps で動かすには 1フレームを 42ms 以下にしなければなりません。ブラウザ上ではとても追いつかないので、10fps (1フレーム 100ms) にすることにしました。

|

« プログラミング講座(163) ハロウィン | トップページ | レゴ »

Small Basic」カテゴリの記事

コメント

コメントを書く



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




トラックバック


この記事へのトラックバック一覧です: プログラミング講座(164) タイマーイベント:

« プログラミング講座(163) ハロウィン | トップページ | レゴ »