Как Coatsink сократил время загрузки веб-страницы для Ready, Set, Cook! на 25%

На старт, внимание, готовь! - это кооперативная игра по управлению рестораном для Messenger, созданная Coatsink, студией, стоящей за Jurassic World Aftermath и Трансформеры: Battlegrounds. Вот что они узнали во время своего первого погружения в разработку мобильных веб-приложений.

Как студия переносит игру, предназначенную для Messenger Rooms, с настольного компьютера на мобильное устройство?

На старт, внимание, готовь! изначально была создана как настольная веб-игра, где игроки присоединяются к видеозвонкам со своих ПК или ноутбуков. Пока Coatsink переориентировала разработку на мобильные устройства, они сотрудничали с Meta и Unity, у которых было существующее стратегическое партнёрство для запуска среды выполнения на мобильных устройствах. Это одно из основных обновлений Unity Web в предстоящем выпуске Unity 6, который также включает добавленную поддержку WebAssembly 2023, ранний доступ к WebGPU и добавление инструментальной цепочки Emscripten 3.1.38. В следующем году разработчики игр смогут воспользоваться огромной игровой экосистемой Meta с поддержкой платформы Instant Games от Unity.

Тестирование новой платформы

«Моя любимая вещь в Готовься, на старт, готовь! — это минимальное время от клика до игры.» Вы на видеозвонке в Messenger, и, нажав кнопку, все оказываются в Lobby, а затем сразу в игре. «Нет никакой настройки», — говорит Росс Фурмидж, глава программирования Coatsink.

Поскольку это был первый раз, когда Coatsink создавал веб-игру, целью было попытаться максимально использовать рабочий процесс платформы. Они рассматривали это как проект НИОКР для анализа жизнеспособности платформы и их силы в разработке мобильных веб-приложений.

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

«Мы создали и сбалансировали игру вокруг аспекта Multiplayer и веселья с Friends в видеозвонке», — объясняет Фурмидж. «Когда мы углубились в проект, мы столкнулись с общими проблемами для игр, переходящих с настольных компьютеров на мобильные устройства.» Нам пришлось сосредоточиться на пользовательском интерфейсе, и, в частности, для веба, нам пришлось учитывать время загрузки через мобильные данные, так как нет гарантии, что игрок подключен к Wi-Fi.

Результаты

• Сократил время загрузки игры на 25%
• Уменьшен размер файла WebAssembly (Wasm) на 2,5%
• Сократил время передачи и распаковки игры на 10%

Создание динамической ориентации пользовательского интерфейса

Когда команда Coatsink начала проект, они быстро поняли, что им нужно учесть множество факторов для пользовательского интерфейса. С самого начала они были обеспокоены тем, чтобы как игроки, так и пользователи видеозвонков, не участвующие в игре, могли участвовать. Им нужно было усовершенствовать существующую функцию наблюдения, которая постоянно удерживает игроков в сети, предлагая другим пользователям положительный опыт просмотра.

«Опыт наблюдения всегда был для нас на первом месте при разработке других аспектов игры», — объясняет Камиль Базидло, младший дизайнер в Coatsink. «Это не является общей чертой для всех жанров игр на других платформах, но поскольку игроки находятся на видеозвонке, было важно подчеркнуть инклюзивное участие пользователей на протяжении всей игры.»

Они также начали рассматривать ориентацию экрана на раннем этапе. Поскольку игра изначально была создана для настольных компьютеров, она была разработана в альбомной ориентации. Когда они перешли на мобильные устройства, им пришлось поддерживать как альбомную, так и портретную ориентации. В Messenger игроки держат свои экраны как телефон, так как они находятся на видеозвонке, поэтому если телефон повернуть, камера становится боком, что не идеально. «Это было важным фактором, когда мы разрабатывали среды, чтобы поддержать это», — говорит Фурмидж.

Переосмысление управления в играх

На старт, внимание, готовь! можно играть на самых разных устройствах с различными размерами экранов и соотношениями сторон, но игровое окно не растягивается на весь экран, так как оно выделяет место для таких элементов, как видеопоток Meta и элементы управления платформой. Это не часть самого игрового приложения, поэтому они не отображаются в Unity Editor, когда разработчики работают над игрой.

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

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

Когда игра была мягко запущена в США, команда встроила Analytics непосредственно в приложение, что было ключевым моментом для определения, когда игроки выходили из игры. На раннем этапе они заметили, что пользователи прекращали использование, даже не дождавшись загрузки игры.

«Мы заметили, что когда меню было немного загруженнее и его переход в игру занимал слишком много времени для пользователей в Lobby, они быстро отключались.» Как только они вошли в игру, большинство игроков продолжили играть в нее полностью," - говорит Фурмидж. «Это были важные данные для нас, и аналитика сыграла большую роль во многих наших решениях.»

Оптимизация времени загрузки

Аналитика Coatsink показала, что если размер файлов игры слишком велик и загрузка занимает слишком много времени, пользователи покинут игру до того, как доберутся до главного меню или игрового процесса.

Разработчик Coatsink Андрей М. сосредоточился на уменьшении размера файла, используя параметры внутри Unity Build Settings. Например, он установил настройку оптимизации кода на размер диска с LTO, использовал формат сжатия Brotli, установил генерацию кода IL2CPP на более быстрые (меньшие) сборки, установил уровень управления стриппингом на высокий и многое другое. С этими оптимизациями для веба команда смогла значительно сократить время загрузки.

Затем они использовали инструмент Unity для WebAssembly (Wasm), который удаляет неиспользуемые части движка Unity и выводит оптимизированный файл .wasm. Уменьшив размер этого файла, на устройстве в момент выполнения было меньше данных для сжатия, передачи и распаковки. «Таким образом, пользователь сразу попадает в игру, как только завершает загрузку информации», — объясняет Фурмидж.

Эти практики оптимизации игр привели к уменьшению на 4 МБ, что соответствует общему снижению на 2,5% в файле Wasm. Это привело к экономии 10% как на время передачи, так и на время распаковки. Хотя 4 МБ может показаться небольшим, в общем масштабе это оказало большое влияние на игру, работающую в мобильных браузерах.

Уменьшение размера файла

Чтобы уменьшить размер файла, команда Coatsink использовала AssetBundles, архивный файл, содержащий платформенно-специфичные ресурсы без кода. Они разместили их на внешнем сервере, а затем загрузили, когда сборка запускалась, чтобы помочь пользователям как можно быстрее попасть в {Lobby} игры.

Они также использовали Addressable Asset System для загрузки ресурсов по требованию. Это помогло им разделить пакеты на группы, необходимые для различных частей игры, и значительно способствовало сокращению времени загрузки на 25%.

«Таким образом, у нас есть минимальное количество активов для вестибюлей, чтобы помочь игрокам войти раньше, минимальное количество для каждого уровня и некоторые общие пакеты с общими активами для разных уровней», — объясняет Андрей М. "Цель состоит в том, чтобы иметь как можно меньше файлов для загрузки, так как HTTP/2 доступен не везде, и мы хотим, чтобы внутри было как можно меньше необязательных ресурсов."

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

«Мы создали собственную двойную систему сборки, которая производила две версии, которые не были полностью разными.» Он ссылается на различные атласы и изменяет как тип сжатия, так и размер. Это два разных взгляда на активы, основанные на одной и той же кодовой базе," - говорит Андрей М.

Встреча с уникальными задачами тестирования и отладки

Когда дело дошло до тестирования и отладки игры, команда столкнулась с некоторыми трудностями из-за уникальной ситуации запуска игры внутри приложения Messenger, а не в традиционном веб-браузере. Хотя у них были сборки, которые они могли запускать в браузерах с использованием фиктивных игроков, им все же пришлось углубиться в поиск ошибок, которые появлялись только внутри Messenger.

«Для этих ошибок мы создали систему, которая загружает логи на наши серверы AWS в сборках для разработки, которые мы затем могли читать», — объясняет Фурмидж.

Команда также использовала инструменты разработки веб-браузера для обнаружения ошибок в консоли и отслеживания вызовов API. Как программист, это было ключевым для Фурмиджа.

«В консоли браузера вы можете вводить команды и пытаться запускать их вручную», — говорит он. «Поскольку у нас была внешняя библиотека JavaScript, которую мы создали для взаимодействия между JavaScript и Unity, нативный плагин, мы могли получить к ней доступ при необходимости.» Это использовалось для обертки Meta JavaScript SDK, чтобы иметь возможность общаться с их узловым сервером Multiplayer, функцию, которую Unity работает над выпуском в виде пакета в будущих релизах.

Чтобы ускорить разработку, Андрей М. также создал собственный локальный обертку, чтобы имитировать вызовы Meta API, которые ему были нужны. Он объясняет: «Я сосредоточился на вызовах API, которые касались конфигурации локального сервера, программируемых ответов и задержки».

Становление естественным продолжением платформы

Команда Coatsink хотела, чтобы Ready, Set, Cook! опыт был бесшовным для пользователей Messenger. От возможности быстро присоединяться к игровым сессиям до короткого времени загрузки, их конечной целью было стать органичным продолжением платформы.

Часть этого заключается в предоставлении интуитивно понятного игрового процесса, где игроки могут продвигаться без помех, играть на различных устройствах и поддерживать своих Friends с боковой линии. Для этого команда включила прокручиваемые советы об особенностях игры во время загрузки, удобные анимации "как играть" и интерактивные элементы. Эти функции помогают игрокам находить удовольствие с Friends, управляя хаосом на кухне.

«Мы хотели естественным образом привлечь людей, которые уже используют Messenger, и улучшить их опыт видеозвонков», — говорит Ник Тейлор, старший продюсер в Coatsink. «Работа с Meta и Unity была действительно совместной и дала нам возможность сделать это в полной мере.»

Расширенные возможности с Unity 6

Главная цель Unity 6 — предоставить возможность быстрой и простой разработки игр непосредственно вам, где бы ни находились ваши игроки. Загрузите Unity 6 в Unity Hub.