pixel-platformer

Полноценный 2D-платформер в стиле pixel-art - физика персонажа, уровни, противники и собираемые предметы. Доказательство, что мы спускаемся до слоя игрового движка, а не просто собираем готовое.

TL;DR

Двухмерный платформер, который работает в браузере. Дело было не в количестве функций, а в том, чтобы прыжок ощущался хорошо и всё оставалось плавным даже на слабом ноутбуке.

Обзор

Платформер - один из тех проектов, что со стороны выглядят банально. Квадрат прыгает по плиткам, что тут может быть сложного? Вся сложность сидит в вещах, которых игрок не видит, но чувствует за несколько кадров: пружинист ли прыжок, есть ли задержка в управлении, можно ли дотянуться до края.

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

Игрок оценивает игру в первые секунды, и не разумом, а на ощупь. Слишком лёгкий персонаж ускользает из-под пальцев, слишком тяжёлый тащится и раздражает. Между ними лежит узкая полоса, в которой прыжок ощущается приятным - и эта полоса находится только через настройку отдельных значений: силы прыжка, гравитации, трения при приземлении.

Именно поэтому платформер - такое хорошее упражнение. Здесь нет большой архитектуры, которую нужно проектировать, зато есть беспощадная обратная связь: одно неудачно выбранное число, и игра сразу перестаёт быть приятной. Остальная часть этого кейса - рассказ о том, что пришлось привести в порядок, чтобы эта настройка вообще имела смысл.

Один шаг физики, любое железо на равных

Самая частая ошибка в играх, сделанных после работы: цикл, привязанный к числу кадров. На мониторе 60 Гц персонаж прыгает нормально, на 144 Гц летит вдвое быстрее, а на слабом ноутбуке, который теряет кадры, замедляется. Физика не может зависеть от того, как быстро рисуется экран.

Решение простое и проверенное: симуляция идёт с фиксированным шагом, а отрисовка отдельно, с интерполяцией между тиками. Мир обновляется ровно шестьдесят раз в секунду независимо от монитора, а рендерер получает состояние плюс долю шага, чтобы движение оставалось плавным.

gameLoop.js · javascript

let accumulator = 0;
const step = 1 / 60;

function frame(now) {
  accumulator += (now - last) / 1000;
  last = now;

  while (accumulator >= step) {
    world.update(step);
    accumulator -= step;
  }

  renderer.draw(world, accumulator / step);
  requestAnimationFrame(frame);
}

Два игровых цикла

Подход	На быстром экране	На слабом ноутбуке
Цикл, привязанный к кадрам	персонаж летит слишком быстро	персонаж еле ползёт
Фиксированный шаг плюс интерполяция	тот же темп	тот же темп

Столкновения, которые не жульничают

Вторая вещь, которая портит ощущение, - это столкновения. Персонаж должен останавливаться точно на краю плитки, не на пиксель раньше и не на пиксель позже, иначе игрок чувствует, что что-то не так, даже не умея это назвать. Симуляция считает проще, чем кажется: скорость, затем ось X и ось Y отдельно относительно сетки плиток, с коррекцией позиции при столкновении.

Ввод

читаем клавиши один раз за кадр, но передаём их в симуляцию, а не прямо в движение.

Симуляция

фиксированный шаг считает скорость, гравитацию и столкновения с сеткой плиток.

Отрисовка

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

➜

Совет

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

Эффект, который чувствуется в руке

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

Больше проектов

Другие работы из той же категории - посмотрите, как мы решаем похожие задачи.

Есть похожий проект?

Напишите нам - смета бесплатна и приходит в течение часа.