Забудь про лето или клон Homm3 в браузере
В рамках финального таска для The rolling Scopes нами была выбрана игра Heroes Might and Magic 3. О чем мы позже очень-очень сильно пожалели, но деваться было уже некуда! Мы плотно закупились кофе, включили lofi hip hop radio и приняли свою судьбу.
Нам сразу же предоставили крутейшего ментора Дмитрия Райчева, который готов в любое время почикать вопросики по поводу проекта с нами. При первом созвоне с ментором, мы сразу обсудили структуру проекта и из чего он будет состоять. Ментор собрал нам вебпак проект, а мы отсекли тяжелые фичи для реализации(через месяц разработки они были не такие уж и тяжелые)и, полные мотивации и интереса, мы начали творить свой проект с нулевым пониманием движка Phaser 3...
Карта
Первая сложность возникла, как только мы приступили. Пришлось с нуля изучать незнакомый для тебя ранее движок Phaser 3. Встал ребром вопрос аля "Как замутить коня, который бегает по карте" через страшные для новичка в этом деле"preload, create, update". Пошустрив интернетик в поиске ответа на вопрос "Как парсить карту homm3 из форматаh3m в json", было круто, когда на одном из форумов нашли похожий вопрос. Мы обрадовались, какой то парень написал, что он пишет Герои 3 в браузере на файзере и задал вопрос про парсинг карты. Мы уже подумали, что есть готовый код и работа будет значительно легче. Однако, парень это написал два года назад и ему никто не ответил. А еще глянули, что он оставил только один пост и все, похоже забросил... (понимаю почему).
Ничего лучше, чем в лоб ее рисовать, мы не придумали. Первым делом нужно было отрисовать карту в оригинальном редакторе карт.
И на выходе этот формат должен был как то попасть в Tilemap в качестве тайла. Это должна быть одна большая картинка
Нужно было делать очень и очень много скринов, т.к редактор не может мне выдать полностью картинку, а позже эти картинки склеивать в фотошопе по 12 штук
По итогу появился такой монстр и пригрозил убить мой кампуктер, если я его не уменьшу. Потом заливаешь это в Tiled, где по квадратикам, типа мозайки, собираешь всю карту. Самих тайлов (квадратиков) получается больше нескольких тысяч. Аккуратненько переводишь квадратики на новый образ. На выходе мы получаем файл с форматом JSON и пикчу PNG, с которыми пришлось еще пару часиков поиграться, что бы понять как поставить на движок.
8 строчек кода стоили 4 дней отрисовки, продумавания и страдания. Collied означет, что персонаж не может ходить на те тайлы. Но, все же, карта была готова (хоть финальная и была шестым написанным вариантом)
Конь бегает
Для начала нужно было создать спрайт главного героя и посадить его на карту. Сам спрайт коня пришлось брать в гугле, вырезать и залипать в программу "TexturePacker". Самое главное - это выбрать внешность персонажа, прическу, коня, как в симсах. По выходу мы получем опять Json формат, который порезан на frames и png. Дальше встает вопрос, а как ходить, если нашему ребеночку всего 3 недели?
Пришлось такими способами искать нужный градус поворта персонажа и в этот момент должна была отыгрывать определенная анимация. Сам ход просчитывал тайлы на карте(да, те самые квадратики, которых очень много) Дальше уже ловкость рук и работы с 30 фреймами.
Вот таким способом задавалось движение коня по полю
И так, наш конь может ходить и видит карту. Супер, можно сдавать проект? Ага, почти. Теперь нужно реализовать bad boys и своих братков, а, если быть точнее, нарезать овермного спрайтов анимации хождения, анимации удара. Собралась внушительная папочка спрайтов.
Да, этой пикчей можно почувстовать боль того, кто вырезал все эти спрайты по одному в фотошоп, затем закидывал в текстур пакер, заливал в проект и прописывал фреймы в стейт и собственный json юнита
Точно, я же забыл. А что там по стейту?
Вся игра состоит из нескольких конфигов, которые следят за тем, что ничего в игре не может бахнуть без их ведома. Делятся, по сути, на три главных. Стейт боя, где сохранены параметры, анимации "бей палкой по голове" твоих ребят и "не твоих берят". Стейт мира, где находятся координаты и параметры всего, что происходит на главной карте игры. Личный стейт игрока, который смотрит за уроном, ходами, парнями в инвентаре.
На самом то деле, в игре очень много разных фичей и проблем, которых они требовали. Синхронизация, переход между сценами, модалками. Работа с видео и аудио, все ассеты, проходили через твердую руку фотошопа. Реально пришлось одновременно с видосами по файзеру, смотреть видосики по фотошопу. В копилочке скиллов новый пункт. Да вообще сам сайт, на котором вы находитесь связан с игрой React Router и написан в связку сo styledComponents. Больше подробной информации вы можете найти отдельно в наших видео.
Если остались какие то вопросы, которые не дают вам покоя, можете спокойно спрашивать. Ах да, надеюсь, концовка вам понравилась, мы вложили в нее душу...