Правильная обработка времени для механизма холста HTML5

Я работаю над симулятором нескольких снарядов для проекта колледжа, и мне интересно, как лучше всего настроить синхронизацию при рендеринге JavaScript на холсте HTML5.

Я использую установку интегратора Эйлера для физики, и точность очень важна для этого проекта. Рендеринг очень голый

Мой вопрос в том, как лучше всего настроить время для всего этого.

Прямо сейчас у меня есть:

  • Физика и другая логика, работающая в функции, которая зацикливается с использованием setTimeout() с фиксированным временным шагом.
  • Рендеринг в другой функции, которая зацикливается с использованием вызова requestAnimationFrame() (гибкий временной шаг)

Эти два цикла выполняются как бы одновременно (я знаю, что JavaScript на самом деле не поддерживает потоки без веб-воркеров), но я не хочу, чтобы рендеринг (в настоящее время работающий с гораздо более высоким FPS, чем необходимо) без необходимости «воровал» циклы ЦП у симуляция физики, если вы понимаете, о чем я.

Учитывая, что точность физики здесь наиболее важна, как бы вы порекомендовали настроить систему хронометража? (Возможно, здесь было бы полезно использовать Web Workers, но я не видел, чтобы это использовалось в других движках)

Спасибо!


javascript canvas simulation game-physics timing
person jt78    schedule 05.11.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я бы посоветовал вам не пытаться использовать «многопоточность», если вы на самом деле этого не делаете, и даже в этом случае я бы не обязательно рекомендовал это.

Лучший способ синхронизировать все — это иметь один поток выполнения. Один цикл setTimeout около 33мс работает нормально для моих игр.

Кроме того, по крайней мере, по моему опыту, setTimeout предлагает гораздо более эстетичный опыт, чем setInterval или requestAnimationFrame. С setInterval Javascript изо всех сил пытается «наверстать упущенное», когда кадры доставляются с опозданием, что делает кадры анимации несогласованными. С requestAnimationFrame кадры пропускаются для обеспечения плавного хода игры, что на самом деле усложняет задачу, потому что ваши пользователи не полностью уверены, что их представление актуально в любую секунду.

person Jeffrey Sweeney    schedule 05.11.2012

arrow_upward
1
arrow_downward

Одним из способов было бы установить интервал для обработки физики и один раз за x кадров рендерить все.

var physicsTime;
var renderFrequency;
var frameCount;

setInterval(function(){updateStuff()},physicsTime);

затем в updateStuff()

function updateStuff(){
  frameCount ++;
  if (frameCount >= renderFrequency){
    frameCount -= renderFrequency;
    render();
  }
  physics();
}
person Marian Ivanov    schedule 05.11.2012