Unity 6.3
0 онлайн 106 гостей 3 в системе
Вход
Руководства по передовой практике Шаг 6 из 15

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

Содержание

Большая часть UI дизайна происходит вне Unity в приложении для создания цифрового контента (DCC). В зависимости от стиля и предпочтений художника UI, дизайн UI может происходить в приложении для растрового рисования, таком как Adobe Photoshop, или в векторном инструменте. Как правило, каждая часть UI графики экспортируется как безпотерянное растровое изображение с прозрачностью, например PNG, и объединяется в атлас текстур с другими UI элементами для эффективности выполнения.

Если вы работаете в векторной среде DCC приложение, вам нужно экспортировать векторную графику в растровый формат, чтобы работать с UI Toolkit. Для более подробной информации, см. Векторные изображения раздел.

Растровые изображения

Unity поддерживает наиболее распространенные типы файлов изображений, такие как PNG, BMP, TIF, TGA, JPG и PSD.. Когда вы добавляете файлы этих форматов в папку Assets, Unity импортирует их в качестве Texture 2D assets для 3D проектов или в качестве Sprites для 2D проектов. Вы можете изменить тип в поле Texture Type в Inspector после импорта. UI Toolkit поддерживает оба формата для UI битмапной графики.

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

Спрайт

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

Большинство графических ассетов UI будут отображаться на экране, а не в мировом масштабе Unity (где одна единица представляет кубический метр в пространстве 3D). UI Toolkit управляет масштабом этих графиков, но PPU (Пикселей на единицу) спрайтов влияет на размер спрайтов в UI. Например, если ваш спрайт должен иметь 128 пикселей разрешения на единицу сетки, установите PPU на 128.

Редактор Sprite предоставляет инструменты для модификации вашей графики, такие как вырезание с помощью синих ручек или разрезание с помощью зеленых ручек. Эти инструменты позволяют вам сделать графику плиточной или использовать 9-слойный метод, распространенный способ создания масштабируемых элементов.

Спрайты представляют собой текстуры 2D, отображаемые на плоские, прямоугольные меши 3D. По умолчанию, при импорте, они используют настройку Mesh Type: Туго. Эта настройка регулирует меш, чтобы она точно следовала контуру непрозрачных (непрозрачных) пикселей спрайта. Это повышает производительность, уменьшая перерисовку, которая происходит, когда GPU рисует один и тот же пиксель более одного раза в одном кадре, из-за прозрачных перекрывающихся областей. Вы можете вручную настроить и оптимизировать эту меш в редакторе спрайтов в разделе Контур.

Режимы спрайта является полезной функцией, которую можно выбрать из Inspector ассета спрайта. Она предоставляет следующие режимы:

  • Одинокие: Это режим по умолчанию, когда изображение содержит только один элемент изображения.

  • Множественные: Выберите это значение, если исходный файл текстуры содержит несколько элементов в одном изображении. Затем определите расположение элементов в Редактор спрайтов, чтобы Unity знал, как разделить изображение на различные суб-ассеты. После разделения каждая графика становится индивидуальным спрайтом, который может использоваться отдельно в UI Toolkit.

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

Ассет текстуры

Тексты рендеринга представляют собой моментальные снимки изображения с камеры в текстуре, обновляемые каждый кадр. Они могут быть созданы с помощью Assets < Create < Rendering и ссылки из компонента Camera в меню Output. Затем вы можете использовать эти текстуры в UI Toolkit для отображения элементов, таких как мини-карты, экраны выбора персонажа или любые другие визуальные элементы игры, которые необходимо интегрировать в UI.

Примеры текстур рендеринга в UI Toolkit Пример: Dragon Crashers включают в себя предварительный просмотр персонажа в счетчике уровня и эффекты частиц, рендеринг над UI кнопками.

Возможен и обратный сценарий, когда интерфейс должен отображаться внутри игрового элемента. Представьте, например, 3D-модель компьютера в вашем приложении с работающим интерфейсом, сделанным в UI Toolkit. Интерфейс UI Toolkit можно отрисовать в render texture, назначить её в Panel Settings и Camera, а затем применить к материалу 3D-модели.

Настройки текстуры рендеринга и простые тесты
Настройки текстуры рендеринга и простые тесты

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

2D PSD Импортер

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

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

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

После установки пакета 2D PSD Импортер из менеджера пакетов, убедитесь, что файлы PSD импортированы из Inspector.

Выберите Импортер PSD в Inspector, чтобы увидеть параметры для обработки файла.
Выберите Импортер PSD в Inspector, чтобы увидеть параметры для обработки файла.

При работе с UI ассетов, снимите флажок Использовать как Риг вариант в Inspector под Риг персонажа. Эта настройка имеет значение только для 2D скелетной анимации персонажа и не требуется для UI Вы также должны найти опции для импорта слоев (e.g., отбрасывание скрытых слоев, группирование объектов по слоям и т.д.)

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

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

💡 Совет: Итеративный дизайн

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

Векторные изображения

Хотя поддержка векторного формата все еще находится в стадии разработки на момент написания, она доступна в качестве опции для фоновых изображений в UI Builder. Однако растровые изображения (спрайты и текстуры) в настоящее время являются рекомендуемым форматом изображений для UI Toolkit.

Если вы хотите протестировать эту функцию, вам понадобится пакет Vector Graphics, который все еще находится в предварительном просмотре и скрыт от Package Manager по умолчанию. Следуйте инструкциям в документация Этот пакет включает в себя настройку для определения уровня тесселяции при преобразовании векторной графики в полигоны. Тип генерируемого актива настройка, выбрать UI Toolkit Векторное изображение чтобы иметь возможность использовать его в UI Toolkit.

С пакетом Векторная графика вы можете тестировать с помощью SVG изображений для вашей игры или UI в ограниченном объеме.
С пакетом Векторная графика вы можете тестировать с помощью SVG изображений для вашей игры или UI в ограниченном объеме.

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

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

Шрифты

UI Toolkit поддерживает как Font, так и FontAsset:

  • Шрифт: Стандартные форматы шрифтов, такие как TTF или OTF, поддерживаются для обратной совместимости. Однако они автоматически преобразуются в Font Assets, когда UI Builder находит их в проекте (конвертер также доступен вручную через меню).

  • FontAsset: Это рекомендованный формат, который позволяет настроить такие параметры, как кернинг или базовая линия, без изменения оригинального шрифта. Это полезно для высокостилизированных шрифтов, обычно встречающихся в играх.

    • Font Asset также обеспечивает точный контроль над тем, как создаются атласы, включая набор символов, разрешение и параметры популяции атласа. Эти настройки могут помочь уменьшить потребление памяти, особенно при работе с шрифтами Unicode, которые поддерживают языки с большим количеством символов.

Текстурные пакеры

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

Спрайт-атлас

Типичный игровой UI атлас из UI Toolkit образца -- Dragon Crashers
Типичный игровой UI атлас из UI Toolkit образца – Драконы

Атлас Спрайта является UnityАтласный инструмент для 2D разработки игр и спрайтов, но вы также можете использовать его для UI Он автоматически упаковывает ассеты в одну и ту же папку проекта, создавая атлас для спрайтов, а также обычные и масковые карты. Он также поддерживает платформенные варианты и имеет API Sprite Atlas обычно используется в редакторе для упаковки ассетов, но не во время выполнения.

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

Динамический атлас, созданный из окна редактора Unity, показанный в просмотрщике атласа текстур, атлас увеличивается горизонтально и вертикально в кратных 2, соответствующих максимально допустимому размеру текстуры
Динамический атлас, созданный из окна редактора Unity, показанный в просмотрщике атласа текстур, атлас увеличивается горизонтально и вертикально в кратных 2, соответствующих максимально допустимому размеру текстуры

Когда UI графики не упакованы Sprite Atlas, они автоматически упаковываются с динамическим атласом в UI Toolkit во время предварительного прохождения.

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

Инструмент динамического атласа работает как во время выполнения, так и в Редакторе, что делает его полезным для UI элементов, которые генерируются динамически, как инвентарь игрока.

Общие рекомендации для графики:

  • Как только вы начнете создавать макеты экранов, убедитесь, что установили самое высокое разрешение в вашем программном обеспечении для рисования, чтобы избежать необходимости переделывать работу позже. Если вы планируете поддерживать графику до 4K, например, сделайте это минимальным рабочим разрешением.

  • Избегайте масштабирования растровых изображений после их создания. Это может привести к пикселизации и размытости, тем самым снижая качество изображения. Вместо этого начинайте с самого высокого поддерживаемого разрешения, а затем масштабируйте вниз при экспорте из графического приложения.

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

  • Получите максимальную отдачу от 2D PSD Импортер путем импорта PSDs прямо в Unity. Любые изменения в слое будут отражены в Unity как только вы сохраните PSD файл. Если у вас есть PSD файл в Unity, он также может извлечь пользу из Управление версиями.

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

  • Если требуется дополнительная автоматизация процесса, например, выполнение проверок ассетов или массовое изменение настроек для нескольких ассетов, можно использовать Asset PostProcessor API.