PerfectVector
Автор: Irene Kim9 мин чтения

Импорт SVG в Unity: графика для UI Toolkit или спрайтов

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

На этой странице

Импорт SVG в Unity начинается с двух решений: какую версию редактора вы используете и где появится графика. Unity 6.3 включает импорт SVG для UI Toolkit и Texture2D. Прямой импорт SVG как ресурсов Sprite или uGUI использует пакет Vector Graphics; более ранние редакторы — старую линейку пакета. Unity описывает это разделение в руководстве по версиям Vector Graphics.

Если редактируемый SVG уже есть, подготовьте этот файл для импортера. Если единственный исходник — PNG или JPG, трассируйте только тогда, когда нужны векторные фигуры. Текстура или спрайт пиксельной графики могут остаться растровыми.

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

Для геометрии сцены в другом движке используйте проверки импорта SVG в Unreal Engine, чтобы проверить исходные фигуры Motion Design, отверстия и отдельные части.

Выберите способ импорта перед правкой графики

Выбирайте способ по целевому компоненту. Ресурс, работающий в компоновке UI Toolkit, не обязательно подходит полю Sprite Renderer.

Редактор UnityНазначениеНачальный способ
6.3 или новееUI ToolkitВстроенный импорт SVG как векторного изображения UI Toolkit
6.3 или новееПотребитель Texture2DВстроенный импорт SVG как текстуры
6.3 или новееSprite Renderer или uGUI SVGImageПредварительный пакет Vector Graphics 3.0
До 6.3Процесс SVG через пакетСовместимый предварительный пакет Vector Graphics 2.0

Таблица следует требованиям пакета Unity. Закрепите версии редактора и пакета проекта. Инструкции для Unity 2018 или предварительного импортера 2.0 могут описывать другие параметры, чем современный проект 6.3.

Сначала выберите назначение
Концептуальная схема SVG-графики, разветвляющейся к панели UI Toolkit и сцене спрайтов.
Концептуальная иллюстрация: выберите назначение в Unity перед подготовкой или импортом SVG. Это не снимок Unity или результат преобразования.
Храните небольшую проверку импорта рядом с графикой

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

Подготовьте SVG, который импортер сможет воспроизвести

Откройте исходник в векторном редакторе и проверьте реальные объекты. Сохраните исходный оригинал, затем сделайте отдельный экспорт для Unity.

Подтвердите наличие контуров

SVG может хранить растр через элемент <image>; само расширение не устанавливает наличие векторной геометрии. Спецификация встроенного содержимого W3C описывает это различие. Выделите часть графики в редакторе и проверьте объекты или разметку. Используйте диагностику встроенного растра, если это один прямоугольник изображения.

Если исходный векторный файл существует, экспортируйте его заново. Трассировка PNG, экспортированного из этого оригинала, добавляет работу восстановления и может изменить силуэт. Для семейства значков сначала согласуйте холст, поля и визуальную толщину; руководство по подготовке SVG для UI kit рассматривает эти решения для набора.

Заменяйте неподдерживаемые функции намеренно

Встроенный импортер Unity поддерживает часть SVG 1.1. Документированные исключения включают текст, не преобразованный в контуры, пиксельные маски, фильтры, взаимодействие и анимацию. Поэтому браузерный предпросмотр может быть правильным, а результат Unity — отличаться. См. ограничения SVG Unity.

Подготовьте копию для передачи по потребностям графики:

  • Преобразуйте декоративные надписи в контуры. Подписи интерфейса оставьте текстом интерфейса, если нужны редактирование или локализация.
  • Воссоздайте нужную тень или свечение эффектом, поддерживаемым назначением, либо оставьте графику растровой.
  • Проверяйте маски отдельно от контуров отсечения. Мягкая пиксельная маска и геометрическое отсечение — разные конструкции.
  • Планируйте анимацию в Unity вместо зависимости от анимации внутри SVG.

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

Удалите случайную сложность

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

Нет полезного универсального целевого количества узлов для всей игровой графики. Геометрической стрелке и персонажу, нарисованному от руки, нужна разная детализация. Руководство по очистке узлов SVG помогает решить, какие точки несут информацию о форме.

Импортируйте в UI Toolkit в Unity 6.3 или новее

Начните с SVG для передачи, чей силуэт и эффекты уже проверены.

  1. Добавьте SVG в папку Assets проекта и выделите его.
  2. Задайте Generated Asset Type как UI Toolkit Vector Image в Inspector.
  3. Примените настройки импорта и используйте полученное векторное изображение в нужном элементе UI Toolkit.
  4. Просмотрите реальную компоновку в минимальном и максимальном нужных размерах отображения.

Unity описывает выбор ресурса при встроенном импорте в Work with vector graphics. Если целевому компоненту нужен Texture2D, выберите этот тип результата и проверьте полученную текстуру в нужном размере.

Для UI Toolkit начните с рекомендованных базовых настроек тесселяции. Target Resolution и Zoom Factor позволяют импортеру настроить разбиение кривых под нужные условия отображения. Unity рекомендует наименьшее целевое разрешение, дающее удовлетворительный результат. Настройки импорта изображений объясняют управление.

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

Импортируйте для Sprite Renderer или uGUI

Установите совместимый пакет com.unity.vectorgraphics через Package Manager, если назначению нужна его поддержка Sprite или uGUI. Выберите соответствующий создаваемый ресурс для компонента и подтвердите, что компонент принимает его. Текущая документация пакета различает эти типы импорта и встроенный способ UI Toolkit.

Для Sprite Renderer проверьте размер объекта в сцене и опорную точку перед копированием в префабы. Для uGUI проверьте используемый проектом процесс SVGImage. Обычный процесс растровых спрайтов остается альтернативой, если графика уже правильно выглядит в нужных размерах.

Старый пакет 2.0 описывает единицы SVG на единицу сцены, опорные точки спрайтов и настройки тесселяции. Он также обозначает пакет как экспериментальный и не рекомендует производственное использование. Команды, поддерживающие этот способ, должны рассмотреть руководство пакета 2.0 вместе с ограничениями проекта перед добавлением.

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

Диагностируйте первое видимое отличие

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

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

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

Проверяйте принятый ресурс и в целевой сборке, и в редакторе. Запишите, остается ли он читаемым в минимальном размере, совпадают ли цвета и прозрачность и сохраняются ли ссылки сцен или префабов после нового импорта. Решения производительности требуют профилирования своей сцены; расширение SVG не является измерением производительности.

Как это выглядит с PerfectVector

PerfectVector подходит перед импортом Unity, когда единственный пригодный исходник — растровая графика и нужны редактируемые фигуры. Загрузите один PNG или JPG с плоскими цветами в конвертер изображений в векторы PerfectVector, сравните трассированный силуэт и отверстия с оригиналом, затем проверьте скачанный SVG в векторном редакторе перед импортом Unity.

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

Оставляйте фотографию, текстуру, мягкое свечение или намеренный спрайт пиксельной графики в растре, если это сохраняет задуманный вид. Для простого геометрического символа ручное рисование может давать больше контроля, чем трассировка. PerfectVector подготавливает исходную геометрию SVG; он не меняет набор поддерживаемых функций Unity и не проверяет отрисовку во время работы. Если различие форматов незнакомо, начните с содержимого файла SVG.

Частые вопросы

Нужен ли Unity 6 пакет Vector Graphics? Ответ зависит от минорной версии и назначения. Unity 6.3 имеет встроенный импорт SVG для UI Toolkit и Texture2D. Импорт Sprite и uGUI использует предварительный пакет 3.0. Более ранние версии Unity используют совместимый предварительный пакет 2.0.

Сделает ли смена расширения PNG на SVG векторный спрайт? Нет. Переименование не трассирует пиксели. Используйте исходный вектор, нарисуйте фигуры или трассируйте подходящую растровую графику и проверьте полученные контуры перед импортом Unity.

Может ли трассировка исправить SVG, неверно импортируемый Unity? Только когда исходной геометрии нужно восстановление. Если SVG содержит правильные контуры, но проблема вызвана неверным типом создаваемого ресурса или неподдерживаемым эффектом, сначала исправьте решение импорта или экспорта.

Источники

  1. Unity — Vector Graphics 3.0 package guide — Определяет разделение по версиям редактора и встроенные способы против пакета Sprite/uGUI.
  2. Unity — Work with vector graphics — Описывает нативные варианты ресурсов и неподдерживаемые функции SVG.
  3. Unity — Image import settings — Объясняет настройки векторных изображений UI Toolkit и управление тесселяцией.
  4. Unity — Vector Graphics 2.0 package manual — Рассматривает старый импортер, единицы сцены, управление опорной точкой и экспериментальный статус.
  5. W3C — SVG embedded content — Устанавливает возможность растрового содержимого в SVG.

Если ресурс Unity начинается с плоского PNG или JPG и нужны редактируемые контуры, преобразуйте изображение с PerfectVector. Проверьте силуэт, отверстия и ненужные фоновые фигуры, затем испытайте SVG в компоненте Unity и размерах отображения, которые планируете выпускать.

Ещё из блога

Превратите файл изображения в
редактируемый SVG