Создание игрового движка в стиле «Героев» на JS

Недавно я предавался ностальгии по школьным годам, когда мы с друзьями собирались для многочасовых сессий в «Героев Меча и Магии III». Как это часто бывало, ни одно сражение не доводилось до логического финала (иллюстрация на эту тему ждет вас ниже), а игроки порой даже не успевали встретиться на поле боя. Именно тогда у меня зародилась идея создать сетевую игру, вдохновленную этой легендарной вселенной. Первоначальный замысел напоминал King’s Bounty: один герой, перемещение по глобальной карте, сбор ресурсов и найм войск перед решающей схваткой. Однако позже я пришел к выводу, что квинтэссенция «Героев» — это именно тактические сражения. Зачем заставлять игрока тратить часы на рутину, если можно сразу дать ему армию? По аналогии с шахматными серверами: вам выдают полный комплект фигур, а не заставляют их добывать. Очевидно, что в подобных проектах львиная доля трудозатрат уходит на визуальную составляющую и графический движок. С этого я и начал, а в данной статье поделюсь текущими результатами и нюансами разработки.

скриншот
скриншот игрового процесса

Текущий прогресс

На данный момент функционирует событийный спрайтовый движок для анимаций, а также реализована логика размещения объектов на гексагональной сетке. К слову о гексагонах: они бывают двух типов ориентации — point-top (углом вверх) и flat-top (гранью вверх). Я выбрал вариант point-top, как в оригинальной серии. Такие сетки делятся на типы odd-r и even-r в зависимости от смещения рядов. Здесь я допустил небольшое отступление от канона, но если истинные фанаты сочтут это критичным — готов переделать.

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

Для удобства разработки я внедрил высокоуровневые функции. Они позволяют оперировать комплексными командами (например, «перейти в точку А и атаковать цель Б»), не углубляясь в микроменеджмент процессов. Механика боя пока упрощена: вероятность уничтожения противника составляет 50%, что служит заглушкой до внедрения полноценных формул урона.

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

Эргономика управления

Одной из приоритетных задач была адаптация интерфейса для сенсорных экранов.

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

Алгоритм атаки унифицирован для всех платформ: сначала выбирается гекс с противником, после чего подсвечиваются доступные позиции для удара. Повторный клик по одной из них активирует действие, а клик в сторону отменяет его. Для крупных юнитов, занимающих две клетки, реализовано разделение гекса на зоны, чтобы исключить двусмысленность при выборе позиции для атаки.

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

Генерация визуальных ассетов

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

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

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

продукт генеративного творчества
Пример артефактов нейросетевого творчества

Планы на будущее

Список предстоящих задач выглядит следующим образом:

  1. Ролевая система: внедрение параметров атаки, защиты, здоровья и формул расчета повреждений. Реализация системы инициативы. В отличие от оригинала, где очередность хода завязана на скорость, я планирую выделить инициативу в отдельный стат (это позволит, например, катапультам ходить первыми при нулевой мобильности).

  2. Информационные плашки: отображение численности отрядов. Выбираю между отрисовкой на Canvas и DOM-элементами (склоняюсь ко второму варианту). Есть идея внедрить наглядные полоски здоровья для упрощения оценки состояния армии.

  3. Интерактивные подсказки: всплывающие окна с характеристиками юнитов при наведении.

  4. Дистанционный бой: разработка анимаций выстрелов и снарядов — от простых стрел до магических лучей, что требует отдельной логики пролета.

  5. Летающие юниты: создание алгоритма полета и корректного наложения слоев (отрисовка поверх наземных войск).

  6. Искусственный интеллект: создание тактического ИИ для одиночного режима и игры при потере соединения.

  7. Многопользовательский режим: архитектура клиент-серверной части уже продумана, а имеющиеся наработки сетевого движка позволят быстро реализовать PvP.

  8. Специфические атаки: реализация удара по нескольким клеткам (как у драконов в ранних частях серии).

В завершение — та самая картинка о судьбе домашних партий из сообщества «Болото троглодитов».

Картинка взята из группы ВК "Болото троглодитов"
Мем, отражающий суровую реальность длинных игровых сессий

Буду рад любой обратной связи: конструктивной критике, предложениям по механикам или сообщениям об обнаруженных багах!

 

Источник

Читайте также