Сайт для онлайн-игры Decimated

Разработали сайт для многопользовательской научно-фантастической онлайн-игры.

Клиент

Компания Fracture Labs появилась в 2018 году, чтобы создать онлайн-видеоигру с экономикой, основанной на блокчейне. Разработчики, которые создавали ААА-проекты в Bioware, Ubisoft, Crytek и Cloud Imperium Games, объединились с экспертами по блокчейну из Skycoin, Zynga и Electronic Arts — и начали работать над Decimated.

Decimated — это многопользовательская научно-фантастическая онлайн-игра на выживание, которую команда разрабатывает на Unreal Engine 4 (а с 2022 года на Unreal Engine 5). Для управления внутриигровыми транзакциями используется технология блокчейна. Цифровой токен называется ÐIO, его можно заработать или найти в игре, использовать для покупки, продажи или обмена виртуальными предметами.

Задача

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

презентовать игру: графику, геймплейные механики, лор;
набирать подписчиков в Discord, Twitch, Telegram, Twitter, вишлисты в Steam;
набирать подписчиков для email-рассылки;
сообщать пользователям официальные новости проекта;
привлекать соискателей на вакансии;
помогать игрокам решать их проблемы.

Решение

Fracture Labs анонсировали игру в 2018 году, а в январе 2022 должна была состояться презентация альфа-версии Decimated. К этому событию клиент хотел запустить новый сайт и обратился к нам, так как текущий на Wordpress устарел и долго загружался.

Так как сайт нужно было сделать быстро, мы предложили сначала запустить главную страницу и постепенно доработать остальные. Выбирали между реализацией на Tilda и Laravel, клиент предпочел последний: среди западных разработчиков этот фреймворк очень популярен.

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

Илья Глаголев

Разработчик

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

Референсы

Работа над проектом проходила в несколько этапов. Сначала мы обсудили референсы клиента и подготовили свои предложения в части стилистики и визуальных эффектов. На основе этого сделали мудборд в Figma.

Мудборд — отправная точка для поиска нужного стиля. Мы обсудили с клиентом палитру, формы, эффекты, общее настроение, которое должен передавать сайт, и приступили к следующему этапу — концепции.

Дизайн-концепция

Когда мы искали форму элементов на сайте, хотели отойти от классического для sci-fi игр «среза под углом». В результате пришли к непривычным скругленным внешним углам и строгим внутренним срезам. Такая форма напоминает секции гусеничных траков — ее можно увидеть на кнопках, подложках отдельных блоков, масках для видеороликов.

Так как игра Decimated в сеттинге сай-фая и постапокалипсиса, мы взяли характерные черты от обоих и совместили тонкие неоновые линии и гранжевые текстуры поверх изображений.

Прототипирование

После того, как мы согласовали концепцию в цвете со всеми основными элементами, начали верстать интерактивный прототип.

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

Визуальные решения

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

Кроме того, настроение проекта помогают передать не только тексты и картинки с видео, но и визуальные эффекты — как этот глитч при скролле.

Работая над финальным дизайном, мы взяли за основу понравившиеся клиенту цвета Doom, но ушли в сторону более контрастного решения, добавив к нему дополнительные полупрозрачные оттенки. При выборе шрифта учитывали два момента: сочетание с текущим логотипом Decimated и хорошая читаемость при любом размере кегля.

На главной странице можно познакомиться с ролями в игре и прочитать досье на каждого персонажа.

На сайте реализован полноценный раздел с вакансиями: их можно отфильтровать по направлению, развернуть интересующую и откликнуться через встроенную в сайт форму.

Маленькая, но важная для эстетики проекта деталь — курсор в форме подписки стилизован под старый «зеленый» компьютерный терминал.

Деплой

Обычно мы сами выкладываем сайт на сервер, но клиент попросил установить процесс автодеплоя CI/CD. Поэтому мы написали подробную инструкцию по разворачиванию и некоторое время плотно общались с разработчиком клиента. Он развернул сайт и настроил CI/CD с помощью Jenkins.

Так как сайт сделан на Laravel, клиент может добавлять новые страницы в рамках динамических разделов: например, новости, дополнительные роли, вакансии. Это легко сделать через админку — ее разработчик настраивает под себя сам.

Мы продолжаем работать с Fracture Labs в рамках техподдержки. Когда у клиента возникают вопросы, он пишет нам, и мы все решаем. В планах — интегрировать сайт с маркетплейсом, которым занимается другой подрядчик.