ブラウザゲームは60fpsを想定しないほうがいい【requestAnimationFrame】

理由

iOSの低電力モードでブラウザが30fpsになることがあるから。
これを知らないとiOSで何故か処理が遅いみたいな現象が発生する。

requestAnimationFrame(anime); // これが30fpsになる

setInterval(anime, 1000 / 60); // これでも30fpsになる

対策1. 強制的に30fpsにする

最初から全環境で30fpsで動けば問題ない。

こんな感じ

const FPS = 30;
let prevTime = -1;
const anime = (time) => {
    const fps = 1000 / (time - prevTime);
    if (prevTime === -1 || fps < FPS + 10) {
        prevTime = time;
        update(); // フレーム単位の処理を行う
    }
	requestAnimationFrame(anime);
};
anime(performance.now());

対策2. 各フレームの間隔の時間で処理を行う

こんな感じ

let prevTime = performance.now();
const anime = (time) => {
    const deltaTime = time - prevTime;
    prevTime = time;
    update(deltaTime); // deltaTimeを使って処理を行う
	requestAnimationFrame(anime);
};
anime(performance.now());

UnityだとdeltaTimeって概念があるっぽいね。
使ったことないからよく知らないけど。

参考