Как я делаю игру анимации JavaScript на той же скорости на всех браузерах во всех системах?
У меня есть функция, которая вычисляет следующий кадр в анимации различных объектов, перемещающихся в обе оси X и Y [я называю его frameRender() ] и функция, которая применяет тот получающийся кадр к объектам [я называю это frameDisplay() ]. Объекты только перемещаются от точки к B, они постоянно перемещаются, всегда получая новые целевые провода. Я использую a setInterval() с a 1000/frameRate интервал, но это, кажется, не работает вообще, поскольку браузеры не имеют точных синхронизаций.
Вопрос: Как я могу удостовериться, что анимация имеет постоянную частоту кадров и будет работать на той же скорости на всех браузерах во всех системах? Я попробовал все и, может казаться, не получаю точный результат даже на просто различных браузерах (я тестирую на Firefox и Chrome, Chrome обычно отображается намного быстрее).
Результат должен быть: Когда это играет медленный, интервал анимации должен уменьшиться сначала и затем попытаться пропустить некоторые кадры [путем пропуска frameDisplay() ] если это, который DOM отображает медленный, пока это не играет правильно. Когда это играет быстро, интервал анимации должен увеличиться, делая игру анимации на корректной скорости.
Но как Вы удерживаете непротиворечивость все это, так как Вы не можете всегда быть уверены, когда браузеры станут медленными, или когда они будут работать быстро. Например, если будет огромный скачок перемещений, и мы уменьшаем интервал для хранения частоты кадров устойчивой, и затем внезапно большинство движущихся объектов останавливается или не перемещается очень, то это будет внезапно работать действительно быстро!
Какие-либо идеи?
3 ответа
Ответ здесь , замечательная статья Гленна Фидлера , требуется небольшая настройка, чтобы преобразовать его в Javascript, но принципы те же. По сути, вам нужно использовать аккумулятор, который складывает дельта-тайминги, и выполнять шаги на основе этого. Не нужно менять какую-либо физическую математику или что-то еще, решение - подключи и работай. Также есть классный интерполятор, который устраняет заикание, а также позволяет делать сверхмедленное плавное движение (для повторов и т. Д.). Это фантастика, работает для физики и должна работать с любым пошаговым движением. Практически все, что вам нужно для точного определения времени движения в игре, есть.
Вопрос в следующем: как я могу убедиться, что анимация имеет постоянную частоту кадров и будет работать с одинаковой скоростью во всех браузерах, во всех системах?
Вы ничего не можете сделать с частотой кадров. Единственное, что вы можете контролировать, - это то, как ваше приложение обновляется в зависимости от прошедшего времени. Это верно и вне браузеров, и это обычная тема в разработке игр.
Лучше всего отслеживать дельту (читай: разницу во времени) между обновлениями.
(function () {
function getTime() {
return new Date().getTime();
}
var last = getTime();
function update(delta) {
// Update your application state on delta (ms of time passed)
}
(function loop() {
update(last = getTime()-last);
render();
setTimeout(loop, 20); // 20 = attempt 50fps
}());
}());
Обратите внимание на использование здесь setTimeout. Это сделано для предотвращения рассинхронизации вызова loop (). setInterval будет продолжать запускать его, даже если предыдущий вызов не завершился.
Вы можете синхронизировать анимацию с системным временем.
Сохранить текущее системное время в переменной. На всех кадрах, которые вы хотите перерисовать, проверьте, равно ли текущее время вашей переменной некоторому дельта-времени. затем перерисуйте свою анимацию. иначе подождите эту разницу