Пишете крутые статьи? Публикуйте их в Workspace Media, бесплатно!
Лига А.
Вёрстка и анимации для браузерной игры Fight me!
Лига А.
#Программирование игр

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

40 
24 янв 2025 в 4:58
Лига А.
Лига А. Россия, Санкт-Петербург
Поделиться:
Вёрстка и анимации для браузерной игры Fight me!
Клиент

Nekki Limited

Сфера

Развлечения

Регион

Кипр, Limassol

Сдано

Январь 2025

Задача

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

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

Решение

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

1Вёрстка интерфейсов

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

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

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

2Логика и оптимизация

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

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

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

Результат

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

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

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

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

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

Комментарий агентства

Елизавета Фелюгина
Елизавета Фелюгина

Генеральный директор (CEO)

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

Отзыв клиента

Римма Мелкумян
Римма Мелкумян

Директор

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

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

скан отзыва
https://t.me/fightme_gamebot

Стек технологий

  • CSS CSS Язык программирования
  • HTML HTML Язык программирования
  • JavaScript JavaScript Язык программирования
  • Next.js Next.js Фреймворк/библиотека
  • React.js React.js Фреймворк/библиотека
  • Visual Studio Code Visual Studio Code Среда разработки
  • Figma Figma Графический редактор

Над проектом работали:


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Лига А. с удовольствием обсудит вашу задачу

Оставить заявку