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

скриншот
скриншот

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

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

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

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

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

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

Управление

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

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

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

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

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

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

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

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

продукт генеративного творчества
продукт генеративного творчества

Что дальше?

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

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

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

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

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

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

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

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

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

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

Картинка взята из группы ВК "Болото троглодитов"
Картинка взята из группы ВК "Болото троглодитов"
Ссылка на проект

Проект выложен на итч: https://titanplayers.itch.io/heroes

И на обычный хостинг для статики, netlify: https://nheroes.netlify.app/

Лучше даже смотреть на netlify, на itchкак-то странно работает на мобилках и это я ещё отключил флаг «mobilefriendly», с ним вообще на мобилках не запускается. Если есть какие-то идеи как это поправить – пишите.

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

Комментарии (22)


  1. MountainGoat
    28.03.2026 14:59

    • Наколхозили собственную графику, вместо того, чтобы взять CT.JS.

    • Использовали для генерации спрайтов худший вариант ИИ.

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

    • Нет нормального MVP, но вы размышляете, драконам дышать на одну или на две.


    1. azTotMD Автор
      28.03.2026 14:59

      Возможно, попробую другие генераторы или найму человека.

      Кнопки такой не будет, ведь если команда уйдёт на сервер её уже не отменить. Если есть совет как сделать удобнее - пишите.


      1. MihaOo
        28.03.2026 14:59

        Отменить можно, только это надо закладывать в архитектуру сервера. К примеру, вот (бизнес) правило:

        Можно отменить последнюю команду игрока, если не прошло N секунд и любой другой игрок не сделал никаких действий

        А на сервере используете паттерн Command и, возможно, Memento, потому что хотя бы последнюю команду надо запоминать что бы отменить. Вообще обычно запоминают достаточно большое количество команд, которые так или иначе привели объект в текущее состояние. Так, например, работает undo в текстовых редакторах и процессорах.

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


        1. azTotMD Автор
          28.03.2026 14:59

          Про паттерны интересно, посмотрю, спасибо. Вряд ли я их буду реализовывать, но информация ценная.


  1. muxa_ru
    28.03.2026 14:59

    https://playclassic.games/games/turn-based-strategy-dos-games-online/play-heroes-might-magic-online/ - прям реальные первые Герои в браузерном ДосБоксе :)


    1. azTotMD Автор
      28.03.2026 14:59

      а как играть с другими людьми?


      1. muxa_ru
        28.03.2026 14:59

        В режиме "Другие люди сидят за спиной игрока и кричат ЛОШАДЬЮ ХОДИ".

        Играть в пошаговую игрушку с другими людьми это лютый изврат, которым я последний раз занимался лет 20 назад.


        1. azTotMD Автор
          28.03.2026 14:59

          я склоняюсь к тому, что нужно ограничение на время хода


      1. muxa_ru
        28.03.2026 14:59

        А вообще, вы не поверите. С другими людьми играть так же как 30 лет назад. Меняясь у монитора :)


        1. azTotMD Автор
          28.03.2026 14:59

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

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

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


  1. gsaw
    28.03.2026 14:59

    Я тоже начинал делать игрушку похожую, с нуля, и пару раз даже, и почему то тоже начинал с интерфейса, отрабатывал ходы и прочее. Было интересно и весело. А потом как дело заходило про внутренности игры, экономику, характеристики героев и прочую такую нудятину, то все постепенно порастало травой.

    Вы главное держитесь там, не задавайтесь.


    1. azTotMD Автор
      28.03.2026 14:59

      Спасибо большое за поддержку!

      Да, тяжело делать что-то нудное. Но для меня как раз графическая часть кажется наиболее нудной. Остальное должно пойти пободрее.


  1. azTotMD Автор
    28.03.2026 14:59

    Сорри, ссылку на проект на потыкать то я не прикрепил. Сейчас добавил в статью и здесь продублирую:

    на itch.io: https://titanplayers.itch.io/heroes

    на netlify: https://nheroes.netlify.app/

    Лучше даже смотреть на netlify, на itch как-то странно работает на мобилках и это я ещё отключил флаг «mobile friendly», с ним вообще на мобилках не запускается.


  1. Metotron0
    28.03.2026 14:59

    Я как-то раздумывал про то, как расположены оси координат на гексагональной карте. У вас как сделано? Я тогда придумал, что одна ось идёт как обычно, у вас это была бы горизонтальная, а вторая — под 60°, перпендикулярно соседней стороне. Правда, тогда, у гекса на 120° координата будет считаться как (x - 1; y + 1), а у противостоящего ему — (x + 1; y - 1). Немного неочевидная сетка выходит. Может, удобнее расставить гексы по клеткам, а потом ряды через один сместить вбок? Но тогда движение на 120° всё равно будет не самым логичным, что-то типа (x - 1; y - 1) для "влево вверх" и (x; y - 1) для "вправо вверх".


    1. azTotMD Автор
      28.03.2026 14:59

      про гексагональные сетки есть хороший сайт https://www.redblobgames.com/grids/hexagons/.

      Суть в том, что там вводится дополнительная фиктивная координата и те пересчитываются в обычные x,y. Там есть все формулы, правда не сказано, что ещё нужна поправка, если мы хотим в каждом ряду отсчитывать с нуля, но её легко вывести из наблюдений.

      Если же просто по быстрому перебирать соседей отталкиваясь от x,y, то нужно использовать смещения координат для четных и нечетных рядов.


  1. alexandr93
    28.03.2026 14:59

    А как же HOMM 5 RTA?) Там тоже игра заключается в том, что у игроку на старте дают кучу опыта и денег, нужно просто закупить армию и провести одну битву с таким же игроком-человеком)


    1. azTotMD Автор
      28.03.2026 14:59

      ну вот типа такого, только в браузере


  1. Jijiki
    28.03.2026 14:59

    ртс(стратежка по клику с ресурсами) или рпг(движения по клику в реал тайме) тоже интересная концепция, недавно смотрел как это работает, щупал на С/XML/Lua(с нуля)... успехов вам


    1. azTotMD Автор
      28.03.2026 14:59

      спасибо!


  1. Vileon022
    28.03.2026 14:59

    Я чёт вспомнил, раньше помню муж сестры играл в браузере Герои войны и денег


    1. azTotMD Автор
      28.03.2026 14:59

      да, такого донатного добра полно

      p.s. судя по всему, это рекламный бот-коммент


  1. azTotMD Автор
    28.03.2026 14:59

    Добавил бары с количеством и с индикацией текущего здоровья.

    Добавил свойства мин и макс урон, заменил заглушку атаки на нанесение урона в диапазоне с учетом кол-ва

    скрин