Unity WebGL оптимизация веса игры

Особенная благодарность: Максим Пятирублёвый, 𝘼𝙣𝙙𝙧𝙚𝙮 𝙄𝙫𝙖𝙨𝙝𝙚𝙣𝙩𝙨𝙚𝙫, Чика, Александр STG
Последнее обновление: 22.12.23

Вес игры очень важен, и для некоторых игроков уже 20 мегабайт могут оказаться внушительными. Я уверен, что у вас как разработчика хороший интернет и не слабый компьютер, но так не у всех. К слову, интернет в России — один из лучших (если не лучший) по соотношению цена-качество. Однако даже у нас встречается скорость 0.5-2 мегабайта в секунду. Особенно это актуально для мобильного интернета в маленьких городах.

Оглавления:

1. Спрайты
   1.1. Красивый UI градиент кодом
   1.2. 9-slicing и кнопка в *345 байтов
   1.3. Форматы сжатия
2. Звуки
   2.1. Настройки звука
   2.2. Форматы звука
3. Addressable
   3.1. Как это поможет загрузить игру в 50 мегабайт за 10 секунд?
   3.2. Как использовать загрузку через Addressable бесплатно?
   3.3. Возможные сервера для addressable
4. Splash Screen
5. Сжатие шрифтов
6. Сжатие 3D анимаций
7. URP 
   7.1. Отключение Post Processing
   7.2. Dynamic Batching
8. Настройки билда
   8.1. Project Settings
   8.2. Build Settings
9. Скорость интернета в разных странах
10. Другое

Спрайты

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

1. Все спрайты должны быть в степени 2-х: 16x16, 32x32, 64x64, 128x128 и т.д. В крайнем случае: каждая из сторон спрайта должна делиться на 4. Так Unity сожмёт спрайт, что позволит сэкономить огромное количество памяти. Я видел игры, чей размер можно было уменьшить с 40 до 15 мегабайт, если бы разработчики не пренебрегли сжатием.
2. Некоторые спрайты можно делать в 1 пиксель по ширине. Например, градиент от красного к синему можно сделать 1x1024 и вам останется лишь растянуть по ширине. А для флага России достаточно 3 пикселя на ВЕСЬ флаг. Не стоит загружать текстуру 128x128, если можно добиться того же эффекта меньшими затратами по весу и выиграть в производительности.
3. Текстуры обязательно нужно сжимать через редактор в Unity.
4. Спрайты лучше хранить в атласах. Вы можете сделать их вручную или воспользоваться «Sprite Atlas» от Unity.

Ещё немного о градиентах. Вы можете сделать белый градиент 1x512 или красивые переливающиеся фоны.

Примеры:

Красивый UI градиент кодом

Добиться такого же эффекта, как на картинках выше, можно обычным кодом.

Скрипт:
https://disk.yandex.ru/d/qUSuzrd42pAeMw

Поговорим про 9-slicing

9-slicing нужно пользоваться, и сейчас я расскажу, как сделать такую кнопку в *345 байтов.

Нам понадобится следующий инструмент: uiextensions.

1. Создаём спрайт обычного круга в Unity, она будет размером 256 на 256 пикселей пл умолчанию.
2. В Max Size ставим 32, чтобы круг стал 32x32.

Выставляем такие же настройки, как на картинке ниже.

Теперь нам нужно настроить Border'ы, образец — на картинке слева.

Сейчас можно расширить кнопку за счёт центра, а закругления оставить такими же.
3. Создаём Image и ставим в настройках, что это Sliced.

Теперь нужно добавить градиент с помощью uiextensions. 

Добавляем белый градиент 1x512, который уже сделали, а после — скрипт UIAdditiveEffect (когда он добавит нужный материал, его можно удалять). И вот, у нас получилась кнопка, которую я показывал в самом начале.

Это лишь один из примеров, и применений в UI может быть намного больше.

Форматы сжатия:

Я буду использовать 3 картинки: пиксель арт 16x16, белую иконку для UI 128x128 и картинку 512x512. Так как у нас 3 картинки, оцениваем в таком формате:

Размер спрайта — вес и степень сжатия (если её можно указать)

Степень смотрибельности вы вы можете оценить сами, все картинки находятся внизу. Первая — без сжатия, но если с картинкой будет всё плохо, я упомяну.

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

Без сжатия:
16 - 63кб (Текстура в атласе, поэтому и весит так много. Но тут мы скорей смотрим на его качество. Размер атласа - 112x144)
128 - 64кб
512 - 1мб

Сжимая обычный способом через Default:
16 - 2.7кб, качество сжатия - 100 (шакал)
128 - 1.5кб, качество сжатия - 20
512 - 11.2кб, качество сжатия - 0

—————
RGB(A) Compressed ASTC 12x12 blocks.
16 - 1.9кб, качество сжатия- 100 (шакальный, жесть)
128 - 1.9кб, качество сжатия - 50
512 - 28.9кб, качество сжатия - 50.

————— 

RGB(A) Compressed ASTC 4x4 blocks. - Лучший для пиксельных игр
16 -15.8кб, качество сжатия- 50 (вполне красивый. В атласе были некоторые проблемы, но они на один пиксель и таких очень мало)
128 - 4кб, качество сжатия - 0
512 - 64кб, качество сжатия - 0

—————

RGBA Crunched ETC2. - Лучший для большинства текстур
16 -3кб, качество сжатия- 100 (шакал)
128 - 2кб, качество сжатия - 30 (разницы не вижу)
512 - 11кб, качество сжатия - 0 (разницы вообще не заметил)

—————

ARGB 16 bit.
16 -31.5кб (Цвет на шлеме изменился)
128 - 32кб
512 - 0.5мб

—————

RGB Crunched DXT1|BC1
Они без фона и качество сжатия ничего не меняло
16 -2.4кб, качество сжатия - 100 (шакал)
128 - 0.8кб, качество сжатия - 0
512 - 6.8кб, качество сжатия - 0

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

Для пиксельных спрайтов рекомендую выбирать одно из двух сжатий:

RGB(A) Compressed ASTC 4x4 blocks.

ARGB 16 bit.

Звуки 

В некоторых играх звуки могут занимать от 5% до 20% размера всей игры. Именно поэтому за звуками (особенно за музыкой) нужно следить.

Рекомендую статью: https://habr.com/ru/post/437474/

1. Сжимаем звуки в Unity. Звук можно сделать и Mono, но иногда он наоборот начинает весить больше :_(
2. Меняем параметры загрузки звуков, особенно у музыки.

Подробнее ниже.

Настройки звука

О том, какие именно параметры нужно менять, есть в статье выше. Поэтому здесь приложу фото.

Для музыки я рекомендую отключить «Preload audio data» и включить «Load in background». Так мы ускорим загрузку игры, расставив обычные галочки. Галочкой «Ускорить загрузку игры» нужно пользоваться!

Форматы звука

Если качество у звуков в Unity поставить на 50 (оно указано в скобках), мы сократим вес на 40% в зависимости от формата:

ogg - 1.5мб (0.8мб)
wav - 3.8мб (1.5мб)
mp3 -2.1мб (1.3мб)
flac - 3.8мб (1.5мб)

В итоге мы сократили вес на 40% в зависимости от формата. 

Если сжать звук на стороне, то такая схема, увы, не сработает. Ради интереса можете взять звук в 30Мб и прогнать через сайт. В финальной версии билда файл будет весить так же, как и до сжатия. А причина в том, что Unity сам всё сжимает.

Настройки Audio в Project Settings

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

Addressable 

Если игра долго загружается, то это единственная вещь, которая способна помочь.

Как это поможет загрузить игру в 50 мегабайт за 10 секунд?

Давайте разберём на примере. Я загрузил подбор музыки на 30 минут, добавил его в проект и внёс в addressable. Сейчас игра весит 53Мб.

Теперь заходим в игру. Смотрите, загрузилось лишь 8Мб, а мы уже в игре!

А если нажать кнопку, чтобы загрузить музыку, вес игры сразу подскакивает до 51Мб.

То есть для запуска не нужно скачивать музыку в 50Мб. Вы можете так сделать со спрайтами, звуками и со всем, что весит довольно много. Не бойтесь, что вашу игру в 90Мб никто не загрузит.

Кстати, посмотреть, как быстро загружается тот или иной пак с ресурсами игры, можно через консоль браузера. Это очень полезно!

Как использовать загрузку через Addressable бесплатно?

В примере выше я не загружал игру с сервера, всё было локально в zip архиве. Искать сервер вам не нужно.

Возможные сервера для addressable

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

Очень примерные цены: за *1,5Гб вы отдадите *2,4 руб.

Сервера что можно выбрать:

1. Selectel
2. Yandex Cloud (раньше давали 4000 рублей, возможно дают и сейчас)
3. Amazon (были бесплатные сервера, но не для РФ)

Splash Screen

Может показаться, что добавить свой фон к логотипу Unity — это классная идея, потому что фон уже используется в игре и дважды грузить его не надо, верно?

Однако у Unity своё мнение на этот счёт. Эту анимацию будут видеть 2 секунды. Да, она классная, но она будет идти как отдельная картинка. А ещё она не сжимается со стороны Unity.

Фон, как на картинке выше, весит 0,8Мб.

Сжатие шрифтов

Можно подумать, что шрифты занимают лишь малую часть вашего проекта, но нет. Стандартный шрифт из коробки LiberationSans весит 350Кб. Я уверен, что вы используете Text Mesh Pro, а это ещё 1 мегабайт. Итого: 1.3 мегабайта.

Шрифты с поддержкой Японского или Китайского могут весить еще больше.

На данный момент 1 шрифт занимает ¼ пустого проекта.

Заходим в наш шрифт TMP и нажимаем «Update Atlas Texture». Предположим, что в моей игре совсем мало текста, и впишем туда только нужное: б, в, г, д, ж, з, й, к, л, м, н, п, р, с, т, ф, х, ц, ч, ш, щ, а, е, ё, и, о, у, ы, э, ю, я. Конечно, без пробелов.

После этого нажимаем на кнопку «Generate Font Atlas», а затем — на «Save». Если вам нужно буквально 10 букв, то хранить атлас с буквами в 1024 на 1024 смысла нет. Можете сжать его до 128 на 128, а в моём случае — 256 на 256. Теперь наша игра имеет только русский язык, и шрифт занимает 260Кб или 7,1% в пустом проекте.

Если в игре много разных символов, и такой вариант не подходит, советую сжать атлас до 512 на 512. Оставляем в Atlas Population в Dynamic, а Sample Point Size выставляем на 50 (если шрифт сильно не поплыл, то ставим меньше). Padding ставим на 1-5, это позволит поместить побольше символов или немного улучшить качество уже существующих. В этом случае шрифт из 1Мб превращается в 264Кб.

Стандартный шрифт можно сжать по таким же параметрам. Кстати, если шрифт LiberationSans не нужен совсем, выставляйте везде нули или даже удаляйте его. Только не забудьте в Project Settings заменить стандартный шрифт на другой.

P.s. Вместе с Text Mesh Pro создаются шрифты из смайликов. Они почти никогда не используются, а вес занимают, поэтому советую удалять.

Сжатие анимаций

Анимации можно сжать, и не факт, что игрок это заметит.
Подробнее: https://www.techarthub.com/animation-compression-unity/

Гифок тут не будет, но посмотреть, как меняется качество, можно на сайте выше.

Заходим в импортированную анимацию и во вкладке «Animation» видим «Anim. Compression». Вот здесь уже пора задавать настройки.

Посмотреть примеры того, насколько сильно меняется качество анимации, можно по ссылке выше. Информацию о качестве сжатия я взял оттуда же:

Error на 0,5 - 119кб
Error на 10 - 69кб
Error на 100 - 14кб

URP 

Отключение Post Processing

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

Dynamic Batching

А если вам нужен Dynamic Batching, то для URP проектов надо ставить отдельную галочку, как на скриншоте ниже.

Юнитеки посчитали эти настройки не настолько важными, поэтому скрыли их. Заходим в Preferences — Core Render Pipeline — Visibility — All Visible и включаем Dynamic Batching.

Настройки билда

Project Settings

Форматы сжатия:
Gzip: 7.68 мегабайт
Brotli: 5.8 мегабайт

IL2CPP Code Generation: Faster Runtime

Почему нельзя ставить Faster (smaller) build? Причина: так вы экономите скорость билда, а не вес. Да, билд будет весить меньше, но производительность упадёт. Оно того не стоит.

Managed Stripping Level: Medium

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

Если вы хотите поставить «High», чтобы уменьшить вес максимально, рекомендую открыть документацию и прочесть пункт «Root annotations». Тут вы сможете указать, что вырезать нельзя, и получите минимальный билд.

https://docs.unity3d.com/Manual/ManagedCodeStripping.html

Build Settings

Code Optimization ставим только Runtime Speed. Да, мы говорим про оптимизацию веса, всё верно. Однако не стоит расплачиваться низкой производительностью, если в итоге получится сэкономить копейки.

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

Скорость интернета в разных странах

Если вы хотите выпускать игру на Турецком языке, стоит узнать, какой у них интернет. Например, будет странно переводить игру в 90Мб на хинди (Индия), если скорость интернета в стране — 5 мбит в секунду (0.63 мегабайта).

Вот несколько сайтов, которые помогут узнать среднюю скорость интернета по странам:

https://www.speedtest.net/global-index

https://www.cable.co.uk/mobiles/worldwide-data-pricing/

https://www.numbeo.com/cost-of-living/country_price_rankings?itemId=33

Когда узнаете скорость, можете отнять примерно 25%. Это позволит прикинуть, как быстро игра будет загружаться у среднего пользователя.

Для простоты в браузере можно ограничить скорость интернета: F12 → Network → Add.

Я бы рекомендовал проверять свои игры со скоростью «5-10 мбит в секунду». Почему именно такая скорость? Потому что важно помнить о каждом игроке. Например, он может находиться у школьного компьютера со скоростью 0.5 мбит или жить в деревне, где интернет очень медленный.

Другое

1. Баг с Visual Scripting, при котором он попадает в финальный билд, даже если вы его не используете.Вам необходимо удалить Visual Scripting из проекта: заходим в «Package Manager», далее — в «In Project», находим и удаляем. Кстати, этот баг исправили в версии 2022.
2. Использовать нужно как минимум 2021 версию, но я рекомендую 2022.
3. Второй+ билд всегда весит больше, чем первый

Мы подошли к концу. Теперь вы знаете всё, что знаю я, об оптимизации веса игры. На очереди — производительность.

Если было полезно то можете поддержать рублём:
Тинькофф: 5536 9139 5319 0663
Райффайзенбанк: 2200 3005 1014 5533
Киви: qiwi.com/n/SWERR225

Моя телеграмм группа: https://t.me/archivekaban