Назад к блогу

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

Fight Me игра

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

Это не первый наш совместный проект. В прошлом году мы сделали корпоративный сайт и завоевали доверие клиента. Поэтому он пришёл к нам снова, но уже с браузерной игрой.

Nekki сайт
Яркая и живая главная сайта Nekki

Nekki запланировала запуск новой игры Fight Me! на платформе Telegram

Мы начали с изучения проекта, чтобы разобраться, кто, как и где будет заходить в игру. Выделили главную особенность — в первую очередь следует делать акцент на Telegram, но не забывать про браузер.

После изучения всех материалов мы приступили к вёрстке. Поняли, что механики в игре не сложные. Как говорит наш разработчик Ваня: «Игра чем-то похожа на коллекционные карточные игры и работает похожим образом, только онлайн».

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

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

Fight Me игра
Так игра выглядит внутри — есть несколько разделов с заданиями, магазинов, друзьями, самой игрой и лидерами

Для скорости использовали React, а для эффектных анимаций — GSAP и Lottie

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

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

Такой результат получился:

Fight me игра

В итоге, у нас получилась динамичная игра с эффектными анимациями

Что сделали:

  1. Подобрали оптимальный стек технологий;
  2. Сверстали интерфейсы игры, придерживаясь компонентного подхода. В будущем клиенту будет удобно развивать игру;
  3. Реализовали логику сценариев и оживили экраны анимациями;
  4. Оптимизировали и повысили производительность игры.

За последний год мы реализовали для клиентов уже более 10 игр — с разными механиками и фишками

Главная особенность игры «Fight me!» — это динамика и стремительность. Поэтому своей задачей видели сделать игру быстрой, отзывчивой и лёгкой, чтобы она не потеряла своё обаяние. Ну а работа с командой Nekki как и всегда — одно удовольствие!

Как сказал клиент: «Работать с Лига А. — одно удовольствие» 👾

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

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