FPSを表示

まずは定石通りに計測から始めようと思いますが、ここはお手軽に FPS を見て確認するだけで済ませます。今回はそれで十分そうなので。

FPS は Window.real_fps で取得できます。あとはこれを画面に描画するだけですね。簡単。

次の条件で調べます。

結果:

(2) と (3) でほとんど差がないことから、描画処理がボトルネック（描画処理以外の部分ではない）という点についても裏が取れました。

チャートの描画の改善

サイズが 1000 でチャートが4本の場合、1000 * 2 * 4 = 8000 回 draw_line を実行していることになります。そりゃ遅いですわ。

これは、 H/L の状態が連続している部分はまとめて1本だけ線を引くようにすればよいでしょう。

次のような「開始位置・終了位置・状態」の組の配列を作って返すメソッドを StateHistory に追加して、View の側ではそのデータを受け取って素直に描画するだけにしてみました。

[
  [  0, 510, false],
  [511, 725, true ],
  [726, 999, false],
]

また、 H の部分の塗りつぶしも雑に draw_line でやっていましたが、線で塗りつぶすのをやめて draw_box_fill を使うようにします。 *1

これでまた 55 FPS前後で描画できるようになりました。

FPS は無事に元の水準に戻りました。

ところで……ふと思ったのですが、アクションゲームやシューティングゲームを作っているわけではありませんし、そもそも 60 FPS で描画する必要はないのでは。

というわけで、ひとまず 30 FPSまで落としてみました。少し試した感じでは特に問題なさそうです。これだけで描画処理の量を半分に減らせますから、もっと早くやっとけばよかったですね。

タイムチャートと監視箇所の対応関係が分かりにくいなと思ったので、ランプの方にも名前を表示することにしました。

f:id:sonota88:20200731065035p:plain

以下の iframe で実際に動かせます。

※ 音量小さめにしていますが音が出ます。
※ スマホでは全体が表示できないかもしれません。PCブラウザなどで見てください。

*1:そもそも塗りつぶしは必須ではないのですが、あった方が見やすいので残したい。