Движки-крохотульки

Всем привет!

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

Размер игрового движка — как размер чемодана для космонавта: чем компактнее, тем лучше. Представьте: вы заходите на сайт, кликаете «Играть», а вместо загрузки видите бесконечно вращающееся «колесо». Скорее всего, вы закроете вкладку. Веб-игры живут по законам мгновенного удовольствия: если игра грузится дольше, чем нужно, чтобы заварить кофе, пользователь сбежит.

Например, движок весом в 100 КБ загрузится за 0.1 секунды на 4G, а 5 МБ — за 4 секунды. А теперь вспомните, как часто вы ждёте эти 4 секунды… Для игроков из стран, где интернет дорогой, каждый килобайт на счету.

Среди конкурсов выделяется уникальный формат — Js13kGames. Это ежегодное соревнование, где разработчики создают игры размером не более 13 КБ в ZIP-архиве.

Правила Js13kGames:

Тема 2024 года — Трискайдекафобия (боязнь числа 13). Участники представили 188 игр, которые можно посмотреть здесь.

Для этого конкурса Стивен Ламберт (straker) создал микро библиотеку Kontra.js. Её ключевые преимущества — простота и минимализм.

Игры на движке можно посмотреть по этой ссылке.

Кажется, что в движке есть всё: Animation, Assets, Button, Core, Events, GameLoop, GameObject, Gamepad, Gesture, Grid, Helpers, Keyboard, Plugin, Pointer, Pool, Quadtree, Random, Scene, Sprite, SpriteSheet, Text, TileEngine. Но не совсем. Системы частиц нет, но, используя пул объектов, это легко решается.

Без минусов никуда:

Весь исходный код занимает 7827 строк, но в них входят пустые строки, с одной фигурной скобкой, комментариями и примерами в них. То есть за 1-2 вечера можно полностью изучить исходники движка и пользоваться им, модернизировать.

Следующим движком, на изучение которого уйдёт почти столько же времени это LittleJS. В нём всего 5878 строк кода (с комментариями и всем остальные), но с одной стороны он более продвинутый в плане возможностей по сравнению с Kontra.js, с другой некоторых вещей в нём не хватает.

Всё по порядку... Автор движка является Фрэнк Форс (Frank Force, KilledByAPixel). Разработчик игр и генеративный художник с более чем 20-летним опытом. Он известен тем, что создает цифровое искусство с помощью чрезвычайно маленьких программ и выпустил более 1000 работ. Это исследование привело к другим более крупным проектам, таким как умопомрачительная "Dual Axis Illusion", которая выиграла премию "Оптическая иллюзия года 2019". В прошлом он участвовал в разработке игр Psi-Ops, Starhawk, Doom. Его инди проект Piroot ожидает выхода в Steam в марте этого года.

Игровой движок LittleJS быстрый, легкий. Он использует WebGL для рендеринга, что обеспечивает плавную работу даже на слабых устройствах. Даёт больше пространства для эффектов. Через систему плагинов в одном из примеров реализована постобработка с шейдером. Встроенный простой и быстрый физический движок. Через плагины можно подключить другие (или не через плагины).

Интересно ещё то, что в этот маленький движок добавлена своя "звуковая система". Фрэнк реализовал свою версию утилиты по созданию звуковых эффектов по названием ZzFX. В движок он добавил функции воспроизведения, поэтому можно задавать звуки набором чисел. Например:

// Explosion zzfx(...[2.1,,37,.06,.26,.65,4,.1,,,,,,.8,.6,.5,.45,.3,.12]);

И это не всё. Можно писать музыку в онлайн-трекере/секвенсоре под названием ZzFXM и воспроизводить её в движке. Разумеется у всего это открыт исходный код (ZzFX, ZzFX Music Generator).

Я изучал движок более подробно и писал на нём тестовый проект Пузыри. Код движка довольно простой. Для инициализации необходимо выполнить следующее:

Для создания игровых элементов мы наследуем нужные объекты от класса EngineObject и описываем его «работу». Все созданные таким образом объекты автоматически попадают в массив, объекты из которого, движок рисуем сам.

Какие же минусы я обнаружил:

О последней проблеме чуть подробнее. Как видно в коде, в функции `engineInit` один из аргументом это массив изображений, который будет использоваться в игре. Так вот это единственный способ добавить в игру текстуры. Разработчик и так реализовано в движке, что ты работаешь с текстурным атласом.

В игровых объектах ты указываешь из какого атласа (индексом), какой участок (изображение) ты будешь рисовать. И нельзя удалить, подгрузить новые, просто нет таких функций. Технические, в движке это один массив textureInfos, который и хранит указанные картинки. Легко написать самому пару функций, для его изменения. Но такая реализация от автора.

Пример и игры созданные на данном движке можно посмотреть по этой ссылке. Совсем недавно прошёл джем по движку.

Игровой движок Kaplay (бывший Kaboom.js) из другой весовой категории. Без комментариев, пустых строк и переносов, его размер чуть меньше 200 килобайт. В нём много всего встроено, страдает производительность при большом количестве объектов, но сообщество вместе с разработчиком занимается этим вопросом. Меня он лично заинтересовал своим API. Вот пример кода:

Если посмотреть, то очень легко настраиваются разные объекты, добавляются к ним обработчики. Будто это делаешь просто в конструкторе. Такое легко и простое взаимодействие с движком меня порадовало, когда я делал текстовый проект Пузыри на нём.

Такие интересные игровые движки существуют. А знаете, сколько их ещё? Уууууу...

Спасибо, что дочитали! Удачи! =)