Подготовка графических ресурсов и шрифтов

Значительная часть работы над дизайном UI выполняется за пределами Unity, в приложениях для создания цифрового контента (DCC). В зависимости от стиля и предпочтений UI-художник может проектировать интерфейс в редакторе растровой графики, например Adobe Photoshop, или в векторном редакторе. Обычно каждый графический элемент UI экспортируется в виде растрового изображения с прозрачностью и сжатием без потерь, например PNG, а затем объединяется с другими элементами в атлас текстур ради эффективности во время выполнения. Если вы работаете в векторном DCC-приложении, для использования графики в UI Toolkit её потребуется экспортировать в растровый формат. Подробнее см. раздел «Векторные изображения».

Растровые изображения Unity поддерживает большинство распространённых форматов изображений: PNG, BMP, TIF, TGA, JPG и PSD. После добавления таких файлов в папку Assets Unity импортирует их как ресурсы Texture 2D для трёхмерных проектов или как спрайты для двухмерных. После импорта тип можно изменить в поле Texture Type инспектора. UI Toolkit поддерживает оба формата растровой графики интерфейса.

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

Спрайты Спрайты - это текстуры, подготовленные для двухмерных игр и предназначенные для компонента Sprite Renderer. В Unity двухмерные спрайты можно замостить, снабдить скелетом и скиннингом для анимации, задать им пользовательскую геометрию или дополнительные карты для двухмерного освещения. В этом разделе рассматриваются только параметры, относящиеся к UI Toolkit. Подробнее о двухмерной графике можно будет прочитать в издании электронной книги «2D-графика, анимация и освещение» для Unity 6 на странице https://unity.com/resources.

Большинство графических ресурсов UI выводится в экранном пространстве, а не в масштабе мира Unity, где одна единица соответствует кубическому метру трёхмерного пространства. UI Toolkit управляет масштабом такой графики, однако значение PPU (Pixels Per Unit, пикселей на единицу) влияет на размер спрайта в интерфейсе. Например, если на одну единицу сетки должно приходиться 128 пикселей изображения, задайте PPU равным 128. Sprite Editor предоставляет инструменты редактирования графики: например, обрезку синими маркерами и нарезку зелёными. С их помощью изображение можно подготовить к мозаичному заполнению или применить технику девятисегментного масштабирования (9-slice), широко используемую для создания масштабируемых элементов. Спрайты представляют собой двухмерные текстуры, наложенные на плоские прямоугольные трёхмерные сетки. При импорте по умолчанию используется параметр Mesh Type: Tight. Он подгоняет сетку под контур непрозрачных пикселей спрайта. Это повышает производительность за счёт уменьшения избыточной отрисовки, когда GPU в одном кадре несколько раз рисует один и тот же пиксель из-за перекрывающихся прозрачных областей. Сетку можно вручную уточнить и оптимизировать в разделе Outline окна Sprite Editor. Полезный параметр Sprite Mode выбирается в инспекторе ресурса спрайта и поддерживает следующие режимы: - Single. Режим по умолчанию: текстура содержит одно изображение. - Multiple. Выберите этот режим, если исходная текстура содержит несколько элементов. В Sprite Editor укажите их расположение, чтобы Unity смогла разделить изображение на отдельные дочерние ресурсы. После нарезки каждый графический элемент становится самостоятельным спрайтом, который можно отдельно использовать в UI Toolkit. - Polygon. Лучше всего подходит для круглых изображений и правильных многоугольников. Режим позволяет задать контур, точно повторяющий форму изображения, и получить более аккуратный результат.

Ресурс Render Texture Render Texture - это текстура со снимком изображения камеры, которая обновляется в каждом кадре. Такой ресурс можно создать через меню Assets > Create > Rendering, а затем указать в меню Output компонента Camera. В UI Toolkit эти текстуры позволяют отображать мини-карты, экраны выбора персонажа и другую внутриигровую графику, которую требуется встроить в интерфейс.

В UI Toolkit Sample: Dragon Crashers Render Texture используется, например, для предпросмотра персонажа на индикаторе уровня и эффектов частиц поверх кнопок UI. Возможен и обратный сценарий, когда интерфейс нужно показать внутри игрового объекта. Представьте трёхмерную модель компьютера с работающим интерфейсом, созданным в UI Toolkit. Интерфейс UI Toolkit можно отрисовать в Render Texture, назначить её в Panel Settings и Camera, а затем применить к материалу трёхмерной модели.

Параметры Render Texture и простые тесты

Помните, что Render Texture требует значительных ресурсов. Используйте такие текстуры умеренно и обязательно профилируйте проект, чтобы оптимизировать производительность. В полноэкранных интерфейсах, где одновременно не выполняются другие активные элементы игрового процесса, дополнительные эффекты такого рода, скорее всего, не вызовут серьёзных проблем с производительностью.

2D PSD Importer По умолчанию Unity импортирует PSD-файлы Adobe Photoshop как сведённые текстуры. Чтобы сохранить структуру слоёв, в проекте должен быть установлен пакет 2D PSD Importer. Формат PSD обычно используют для хранения нескольких изображений на разных слоях в одном файле; экспорт в него поддерживает большинство DCC-инструментов.

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

PSD-файлы упрощают рабочий процесс: их можно импортировать непосредственно в Unity, не экспортируя каждый слой в отдельный файл и не повторяя эту операцию после каждого изменения. Установите пакет 2D PSD Importer через Package Manager, затем проверьте параметры импорта PSD-файла в инспекторе.

Выберите PSD Importer в инспекторе, чтобы просмотреть параметры обработки файла.

При работе с ресурсами UI отключите в инспекторе параметр Use as Rig в разделе Character Rig. Он нужен только для скелетной анимации двухмерных персонажей и не требуется элементам UI. Здесь же доступны параметры импорта слоёв: например, исключение скрытых слоёв и группировка объектов по слоям.

Переключитесь на PSD Importer, чтобы получить дополнительные параметры импорта.

Созданные из PSD спрайты в окне Project можно использовать как обычные. В Sprite Editor их можно нарезать, изменить контур или настроить Pixels Per Unit (PPU) так же, как у стандартных ресурсов Sprite.

Совет: итеративное проектирование Unity автоматически обновляет спрайты из PSD-файла при каждом его сохранении. Благодаря этому можно быстро создать временный вариант, дорабатывать его и сразу наблюдать изменения в окне Game. Просмотр результата в контексте без замены файлов и без помощи другого разработчика заметно экономит время и помогает повысить качество работы.

Векторные изображения На момент написания книги поддержка векторного формата всё ещё разрабатывалась, однако в UI Builder его уже можно было использовать для фоновых изображений. Тем не менее для UI Toolkit пока рекомендуются растровые изображения - спрайты и текстуры. Чтобы опробовать векторную графику, установите экспериментальный пакет Vector Graphics, который по умолчанию скрыт в Package Manager. Порядок установки приведён в документации. В пакете можно настроить уровень тесселяции при преобразовании векторной графики в полигоны. Чтобы использовать полученный ресурс в UI Toolkit, для Generated Asset Type выберите UI Toolkit Vector Image.

Пакет Vector Graphics позволяет в ограниченном объёме испытать SVG-изображения в игре или интерфейсе.

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

Ожидается, что завершённая реализация будет непосредственно работать с настоящими векторными формами и отдельный пакет Vector Graphics больше не потребуется.

Шрифты UI Toolkit поддерживает типы Font и FontAsset:

- Font. Стандартные форматы шрифтов TTF и OTF поддерживаются ради обратной совместимости, но в фоновом режиме автоматически преобразуются в FontAsset. - FontAsset. Рекомендуемый формат, позволяющий точно настраивать кернинг, базовую линию и другие характеристики без изменения исходного файла шрифта. Это особенно полезно для выразительных стилизованных шрифтов, часто используемых в играх.

- FontAsset также позволяет точно управлять созданием атласов: выбирать набор символов, разрешение и способ заполнения. Эти параметры помогают сократить потребление памяти, особенно при работе с Unicode-шрифтами для языков с большим числом символов.

Упаковщики текстур Объединение двухмерной графики в одной текстуре - распространённый способ оптимизации, который уменьшает число вызовов отрисовки и улучшает использование памяти. UI Toolkit поддерживает две системы атласов.

Атлас спрайтов

Типичный атлас игрового интерфейса из UI Toolkit Sample - Dragon Crashers

Sprite Atlas - инструмент Unity для упаковки спрайтов и другой графики двухмерных игр в атлас; его также можно использовать для графики UI. Он автоматически упаковывает ресурсы из одной папки проекта, создавая атласы спрайтов, карт нормалей и масок. Поддерживаются варианты для разных платформ и API для расширенного управления. Sprite Atlas обычно применяют для упаковки ресурсов в редакторе, а не во время выполнения.

Динамический атлас

Динамический атлас, созданный редактором Unity и открытый в Texture Atlas Viewer. Атлас увеличивается по горизонтали и вертикали степенями двойки, не превышая максимально допустимый размер текстуры.

Если графика UI не упакована средствами Sprite Atlas, UI Toolkit автоматически добавляет её в динамический атлас на предварительном проходе. Изображения, на которые ссылается визуальный элемент, включаются в атлас по критериям, заданным в Panel Settings документа UI. Например, можно указать минимальные и максимальные размеры упаковываемых текстур или фильтровать изображения по другим свойствам. Созданные атласы доступны для просмотра в Texture Atlas Viewer отладчика UI Toolkit. Динамический атлас работает и во время выполнения, и в редакторе, поэтому удобен для элементов UI, создаваемых динамически, например содержимого инвентаря игрока. При подготовке графики придерживайтесь следующих рекомендаций: - Уже на этапе создания макетов задайте в графическом редакторе максимальное целевое разрешение, чтобы впоследствии не переделывать работу. Например, если вы планируете поддерживать графику вплоть до 4K, используйте это разрешение как минимальное рабочее. - Не увеличивайте растровые изображения после их создания: это приводит к пикселизации и размытию, снижая визуальное качество. Начинайте работу с максимального поддерживаемого разрешения и уменьшайте изображение при экспорте из графического приложения.

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

- Если разрешение графических ресурсов ниже требуемого, попробуйте 2D Enhancers и функцию масштабирования на основе ИИ в Sprite Editor. - Используйте возможности 2D PSD Importer, импортируя PSD-файлы прямо в Unity. После сохранения PSD все изменения слоёв автоматически отразятся в Unity. Кроме того, находящийся в проекте PSD-файл можно хранить в системе контроля версий. - Автоматизируйте импорт. Не изменяйте параметры вручную при каждом добавлении графического ресурса. С помощью Preset можно сохранить настройки одного ресурса и автоматически применять их ко всем ресурсам того же типа в заданной папке. - Для более глубокой автоматизации, например проверки ресурсов или массового изменения их параметров, используйте API AssetPostprocessor.