グラブル内描画速度の解説

前提

1. 画面のリフレッシュレートに依存する
   　→ requestAnimationFrame()
2. CreateJSのTicker.RAF_SYNCHEDが遅延のベースになっている
   　→ グラブルではDeNAがつくった互換ライブラリ「Wahid」が使われている
3. グラブルはフレーム間隔33ミリ秒が目標として設定されている
   これをFPSで表現すると1000/33の「30.303030303030305」ということになる
   　→ (追記2021/01/16) Wahid内 で60の約数に数値を丸める処理が行われているためこうなっていると思われる。

遅延発生原因(更新2021/01/16)

1. (1000 / ブラウザFPS)ミリ秒ごとに画面描画リクエストが送信されます。
   　→ requestAnimationFrame()
2. 前回の描画から(1000 / 目標FPS)ミリ秒以上経過していれば次のフレームを描画します。
   (1000 / 目標FPS)には少しだけゆとりがあり、1ミリ秒であれば目標より速くても次のフレームが描画されます。
   　→ Wahidの実装部分
3. この時に発生したズレが蓄積されて遅延となります。

文章だとわかりづらいので下の画像も参考にしてください。

基本サイクル

ズレの例

計算方法(追記2021/01/16)

Wahidのこの部分の実装から下記の計算方法で実際のFPSが出せると思います。

(算数わからないのでJavaScriptで表現しています)

        
    // ブラウザのrequestAnimationFrameの周波数
    const rafFreq = 75;

    // ブラウザのrequestAnimationFrameの間隔(ms)
    const rafInterval = 1000 / rafFreq;

    // 目標となるフレーム間隔(ms)
    // 1ms短くなっている
    const targetInterval = 33 - 1;

    // 実際のフレーム間隔(ms)
    const interval = Math.ceil(targetInterval / rafInterval) * rafInterval;

    // 実際のFPS
    const fps = 1000 / interval;
        
    

実装について

ページ上で実際にCreateJS(wahid)を使ってグラブルと同じ設定のcanvasを生成して、その描画枚数を確認しています。

戻る