毎フレーム同じ距離だけ動かす方法では、描画頻度によって速さが変わる場合があります。移動量と時間の単位をそろえて考えます。
この記事でわかること
- 速さを一秒あたりの量で決める
- コールバックの時刻を使う
- 長い停止後の大きな経過時間を扱う
一回の描画で何歩、から一秒で何歩へ
一回の更新で数ピクセル動かすだけでは、更新回数が多い端末ほど遠くへ進みます。設計する値を一秒あたりの距離にし、前回からの経過時間を掛ける考え方へ切り替えます。
requestAnimationFrameの呼び出し頻度は、一般に画面のリフレッシュレートに関係します。毎秒60回に固定されている前提を置かず、渡される時刻から経過時間を求めます。
長い一回を、そのまま通さない
処理が重かった場合やタブから戻った直後は、前回との差が大きくなることがあります。一度に大きく移動すると壁を飛び越えるなどの問題が起こり得るため、扱う時間を制限するか、複数の短い更新へ分ける設計を検討します。
時間の上限を設けた場合、現実の経過時間とゲーム内の進み方が一致しない場面があります。移動、制限時間、通信の時刻をすべて同じ計算へ押し込まず、それぞれの目的を整理します。
同じ手順で進む距離を比べる
一定の時間だけ右へ移動する手順を用意すると、体感だけで比較するより違いが見えます。画面サイズとブラウザ、開始位置、操作時間をそろえ、移動後の位置を記録します。
- 一秒あたりの速さを決める
- 時間の単位をミリ秒か秒に統一する
- 画面復帰後の基準時刻を直す
- 低い描画頻度でも同じ手順を試す
参考にした情報源
情報確認日：2026.10.14。引用画像・投稿の埋め込みは使用していません。