Как повысить requestAnimationFrame?

Question

[Иван]

Делаю игру на канвасе на нативном скрипте. Есть канвас, высотой 700пиксилей, сверху вниз летят кубики, время от времени скорость падения увеличивается. Если кубики монотонные, одного цвета, то играть можно нормально, но когда сделали дизайн для кубиков и по дизайну на кубиках нарисованы буквы, в глазах начинает рябить, у нормальных людей случает эпилепсия, а эпилептики получают свою годовую дозу.
Как можно решить вопрос рендеринга? Из вариантов сделать дизайн кубиков менее броским, но это самый плохой вариант. Возможно есть какая-то библиотека способная решить данную проблему? Возможно ли как-то повысить requestAnimationFrame, чтобы спрайты стали отчётливее видны? Возможно есть ещё варианты, о которых я не подумал?

Comments

[Александр]

Используйте двойную буферизацию.

Answer 1

[hzzzzl]

ну браузер будет пытаться вызвать эту функцию 60 раз в секунду, можно попробовать каждый второй раз ничего не делать, например

let shouldRender = false

function step() {
  shouldRender = !shouldRender

  if(!shouldRender) return  
  ..

}

window.requestAnimationFrame(step);

Answer 2

[Дмитрий Беляев]

В колбэк requestAnimationFrame первым аргументом приходит время в миллисекундах с дробной частью (как в результате performance.now)
меряйте сколько прошло времени после последней анимации, если меньше некоего порогового значения (подберите) - то просто планируем следующий requestAnimationFrame и ничего не рисуем