Оффтоп Daria Khokhlova
4 878

Разработчик слотовой игры 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
{ "author_name": "Daria Khokhlova", "author_type": "editor", "tags": ["\u0441\u043b\u043e\u0442\u043e\u0432\u044b\u0435_\u0438\u0433\u0440\u044b","\u0440\u044b\u043d\u043e\u043a_\u0438\u0433\u0440_\u0432_\u0440\u043e\u0441\u0441\u0438\u0438","\u0440\u044b\u043d\u043e\u043a_\u0438\u0433\u0440","\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","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u0438\u0433\u0440\u044b","\u0438\u0433\u0440\u044b","unity","scatter_slots","gamedev"], "comments": 8, "likes": 13, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 12162, "is_wide": true, "is_ugc": false, "date": "Tue, 01 Dec 2015 07:13:16 +0300" }
{ "id": 12162, "author_id": 5723, "diff_limit": 1000, "urls": {"diff":"\/comments\/12162\/get","add":"\/comments\/12162\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/12162"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

8 комментариев 8 комм.

Популярные

По порядку

Написать комментарий...
1

Посмотрел отзывы ваших приложений - в какой-то момент вы все ломаете и пользователи становятся поголовно недовольны - вы не думали ребятам из отдела тестинга поставить правильные KPI?

Ответить
2

Понимаете, это все гемблинг. Всегда есть пользователи, которым меньше везет. Таким людям кажется, что мы специально у них забираем все монетки. Но это не так.
Да и если вы сделаете игру слишком лёгкой, в неё никто не будет играть.
Средний рейтинг тех же Scatter Slots на Google Play и App Store составляет 4.6, что выше всех наших конкурентов. Значит люди довольны игрой.

Ответить
0

Поделитесь пожалуйста ценной информацией по поводу Top Grossing, примерные результаты:

1) Какие нужны показатели, чтобы вообще попасть в Топ ( на 204 место )
2) Какие - попасть выше 150 места
3) Какие, чтобы оказаться около 100 места, если вам известно

Ответить
0

Могу поделиться информацией, которая есть в открытых источниках. Thinkgaming бесплатно показывает свою оценку Top Grossing iPhone в USA. Доступ к информации по другим рынкам и платформам уже за деньги.
Вот ссылка: https://thinkgaming.com/app-sales-data/

Ответить
0

Я имел ввиду про facebook top grossing, о нем нет никаких данных нигде

Ответить
0

его можно открыть просто и посмотреть ручками)

Ответить
0

Я думаю, что вам эта информация ничем не поможет. Трафика из top grossing facebook практически нет, на каком бы месте вы не находились.
Первые места — сотни тысяч долларов в день, top 50 - десятки, дальше по нисходящей

Ответить
0

Я про то, что на тот момент были отзывы - "все сломалось", "игра не запускается", "после обновления слетел прогресс" и т.п.

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "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" ], "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" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "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-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления