Функция запуска со скоростью 60 кадров в секунду

#javascript #setinterval #frame-rate

Вопрос:

В настоящее время я использую setInterval( () => {}, 16 ) для запуска своего кода 60 кадров в секунду, но это заставляет код работать со скоростью 62,5 кадров в секунду, что заставляет игровые движения ускоряться вдвое быстрее на несколько кадров в секунду. Использование интервала 17 заставляет игровое движение время от времени замирать на один кадр.

Как я могу запустить код действительно со скоростью 60 кадров в секунду для максимальной плавности?

1. О чем 1000/60 это ?

2.Используйте игровой движок JS, например Babylon.js / Фазер 3 / и т.д. -> >html5gamedevs.com setInterval может дрейфовать.

3. частота кадров зависит от скорости вашего кода и машины, на которой он выполняется. вы не можете просто установить таймер и ожидать одинаковой частоты кадров на всех устройствах.

4. @tempacc Это прекрасно, но зачем изобретать велосипед? Иногда вам приходится признавать, что ваш подход был просто плохим, и есть лучшие решения.

5. @Marc Ну, я написал игру на Javascript, чтобы сделать ее как можно более легкой (и изучить холст), и да, подход был плохим, но я думаю, что я сделаю все гладко, не переписывая всю игру. (Будет использоваться Window.requestAnimationFrame с 0 и deltatime)

Ответ №1:

используйте Window.requestAnimationFrame([обратный вызов])

Таким образом, ваше приложение будет вызвано, когда придет время визуализации, независимо от того, работает ли монитор с частотой 30 Гц, 60 Гц или 120 Гц или более.

См. Этот пример из https://css-tricks.com/using-requestanimationframe/ о том, как его использовать, если документация MDN недостаточно ясна.

 var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

  globalID = requestAnimationFrame(repeatOften);

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});
$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

 div {
  width: 10px;
  height: 10px;
  background: orange;
  float: left;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
}
#stop {
  left: 100px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">start</button>
<button id="stop">stop</button>