Как реализовать алгоритм наложения нот в чарте ритм-игры?

Question

[Константин Подыганов]

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

Пытался реализовать это с помощью PhaserJS. Написал простой цикл, но не сработало, как оказалось я не могу задержать выполнение цикла

const map = [
  { time: 1234 },
  { time: 2432 },
  { time: 4321 }
]

let i = 0

while (i <= map.length) {
  setInterval(() => { ... } , map[i].time)
}

Как добиться задержки цикла на определенное время?
И если есть другой вариант решения этой задачки, что можно посмотреть?

Answer 1

[Сергей Соколов]

setInterval(), setTimeout() — не точны. Для музыки/ритма/игры лучше полагаться на абсолютные метки времени и часы компьютера.

// в относительных единицах от старта песни
const hits = [ { time: 0 }, { time: 24 }, { time: 36 }, ];

// on play start
const timeK = 1200; // в зависимости от темпа
const playStartTime = Date.now();
const events = hits.map(hit => {
  hit.ts = playStartTime + timeK * hit.time;
  return hit;
});
// теперь у каждой ноты есть время ts, когда она должна сыграть

// внутри цикла requestAnimationFrame, который часто-часто,
// сраниваем текущее время с нотами,
// если разница менее 100 мс, ноту можно "играть"
const now = Date.now();
events.filter(note => Math.abs(note.ts - now) < 100).forEach(note =>play(note));

Наверное, надо смотреть и «в прошлом» пропущенные ноты – мало ли, комп притормозил.. И убирать сыгранные ноты из массива, чтобы не возвращаться к ним.

Comments

[Константин Подыганов]

Все получилось, только теперь нужно как-то синхронизировать музыку и сами ноты. Если ноты двигаются с правой части экрана, создаваясь на точке Х: 800 а хит-поинт по Х: 100. Как здесь найти идеальное время начала трека, если нота двигается со скоростью 2.5 пикселя (вроде в секунду, не знаю как Phaser делает точно)?