HTML5-игра без движка и без фреймворка

Шесть из первых девяти игр на нашей странице игр поставляются без каких-либо зависимостей. Ни движка, ни фреймворка, ни библиотеки на этапе сборки. Самая маленькая, Reefhold, занимает на диске 63 КБ — вся игра, вместе с графикой. Три самые новые сознательно нарушают это правило, и стоит объяснить почему — в обе стороны.

Что на самом деле значит «без движка»

На практике это три вещи: элемент <canvas>, цикл на requestAnimationFrame и каждая фигура на экране, нарисованная кодом, а не загруженная картинкой. Нет ни графа сцены, ни entity-component system, ни пайплайна ассетов. Спрайт — это функция, которая принимает контекст и несколько чисел и пару раз вызывает fillRect.

Звучит примитивно, потому что так и есть. Но именно поэтому Reefhold загружается раньше, чем вы дочитаете её название.

Три вещи, которые придётся написать самому

Движок даёт их бесплатно. Без движка это первые три файла, которые вы пишете, и в каждой игре это одни и те же три файла:

• Цикл с фиксированным шагом. requestAnimationFrame даёт дельту по реальным часам, а не тик. Если двигать объекты прямо на эту дельту, игра ведёт себя по-разному на ноутбуке с 60 Гц и на мониторе со 144 Гц, и физика, которая на тестах ощущалась правильно, в реальности начинает чудить. Решение — копить реальное время и продвигать симуляцию фиксированными шагами, а рисовать интерполяцию между двумя последними.
• Ввод, одинаковый для тача и клавиатуры. Половина трафика — телефоны. Игра, которая читает только keydown, для этих людей неиграбельна, а игра, где тач обрабатывается особым случаем повсюду, — это вдвое больше кода. Мы сводим оба источника к одному маленькому объекту «намерения» (направление и набор зажатых действий), и вся остальная игра читает только его.
• Звук, который переживает политику автовоспроизведения. Браузер не даст проиграть звук, пока пользователь не взаимодействовал со страницей. Если создать AudioContext при загрузке, он стартует в приостановленном состоянии и уже не оживает. Создавайте его на первом событии указателя или клавиши и привязывайте к этому все последующие звуки.

Это примерно 150 строк, которые без изменений переходят из игры в игру.

Что это даёт

• Сборку, к которой у портала не бывает вопросов. У курируемых порталов жёсткие ограничения по размеру, и всё, что выше, отклоняется без права на апелляцию. Игра на 63 КБ — даже не тема для разговора.
• Мгновенную первую загрузку, а на мобильном интернете это разница между игроком и отказом.
• Нечего лицензировать. Когда кто-то хочет лицензировать одну из этих игр, не нужно зачитывать ему стороннюю лицензию, прикладывать файл с атрибуцией или говорить «ну, оно зависит от Phaser, а Phaser под MIT, но…».

Где проходит граница

Scrapforge, ScaleSling и Husktide сделаны на Phaser, и для всех трёх это было правильное решение. Scrapforge и ScaleSling нужен настоящий физический солвер, а 2D-солвер ограничений — не то, что стоит заново писать плохо. Husktide выводит на экран сотни сущностей одновременно и опирается для этого на текстурный атлас и настроенный рендерер.

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

Размеры всех игр опубликованы на странице лицензирования, если нужны точные цифры.