Профилирование и оптимизация сборки Unity Web

Для развертывания на веб-платформе Unity сначала нужно добавить модуль Web в редактор Unity Editor, чтобы создать веб-сборку. Найдите установку в Unity Hub, нажмите на значок настроек и выберите Добавить модули.

В новом диалоговом окне прокрутите вниз, чтобы найти пункт Web Build Support, выберите его и нажмите кнопку Done.

Откройте проект заново и переключите целевую платформу в меню File > Build Settings. Используйте опцию Development Build при разработке игры. Он предоставляет дополнительную отладочную информацию, такую как трассировка стека, подробные сообщения об ошибках и информация о логах, которая поможет вам в устранении неполадок и внесении изменений в игру. Вы можете вносить небольшие изменения в код, активы или настройки игры, а затем быстро перестраивать и тестировать эти изменения в браузере без необходимости полного процесса сборки.

Только не забудьте снять флажок Development Build в Build Settings для финальной опубликованной сборки.

Выберите Build And Run, чтобы создать версию игры, запускаемую в браузере для тестирования. Google Chrome - отличный выбор для игрового тестирования, поскольку в нем есть ряд инструментов для разработчиков.

Вам будет предложено выбрать место для сборки. Файлы сборки включают файл index.html, который добавляет элемент HTML5 Canvas в Document Object Model (DOM) - представление данных об объектах, составляющих структуру и содержание документа в Интернете. Игра отображается на этом холсте. Файлы сборки также включают папку TemplateData и папку Build. Папка TemplateData содержит HTML-активы, используемые на странице, такие как favicon, используемый в адресной строке браузера, и изображения, используемые в HTML-разметке страницы.

Вы также можете настроить автоматическую сборку, одним из вариантов которой является Unity Build Automation.

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

Получите подробные инструкции по переводу ваших проектов из встроенного конвейера рендеринга в URP с помощью электронной книги Введение в универсальный конвейер рендеринга для продвинутых создателей Unity.

Если вы нацелены на консоль, у вас есть точные спецификации памяти и использования CPU и GPU. Интернет - это совсем другой зверь. Чтобы сделать вашу игру доступной для самой широкой аудитории, необходимо убедиться, что она хорошо работает в условиях ограниченного объема памяти.

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

1. Оптимизируйте игровые активы

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

2. Используйте объединение объектов

Объединение объектов в пул - это техника, которая может помочь вам повысить производительность за счет повторного использования объектов вместо создания и уничтожения новых. Это может быть полезно для игр с большим количеством спавнов и деспавнов. Другие шаблоны программирования, такие как "маховик", также могут быть полезны. Смотрите электронную книгу Повысьте уровень своего кода с помощью паттернов программирования игрв которой вы найдете советы по внедрению паттернов проектирования в проекты Unity.

3. Использование универсального конвейера рендеринга и SRP Batcher

Повысьте производительность с помощью системы пакетной обработки SRP Batcher в Unity, которая ускоряет рендеринг на CPU в зависимости от сцены. Она работает за счет группировки вызовов рисования на основе общих свойств материалов, таких как шейдеры и текстуры, что позволяет сократить количество изменений состояния, необходимых при рендеринге.

4. Используйте очистку от окклюзий

Система очистки от окклюзии в Unity позволяет повысить производительность за счет рендеринга только тех объектов, которые видны игроку. Окклюзия лучше всего работает в сценах, где небольшие, четко очерченные области отделены друг от друга твердыми игровыми объектами, например, комнаты, соединенные коридорами.

5. Используйте встроенную систему LOD (уровень детализации)

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

6. Запекайте освещение, где это возможно

Повысьте производительность, предварительно вычислив информацию об освещении для ваших сцен с помощью Lightmaps и Light Probes.

7. Уменьшите количество ненужных операций со строками

В C# строки являются ссылочными типами, а не типами значений. Избегайте разбора строковых файлов данных, таких как JSON и XML; вместо этого храните данные в ScriptableObjects или форматах MessagePack или Protobuf. Вы также можете рассмотреть двоичные форматы для таких случаев, как сохранение постоянных игровых данных (сохранения игр). Используйте класс StringBuilder, если вам нужно создавать строки во время выполнения программы.

8. Попробуйте Addressable Asset System

Система адресных активов обеспечивает упрощенный способ управления контентом путем загрузки пакетов активов по "адресу" или псевдониму. Эта унифицированная система загружается асинхронно либо с локального пути, либо из удаленной сети доставки контента (CDN).

9. Ограничение эффектов постобработки

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

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

По умолчанию используются следующие шаблоны:

• По умолчанию: Белая страница с полосой загрузки на сером холсте
• Минимум: Минимальный набор шаблонов, необходимый для запуска вашей игры
• Прогрессивное веб-приложение (PWA): Сюда входят файл веб-манифеста и рабочий сервис. В подходящем настольном браузере в адресной строке появится кнопка установки для добавления игры в список запускаемых приложений игрока.

Самый простой способ создать свою собственную HTML-страницу - начать с одного из трех шаблонов, которые можно найти по адресу <UnityInstallation>/PlaybackEngines/ WebGLSupport/ BuildTools/ WebGLTemplates/. На Mac папку Unity Installation можно найти в папке Applications.

Скопируйте шаблон, поместите его в собственную папку Project/Assets/WebGLTemplates и переименуйте его, чтобы впоследствии его можно было идентифицировать. Теперь вы можете настроить его в соответствии с содержанием игры, местом развертывания и целевой платформой.

Шаблоны в папке WebGLTemplates вашего проекта появляются на панели Edit > Project Settings... > Player > Resolution and Presentation. Имя шаблона совпадает с названием его папки. Чтобы придать этой опции миниатюрное изображение для удобства, добавьте в папку с шаблоном изображение размером 128 x 128 пикселей и назовите его thumbnail.png.

В процессе сборки Unity предварительно обрабатывает файлы шаблонов и оценивает все макросы и условные директивы, включенные в эти файлы. Он находит и заменяет все макродекларации значениями, указанными редактором, и автоматически выполняет предварительную обработку всех файлов .html, .php, .css, .js и .json в папке шаблона.

Например, посмотрите на эту строку кода:

<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} tabindex="-1"></canvas>.

Если в панели "Разрешение и представление" установить ширину холста по умолчаниюна 960, а высоту холста по умолчанию на 600, то после предварительной обработки код будет выглядеть следующим образом:

<canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>.

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

В стандартных шаблонах вы также найдете примеры условных директив с использованием #if, #else и #endif:

#if EXPRESSION

//Если значение EXPRESSION равно истинному значению

#else

//Если значение EXPRESSION не равно истинному значению

#endif

Если вы хотите использовать собственный шаблон, Unity Asset Store предлагает несколько вариантов.

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

• CrazyGames
• Poki
• Kongregate
• Itch.io
• Аркада Construct
• Simmer.io

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

В странице index.html для каждого шаблона (см. пример кода ниже) найдите script.onload. script.onload - это событие, которое запускается, когда скрипт движка Unity завершает загрузку. Непосредственно перед этим у вас есть две глобальные переменные: myGameInstance, которая содержит ссылку на экземпляр Unity, и myGameLoaded, которая указывает, завершилась ли загрузка игры, и по умолчанию имеет значение false. Они объявляются как var, поэтому имеют глобальную область видимости и могут быть доступны в любом месте сценария.

Функция createUnityInstance() вызывается для создания нового экземпляра игры Unity. Эта функция возвращает Promise, который разрешается, когда игра полностью загружена и готова к рендерингу (блок createUnityInstance Promise).

Внутри then() myGameInstance присваивается экземпляр Unity, а myGameLoaded устанавливается в true, указывая на то, что игра уже готова. Затем вызывается функция resizePage() для первоначальной установки размера игры, а к событию изменения размера окна добавляется слушатель событий, чтобы размер игры обновлялся при каждом изменении размера окна. Смотрите фрагмент кода ниже.

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

функция resizePage(){

if (myGameInstance !== undefined && myGameLoaded === true)

{

canvas.style.width = window.innerWidth + 'px';

canvas.style.height = window.innerHeight + 'px';

}

}

Во многих играх, ориентированных на браузер, необходимо взаимодействовать с кодом JavaScript, позволяющим вызывать веб-сервисы для поддержки входа пользователей в систему, таблицы высоких результатов и так далее, а также для взаимодействия с DOM браузера. Любой JavaScript, который вы добавляете напрямую, чтобы его можно было вызвать из сценария C#, должен иметь расширение .jslib и быть помещен в папку Assets/Plugins . Его следует обернуть в метод mergeInto. Для этого требуется два параметра: LibraryManager.library, а затем объект JavaScript, содержащий одну или несколько функций. Функции являются стандартными для JavaScript. Ниже показано, как использовать простой веб-сервис, предоставляющий JSON.

Когда вы создаете сборку, эти функции будут добавлены в файл Build/<название вашей игры>.framework.js . Вы можете вызывать эти функции из сценария C#, объявив функцию как DllImport, как показано в этом примере кода:

public class SphereController : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void GetExchangeRates();

private void Start()
{
GetExchangeRates();
}
}

Подробнее

Взаимодействие со сценариями браузера

Взаимодействие с кодом: Emscripten

Кроме того, что C# может вызвать функцию JavaScript, JavaScript может вызвать метод C#. В этом механизме используется протокол обмена сообщениями:

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’)

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’, 5)

myGameInstance.SendMessage('MyGameObject', 'MyFunction', 'A string')

Чтобы использовать SendMessage, вам нужна ссылка на экземпляр игры в области видимости. Обычная техника заключается в редактировании index.html путем добавления глобальной переменной и назначения ее в блоке then в script.onload Promise, как было показано ранее. Эта простая функция добавляется как часть компонента MonoBehaviour, прикрепленного к игровому объекту с именем Sphere.

public void SetHeight( float height )

{

Vector3 pos = transform.position;

pos.y = height;

transform.position = pos;

}

Вы можете открыть консоль Chrome с помощью клавиши F12 и ввести прямой текст:

myGameInstance.SendMessage('Sphere', 'SetHeight', 3)

Нажмите Enter, чтобы вызвать функцию Перемещение сферы. Движение будет отражено в рендере, только если у вас установлен параметр Run In Background или вы установили Application.runInBackground в true. Это связано с тем, что по умолчанию рендеринг происходит только тогда, когда окно холста имеет фокус.

Используйте Debug.Log при отладке для браузерных платформ. Все сообщения отправляются в консоль браузера. В Chrome это можно сделать, нажав F12 и переключившись на вкладку "Консоль". Но класс Debug предлагает больше возможностей. Используя Debug.LogError, консоль предоставит трассировку стека, которая может оказаться полезной.

Подробнее

Отладка и устранение неполадок в сборках WebGL

Класс Debug

Мы рекомендуем использовать опцию Development Build во время разработки, но снять флажок с этой опции, когда вы развертываете игру на живом сайте. Для сборки релиза у вас есть возможность сжатия. При использовании сжатия вам может потребоваться изменить настройки на вашем сервере; советы по этому поводу см. в Руководстве.

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

Скачать электронную книгу Полное руководство по профилированию игр Unity чтобы получить подробную информацию о профилировании в Unity.

Давайте рассмотрим несколько советов, как начать профилировать сборку Unity Web.

Включите профилировщик Unity

Перейдите в File > Build Settings в редакторе и выберите Development Build и Autoconnect Profiler , чтобы использовать Profiler с Web-сборкой.

Выберите модуль использования процессора

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

Выберите модуль Memory Profiler

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

Используйте панель Chrome DevTools Performance

В Chrome DevTools есть панель Performance, которая поможет вам найти узкие места в вашей игре. Среди прочих возможностей - панель Sources для добавления точек останова в файлы JavaScript и панель Console для просмотра отладочных сообщений и ввода кода JavaScript.

Измерьте производительность на различных устройствах

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

Сократите количество вызовов на розыгрыш

Вызовы рисования - одно из главных узких мест в производительности сборки Unity Web. С помощью Unity Profiler определите области с большим количеством вызовов рисования и попробуйте уменьшить их количество.

Анализ производительности на устройствах низкого класса

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

Включите "Запуск в фоновом режиме" во время профилирования

Если в настройках WebGL Player включена функция Run In Background или включен Application.runInBackground, ваш контент будет продолжать работать, когда холст или окно браузера теряют фокус, что может быть полезно при профилировании.

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

Подробнее

Советы и рекомендации по использованию модуля WebGL в Unity

Руководство по Unity Web

Ранний доступ к новому бэкенду WebGPU в Unity 2023.3

Официальные обновления Web runtime находятся здесь: Поднимите свой браузер на новый уровень

Найдите все передовые электронные книги и статьи Unity в хабе "Лучшие практики Unity".