プログラミング講座(164) タイマーイベント
ハロウィンのために作ったプログラム中にコウモリのアニメーションがあり、実は最初ブラウザ上ではうまく動いていませんでした。Timer オブジェクトを使った処理なのですが、今回はそのことについて説明します。
結論から言うと、
- Timer には 10ms 程度の誤差が生じる。
- ブラウザ上では Shapes の動作が遅い。
- 特に Shapes.HideShape(), Shapes.ShowShape() は遅い。
- Timer を使ってアニメーションを動かすときは、Interval の間に処理が終わるように、処理の長さあるいは Interval を調整する必要がある。
ということです。処理時間を測るには Clock.ElapsedMillisecond を使うと便利です。誤差の測定を行ったサンプルプログラムを ZHB659 として発行しました。
また、コウモリのアニメーションの部分だけを取り出して処理時間を測定したプログラムを QHH936-9 として発行しました。IDE から [実行] した場合 10ms 程度で 9 頭のコウモリを動かせますが、ブラウザ上では 100ms 以上かかります。
アニメーションのフレーム数 (FPS) は映画と同じ 24fps が主流です。このコウモリのアニメーションを 24fps で動かすには 1フレームを 42ms 以下にしなければなりません。ブラウザ上ではとても追いつかないので、10fps (1フレーム 100ms) にすることにしました。
| 固定リンク
「Small Basic」カテゴリの記事
- プログラミング講座 (202) 1次元セルオートマトン(2020.09.20)
- プログラミング講座 (201) パラメーター(2020.09.14)
- プログラミング講座 (200) 3次ベジエ曲線(2020.09.14)
- プログラミング講座 (199) スーパー三角関数?(2020.09.02)
- プログラミング講座 (198) スーパー楕円(2020.09.01)
コメント