Заикание в ритм-играх - симптомы и лечение на примере Lofi Ping Pong

Привет, Gamin. Меня зовут Коля и я хочу рассказать тебе о проблеме, с который ты можешь столкнуться при разработке ритм-игры (и с которой точно столкнешься, если разработка будет под мобильные устройства). Ну и о её решении тоже поведаю, конечно.

В марте 2019 я выпустил в Steam свою первую ритм-игру Lofi Ping Pong. Это настольный теннис, в котором мяч надо отбивать в такт треку. Летом 2020 мне захотелось отдохнуть от разработки второй музыкальной поделки, так что решил портировать Пинг понг на мобилки и Switch. Тут-то и появились сложности — мяч вдруг начал лететь отрывисто, «заикаться». Чтобы вкратце разобраться с недугом, требуется вступление.

YT видео геймплея

Особенность музыкальных игр

Не буду рассказывать про архитектуру ритм-игр в целом (собираюсь сделать это после выпуска второго проекта), но пояснить за основную идею я обязан.
В большинстве игр обязательно есть какое-либо движение — будь то носящийся по всей карте Meat Boy или падающий с потолка ящик в Portal. Любое перемещение становится плавным, когда мы добавляем один волшебный ингредиент — Delta Time, то есть время между фреймами. С помощью него, как известно, мы перестаем зависеть от выдаваемого фпс, что делает, к примеру, скорость персонажа всегда одинаковой.

И тут тебе приходит сумасшедшая мысль сделать игру, в которой что-то происходит в такт музыке. Ты набросал на бумаге идею, лезешь в любимый движок, чтобы воплощать её в жизнь. К примеру, захотелось сделать настольный теннис, в котором мяч отбиваешь в такт треку, как метроном. Что может быть проще?
У нас есть расстояние между началом и концом полета мяча S. Чтобы рассчитать время полёта T, требуется знать скорость песни — её BPM (beats per minute). Это количество ударов (долей) в минуту, как если бы вы отстукивали темп песни ладошкой по коленке и записали количество шлепков за 60 секунд. Количество чего-либо в единицу времени есть частота, значит, чтобы найти время одного удара (период), достаточно перевернуть её с ног на голову, не забыв перевести в секунды, умножив на 60 (T = 60 / BPM).
В школе вроде учили, что скорость V = S / T. Не забудем добавить в формулу наш любимый delta time, и готово!

void Start ()
{
    distance = endPoint — startPoint;
}

void MoveBall ()
{
    float timeBetweenBeats = 60 / bpm;
    Vector3 velocity = distance / timeBetweenBeats;

    transform.position += velocity * Time.deltaTime;
}

Как только мяч долетает до нужной позиции, мы нажимаем кнопку, меняя end point и start point местам, и движение продолжается, но в обратную сторону. И всё идёт прекрасно, пока ты так не поиграешь 10, 30, 60 секунд. После этого начнётся сильнейший рассинхрон между играющей песней и скачущим мячом — каждый новый удар будет всё дальше удаляться от реального бита песни.
Проблема в том, что ты не следишь за настоящей позицией трека. Да, мы включили в формулу его скорость, но этого недостаточно. Правильным методом окажется перемещение мяча с помощью интерполяции по положению музыки (точнее даже будет сказать «экстраполяции»).
Позиция трека. Все переменные будут ниже в коде.

Тебе надо следить за позицией трека и считать, как много времени прошло с предыдущего бита. Время между битами — как расстояние между start point и end point. Delta between beats будет отображать позицию нашего мяча. Но это довольно странно ставить знак равно между временем (delta between beats) и координатой (позиция мяча). Понятнее будет перевести всё в доли- поделив delta between beats на time between beats мы получим процент между соседними битами. Этот процент будет таким же у мяча между начальной и конечной позицией.
Ниже аналогия в игре.

void MoveBall ()
{
    float trackPosition = audioSource.time;
    float timeBetweenBeats = 60 / bpm;

    float deltaBetweenBeats = trackPosition — timeBetweenBeats * lastBeat;
    float percent = deltaBetweenBeats / timeBetweenBeats;

    transform.position = startPoint + distance * percent;
}

Весь этот блок был написан, чтобы показать зачем и как использовать в качестве двигателя мяча именно сам трек, а не просто его скоростную характеристику. Это и есть то самое ядро, на котором строится ритм игра. Помимо этого, как и в других играх, есть куча нюансов, типа начального оффсета у песни или как учесть визуальный/аудио лаг у игрока в перемещении мяча. Самое главное, мы поняли, что Delta Time нам не нужен.

Проявление заиканий и решение

Разобравшись с главным концептом, ты делаешь основную игровую петлю, тестируешь на ПК, все идёт прекрасно. До того момента, как ты решишь запустить игру на мобильном устройстве.
Тут наступает ужасное — мяч летит отрывисто, заикается, как будто игра идёт в 15 фпс. Ты профайлишь игру, но все показатели в норме, да и остальные элементы игры, не зависящие от хода музыки, ведут себя адекватно. Может, мы рано решили избавиться от Delta time?

​private float FixTrackPosition ()
{
    float trackPosition = audioSource.time;

    if (trackPosition == lastFrameTrackPosition)
    {
        trackPosition += Time.deltaTime;
    }
    else if (trackPosition < lastFrameTrackPosition)
    {
        float delt = lastFrameTrackPosition — trackPosition;
        trackPosition = lastFrameTrackPosition + delt;
    }

    lastFrameTrackPosition = trackPosition;

    return trackPosition;
}

void MoveBall ()
{
    float trackPosition = FixTrackPosition ();
    float timeBetweenBeats = 60 / bpm;

    float deltaBetweenBeats = trackPosition — timeBetweenBeats * lastBeat;
    float percent = deltaBetweenBeats / timeBetweenBeats;

    transform.position = startPoint + distance * percent;
}

private float FixTrackPosition ()
{
    float trackPosition = audioSource.time;

    if (trackPosition != lastFrameTrackPosition)
    {
        trackPositionContainer = (trackPositionContainer + trackPosition) / 2f;
        lastFrameTrackPosition = trackPosition;
    }

    float trackPositionToReturn = trackPositionContainer;
    trackPositionContainer += Time.deltaTime;

    return trackPositionToReturn;
}

void MoveBall ()
{
    float trackPosition = FixTrackPosition ();
    float timeBetweenBeats = 60 / bpm;

    float deltaBetweenBeats = trackPosition — timeBetweenBeats * lastBeat;
    float percent = deltaBetweenBeats / timeBetweenBeats;

    transform.position = startPoint + distance * percent;
}