Javascript - gameloop с использованием дельта-времени

Question

Я пытаюсь реализовать gameloop, использующий дельта-время. Я получил следующий код от this article, однако я чувствую, что он не очень хорошо объясняет этот тип игр. Я исследовал по запросуAnimationFrame, и ни одно из объяснений не кажется полезным. Может ли кто-то просто сломать, как работает этот цикл?

function timestamp() { 
    return window.performance && window.performance.now ? window.performance.now() : new Date().getTime(); 
}, 

var now, 
dt = 0, 
last = timestamp(), 
step = 1/60; 

function frame() { 
    now = timestamp(); 
    dt = dt + Math.min(1, (now - last)/1000); 
    while(dt > step) { 
    dt = dt - step; 
    update(step); 
    } 
    render(dt); 
    last = now; 
    requestAnimationFrame(frame); 
} 

requestAnimationFrame(frame); 

Answer 1

requestAnimationFrame - специальный таймер. В отличие от setInterval, который выполняет обратный вызов несколько раз после заданного минимума миллисекунд, requestAnimationFrame выполняет переменные для достижения гладких кадров.

Проблема в том, как requestAnimationFrame достигает этого. В зависимости от ситуации он может работать быстрее или медленнее. Это означает, что если ваша логика обновления напрямую привязана к requestAnimationFrame, символ, работающий на «один шаг за обновление», будет перемещаться на 60 шагов за одну секунду, когда requestAnimationFrame работает со скоростью 60 кадров в секунду, но тогда будет делать только 40, когда он дросселирует до 40fps.

Чтобы противодействовать этому внезапному ускорению/замедлению таймера, мы используем «время дельта». Вместо того чтобы зависеть от каждой итерации requestAnimationFrame для вызова обновления, вы проверяете время между кадрами, чтобы узнать, правильно ли вы позвонить для обновления.

Так что скажем, ваш персонаж должен делать шаг каждые 100 мс. Если игра проходила со скоростью 60 кадров в секунду, 100 мс примерно каждые 6 кадров. Это означает, что для каждой итерации ваш код проверяет, прошло ли 100 мс. Вокруг 6-го кадра он делает, и вызывает обновление. Теперь, если таймер работает со скоростью 40 кадров в секунду, 100 мс составляет около 4 кадров. Так же логика, на каждой итерации она проверяет, прошло ли 100ms. На 4-м кадре он делает и вызывает обновление. При этом вы застрахованы, чтобы обновление постоянно вызывалось независимо от колебаний.