[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Daria Khokhlova", "author_type": "self", "tags": ["\u0440\u044b\u043d\u043e\u043a_\u0438\u0433\u0440","gamedev","\u0438\u0433\u0440\u044b","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u0438\u0433\u0440\u044b","\u0440\u044b\u043d\u043e\u043a_\u0438\u0433\u0440_\u0432_\u0440\u043e\u0441\u0441\u0438\u0438","unity","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430_\u043d\u0430_unity","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430_\u0432_unity","\u0440\u0430\u0431\u043e\u0442\u0430_\u0441_unity","scatter_slots","\u0441\u043b\u043e\u0442\u043e\u0432\u044b\u0435_\u0438\u0433\u0440\u044b"], "comments": 8, "likes": 13, "favorites": 3, "is_advertisement": false, "section_name": "default", "id": "12162" }
Daria Khokhlova
4 533

Разработчик слотовой игры 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, хотите рассказать о своём опыте разработки или задать вопрос экспертам — оставьте заявку нашим менторам с помощью специальной формы.

#Рынок_игр #Игры #мобильные_игры #рынок_игр #рынок_игр_в_России #Unity #разработка_на_unity #разработка_в_unity #работа_с_unity #scatter_slots #слотовые_игры

Статьи по теме
Разработка игровой карты War Commander: Rogue Assault на движке Unity — рассказ одного из разработчиков игры
Руководитель игровой студии Krivorukoff об истории компании и проекте Real Tank Battle — танковой игре «в реальном мире»
Оптимизация сцены и работа со светом в Unity 5 — советы 3D-художника студии Rammen Speed
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

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

0 новых

Популярные

По порядку

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления