Создать анимации интерфейса для онлайн-игры (веб)

1 000 руб.за час
06 мая 2021, 14:16 • 4 отклика • 46 просмотров
Задача: для интерфейса игры на странице симуляции боя создать анимации.

Суть проекта: пользователи покупают персонажей и могут выставить их на бой. По итогам боя персонажи растут в опыте и прокачиваются.

Суть боя: пользователь выставляет одного из своих персонажей на бой с персонажами других игроков (нельзя выставить несколько своих персонажей на один бой). Симуляция боя происходит автоматически. Пользователь не может повлиять на исход боя или его процесс, может только смотреть.

Элементы интерфейса, к которым необходимо создавать анимации:
1. Список участвующих персонажей (карточки персонажей)
User actions:
  • посмотреть информацию о персонаже (все 8 abilities + владелец).
  • перейти на страницу персонажа.
  • перейти на страницу владельца персонажа.
  • сделать ставку на персонажа.
2. Поле боя
  • Заставка к началу боя.
  • Заставка таймера до начала боя.
  • Заставка конца боя.
  • Заставка с победителем и статистикой (дамаг за матч нанесенный им/ему, количество убийств, найденный лут).
  • Заставка как улучшаются качества победителя.
  • Выделение для персонажа пользователя.
  • Выделение для персонажа, за которым наблюдает пользователь.
  • Фон на время баттла (космический корабль).
  • Рельеф, с которым взаимодействуют персонажи (прячутся за ним, обходят).
  • Персонажи.
  • Анимация выстрела.
  • Анимация движения по карте.
  • Анимация нанесения урона.
  • Анимация получения урона.
  • Анимация смерти.
  • Единый паттерн для персонажей после смерти (фильтр снижающий насыщенность / ящик-гробик / иные вариации).
User actions:
  • Наблюдать за всем полем.
  • Зумить + двигаться с зумом по полю.
  • Вернуться к своему персонажу.
  • Возможность просмотреть информацию о персонаже по наведению.
3. Онлайн-табло происходящего: нанесённые удары, убийства
Например:
персонаж 1 -> персонаж 2 -100 hp
персонаж 2 -> персонаж 3 -100hp
персонаж 3 -> персонаж 2 -25 hp
персонаж 3 -> персонаж 2 kill
персонаж 1 -> персонаж 3 kill
User actions:
  • Скрыть.
  • Показать персонажа, связанного с действием.
Стек разработки:
Движок: Phaser.js, TypeScript.
Контракты: Truffle, Solidity, Open-Zeppelin.
Сайт: React, Next, WebPack, Web3.

Файлы