{ "google": "UA-81119751-1", "yandex": "38620795", "gtm": "GTM-NDH47H" }
{ "author_name": "Редакция DTF", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 0, "is_advertisement": false, "is_pro": true }
Редакция DTF
3 516
pro

Разработчик слотовой игры Scatter Slots о создании проекта с помощью технологий Unity и WebGL

Платформа для разработки Unity вместе с vc.ru публикует истории разработки игровых проектов, созданных на базе популярной технологии. Расскажите о своём кейсе, чтобы попасть в рубрику.

Сегодня в выпуске — рассказ технического директора игровой компании Murka Анатолия Гениса о разработке культовой слотовой игры Scatter Slots на Unity и WebGL.

Murka — это слоты

Murka была основана в 2011 году. Первая выпущенная нами игра Slots Journey сразу же сорвала овации пользователей и надолго закрепилась в топах мобильных магазинов. Однако мы понимали, что успех одного проекта должен найти логичное продолжение в новых продуктах. Так появилась идея хардкорных слотов для мужской аудитории — Scatter Slots, которые и стали нашим первым проектом на Unity.

Предыстория

Scatter Slots были запущены в декабре 2014 года. От идеи до софт-лонча на iOS прошло всего три месяца. Уже в апреле игру увидели пользователи Android. А недавно список мобильных платформ пополнила Amazon Fire OS.

Первые трудности появились, когда пришло время релиза Scatter Slots на веб-платформы. Так как в компании уже был опыт запуска тестового проекта на Unity WebPlayer, мы имели представление о главных подводных камнях:

  • проблемы с быстродействием;
  • проблемы с корректным отображением графических элементов;
  • низкий уровень конверсии кликов в установки из-за необходимости загрузки Unity Web-Player, что делало большинство источников трафика нерентабельными.

В добавок ко всему, Google заблокировал NPAPI (Netscape Plugin Application Programming Interface, программный интерфейс подключаемых модулей) в Chrome. Так как Chrome является основным браузером для подавляющего большинства нашей аудитории, вариант реализации игры на Unity WebPlayer был сразу отброшен. Так было решено использовать WebGL.

И понеслась…

В целом на разработку web-версии со всеми оптимизационными моментами ушло около месяца.

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

Scatter Slots изначально рассчитаны на возможность прохождения в режиме офлайн при помощи синхронизации данных игрока с сервером. Однако в случае с веб пришлось перенести часть логики на сервер, так как хранить данные на компьютере пользователя на данный момент невозможно (из-за дополнительных мер безопасности, которые применяют браузеры к исполняемому контенту из iframe).

Следующим нашим шагом был пересмотр каждого этапа запуска игры и замена всех обращений к файловой системе (что было незаменимой частью офлайн-режима в мобильной версии) на обращения к серверу.

Логику работы с AssetBundle (ресурсами) оставили абсолютно такую же, как и на мобильных устройствах. Единственным отличием было то, что скачанные ресурсы кешировались браузером, а не сохранялись на диске. Максимальный размер одного скачиваемого ресурса уменьшили до 10 МБ, чтобы все поддерживаемые браузеры точно закешировали его.

Как только мы разобрались с последствиями переноса офлайн-логики на сервер и закачкой и хранением ресурсов, наша цель приблизилась на расстояние вытянутой руки. Мы увидели лобби игры и даже смогли зайти в слот. Особенно порадовало, что благодаря оптимизированному рендерингу Unity для WebGL, быстродействие и производительность игры были на уровне, даже несмотря на использование шейдеров, которые требуют довольно много вычислений.

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

В браузере же это было логичным и необходимым исправлением.

Решение нашлось быстро — всего пять строчек кода на JavaScript, и в игре появились полноценные и понятные кнопки. В этом нам немало помогло то, что взаимодействие с JavaScript происходит напрямую. Это очень упрощает создание небольших методов для взаимодействия Unity (WebGL) с «окружающей средой».

Особенно много времени было потрачено на работу с анимациями. В Scatter Slots используется огромное количество крупных фреймовых анимаций, которые стали некорректно отображаться из-за проблем с памятью.

Некоторое время попытки найти оптимальное решение были тщетны. За поддержкой обратились к Unity Support, которые посоветовали сжать проблемные анимации методом Crunch, добавленным в Unity 5.1. Это дополнительно уменьшило размер атласов (коллекций спрайтов) в два раза с незначительной потерей качества (до 10-15% от исходного). Как результат, мы смогли оптимизировать анимации более чем в четыре раза, и они стали работать так же стабильно и качественно, как и на мобильных версиях приложения.

Что имеем

В сентябре Scatter Slots на WebGL были выпущены на Facebook.

Графика (а это наша особая гордость) на мониторах выглядит просто шикарно. Игра работает быстро и стабильно. Как результат и главное выражение пользовательской любви — через две недели после релиза Scatter Slots прочно закрепились в Top Grossing на Facebook.

Удалось оптимизировать и воронку установки.

При первом запуске пользователям не надо загружать дополнительный плагин, что увеличило конверсию кликов в установки на 20% по сравнению с предыдущим опытом c WebPlayer.

Безусловно, время первой загрузки всё ещё оставляет желать лучшего, ведь всегда хочется ещё быстрее. Пока что решаем эту проблему лендингом, но с каждой новой версией Unity наши пользователи ждут запуска игры на несколько секунд меньше.


Если вы работаете на технологии Unity, хотите рассказать о своём опыте разработки или задать вопрос экспертам — оставьте заявку нашим менторам с помощью специальной формы.

Популярные материалы
Показать еще

Комментарии Комм.

Популярные

По порядку

Прямой эфир

Узнавайте первым важные новости

Подписаться