Вёрстка и анимации для браузерной игры Fight me!

В 2024 году к нам пришёл клиент Nekki — кипрская компания с аудиторией в 1 млрд игроков. Они выпустили такие игры, как паркур Vector и все части Shadow Fight. Вторая похожа на Mortal Kombat, только сражаетесь вы командой из 3 бойцов.

Nekki запланировала запуск новой игры, но теперь уже для размещения на платформе Telegram. Нас привлекли для вёрстки интерфейсов, поскольку компания нам уже доверяла и получила хороший опыт работы на первом проекте по созданию их корпоративного сайта.

Мы создали интерфейсы и оптимизировали производительность Telegram-игры в фантастическом сеттинге

Особенность игры, как уже упомянули, в том что играть в неё в первую очередь следует в Telegram. При этом, в браузере открыть её тоже можно и всё будет работать. 

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

На этапе вёрстки от нас требовалось создать все необходимые экраны для каждого события в игре. 

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

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

Нажмите на картинку, чтобы посмотреть, как персонажи дерутся.

По итогам работы над проектом мы:

1. Подобрали оптимальный стек технологий.

2. Сверстали интефрейсы игры, придерживаясь компонентного подохода для дальнейшего удобства развития игры.

3. Реализовали логику сценариев и оживили экраны анимациями. 

4. Оптимизировали и повысили производительность игры.