Геройский движок на javascript

Как-то я вспоминал, как будучи школьником мы частенько собирались, чтобы поиграть в третьих героев. Как вы понимаете, ни одна из этих партий не только не доводилась до конца (про это будет картинка в статье), но и даже не доходила до битвы между игроками-человеками. И тогда ко мне пришла идея реализовать сетевой вариант игры по мотивам героев. Изначально задумка была сделать что-то типа Kings Bounty: у игрока один герой, он ходит по карте, подбирает сундуки, нанимает отряды и, наконец, находит другого игрока на карте и бьётся с ним. А потом я подумал, ведь самое интересное в героях – это тактические бои, почему бы сразу не предоставить игроку армию? Ведь на шахматных серверах людей не заставляют добывать фигуры, а сразу выдают полный комплект! Мне кажется, что в подобных проектах самая трудоемкая часть – это графика и графический движок. Поэтому я начал работу именно с этой части, а в статье расскажу про текущее состояние и немного моментов разработки.

Текущее состояние

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

Работает движение по полю, подсветка доступных гексов, анимации атаки, получения урона и смерти. Тела падших воинов остаются на поле. Всё это ресайзится при необходимости, в том числе при повороте экрана.

Написаны высокоуровневые функции, которые позволяют сразу выполнить агрегированные команды типа сходить туда, атаковать такого-то, не думая о деталях реализации. Вместо самой атаки пока стоит заглушка – враг погибает с вероятностью 50%.

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

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

Управление

Одна из целей проекта – сделать управление доступным и на мобильных устройствах.

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

Для атаки алгоритм одинаковый на всех устройствах: сначала кликнуть на гекс в врагом (гекс, не спрайт), после чего будут подсвечены гексы, с которых возможна атака, клик на один из них активирует атаку. Клик в другое место – сбрасывает атаку. Если атакующий юнит шире одной клетки, в тех случаях, когда положение атаки неоднозначное, гексы делятся на две половинки.

Пока писал, сообразил, что можно по второму клику на гекс с врагом отдавать команду атаковать с ближайшего гекса, это добавит удобства?

Генерация изображений

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

Из наиболее типичных глюков – не умеет чередовать ноги. Всегда впереди только одна какая-то. Те анимации, где чередование происходит – я вручную допиливал. А вот с оружием обратная проблема: может заметили, что эльф-всадник перекидывает меч из одной руки в другую. Много работы вида вырезать кусок спрайта, повернуть его на какой-то угол, пришить к другому куску, замазать швы. Кое-где это получилось сносно, кое-где «нитки» торчат.

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

Что дальше?

Кратко перечень работ:

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

2. Прямоугольники с количеством юнитов. Думаю, рисовать их на канве или сделать дом-элементами. Пока склоняюсь ко второму варианту. Есть мысль сделать их полоской здоровья, чтобы сразу было видно юнитов, которых легко доковырять. Опять же в классических героях этого нет, но думаю было бы удобно.

3. Всплывающие инфа о юнитах при наведении на них. Не знаю пока, насколько это актуально.

4. Стреляющие юниты. Опять добавочные анимации. Плюс анимации снарядов, в героях очень много вариантов: стрелы, камни, лазерные лучи. Всё это не так просто реализуется.

5. Летуны. Опять же отдельный алгоритм для анимации полёта, кажется их нужно рисовать поверх остальных юнитов.

6. Искусственный интеллект ^[2] для тактических боёв – на случай, если других игроков пока нет или потеряна связь с сервером.

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

8. Сквозная двухгексовая атака. Такая как у драконов или циклопов во второй части (возможно и в первой, но я уже не помню).

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

Не стесняйтесь: пишите комментарии, советы, размышления, пожелания, сообщайте о багах!