Импорт SVG в Godot: Texture2D, DPITexture и чёткие иконки

Импорт SVG Godot обычно превращает SVG в пиксели при импорте ресурса. Поэтому увеличение текстуры может выглядеть размытым даже при качественных векторных контурах исходника. Для SVG-иконок, адаптирующихся к масштабированию области просмотра, текущий импортёр также предлагает DPITexture, который может заново растеризовать исходник с другим коэффициентом сверхвыборки. Godot описывает оба способа в руководстве импорта изображений.

Начните с проверки импортированного ресурса и способа его масштабирования проектом. Повторная трассировка уже корректного SVG не исправит текстуру низкого разрешения, растянутую на больший экран.

Выберите тип импорта SVG под поведение отображения

Два варианта ниже описывают типы ресурсов панели Import. Сам DPITexture наследуется от Texture2D, поэтому это не несвязанные семейства классов. Справочник DPITexture также отмечает класс экспериментальным; перед применением проверьте документацию версии Godot вашего проекта.

Импорт текстуры даёт ресурс текстуры. Считайте правку контуров, фигуры столкновений и производительность отдельными требованиями; имя SVG-файла не доказывает выполнение ни одного. Для браузерной сцены сравните способы геометрии и текстуры PixiJS, чтобы увидеть другой путь того же SVG в рендерер.

Исходник SVG и отрисованные пиксели

Сначала проверьте стандартный импорт Texture2D

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

1. Поместите SVG в проект и выберите в панели FileSystem.
2. Откройте панель Import и подтвердите тип Texture2D.
3. Проверьте SVG > Scale и Process > Size Limit, затем импортируйте заново после изменения опции.
4. Разместите текстуру в нужном спрайте или компоненте интерфейса и проверьте отображаемый размер.

SVG > Scale меняет размер растеризации; большее значение создаёт большее изображение. Это также влияет на размер текстуры в 2D, поэтому проверьте размеры узла или макета после изменения. Process > Size Limit может ограничивать импортированные размеры. Обе настройки описаны в справочнике импортёра текстур.

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

Не увеличивайте масштаб всех SVG произвольным крупным множителем. Сначала установите самое большое реальное использование, затем проверьте и самое маленькое. Ресурс, хороший в крупном просмотре инвентаря, может потерять узкий промежуток на крошечной кнопке.

Используйте DPITexture с подходящей сверхвыборкой

Для проверки адаптивного способа выберите SVG в FileSystem, измените тип импорта на DPITexture и импортируйте заново. Используйте то же размещение интерфейса, чтобы сравнение отвечало на один вопрос: устраняет ли смена растеризации несоответствие при нужных масштабах?

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

Нужно проверить два случая масштабирования:

• Масштабирование области просмотра: сверхвыборка изображений Godot может заново отрисовывать векторный исходник при изменении коэффициента масштаба области просмотра. Включите её для SVG импортом изображения как DPITexture.
• Масштабирование узла: сверхвыборка по Scale Node2D или Control отключена по умолчанию. Включите Oversampling with Scale нужного узла, если требуется это поведение.

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

2D-редактор может автоматически пересчитывать растр при изменении масштаба просмотра, что полезно для предварительного просмотра. Также запустите проект и проверьте реальное поведение области просмотра. При режиме растягивания Viewport сцена сначала рисуется с базовым размером области просмотра, затем масштабируется к окну; итоговое масштабирование всё ещё может определять вид интерфейса. Документация режимов растягивания описывает отличие от Canvas Items.

Подготовьте графику, воспроизводимую Godot

Изменение импортёра решает проблему размера отрисовки. Пропавшие объекты или изменённый силуэт требуют проверки исходной графики.

Ищите настоящие контуры

Откройте SVG в векторном редакторе и выберите видимую графику. Если вся иконка — один размещённый растр, исследуйте его перед настройкой Godot. Элемент SVG <image> может содержать растр, как объясняет справочник элемента MDN. Повторная растеризация оболочки не восстановит качественные кривые, которых не было у маленького встроенного PNG.

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

Преобразуйте декоративный текст в контуры

Импортёр SVG Godot не отрисовывает редактируемый текст SVG. Преобразуйте декоративные буквы в контуры в копии для передачи, сохраняя оригинал с редактируемым текстом. В Inkscape команда — Path > Object to Path. Godot описывает процедуру в Importing SVG images with text.

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

Проверяйте сложные эффекты отдельно

Godot использует ThorVG для отрисовки SVG. Интерпретатор SVG ThorVG имеет определённые границы поддержки; обзор SVG перечисляет анимацию, интерактивность и мультимедиа среди неподдерживаемых возможностей. Общие возможности движка ThorVG не гарантируют работу конкретной возможности SVG через импортёр Godot.

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

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

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

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

В Godot 4 фильтрация 2D-текстур настраивается через свойства CanvasItem со значением проекта по умолчанию. Старый урок может направлять к настройке импорта, которой там больше нет. Руководство импорта изображений описывает изменение. Фильтрация меняет вид существующих пикселей, но не исправляет отсутствующие детали исходника.

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

Проверьте иконку для приёмки в реальном интерфейсе

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

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

Маленький исходный SVG-файл не доказывает меньшего использования памяти GPU. Оба рассмотренных способа создают растровые текстуры для отображения. Профилируйте импортированные ресурсы и реальную сцену, если выбор определяется памятью или временем кадра.

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

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

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

Оставляйте фотографии, мягкие живописные эффекты и намеренный пиксель-арт растровыми, если это желаемый результат. Простую геометрическую иконку может быть легче нарисовать напрямую. Трассировка полезна для восстановления исходных фигур; она не настраивает импортёр Godot и не проверяет итоговую игру.

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

Может ли Godot импортировать SVG-файлы? Да. Стандартный импорт Texture2D растеризует SVG во время импорта. Текущий импортёр также предлагает DPITexture для SVG-изображений, которым нужна повторная растеризация со сверхвыборкой. Проверьте документацию версии проекта; DPITexture отмечен экспериментальным.

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

Сохраняет ли DPITexture редактируемые контуры SVG в сцене? Он сохраняет исходник SVG для повторной растеризации, но является ресурсом текстуры. Его импорт не предоставляет средства для правки контуров сцены и автоматически не создаёт нужную игре геометрию столкновений.

Источники

1. Godot — Importing images — Определяет типы импорта SVG, подготовку текста, ограничения рендерера и настройки фильтрации текстур.
2. Godot — DPITexture — Описывает наследование, сохранённый исходник SVG, масштабирование и экспериментальный статус.
3. Godot — Multiple resolutions — Объясняет растягивание области просмотра, сверхвыборку изображений, настройки масштаба узла и стоимость повторной растеризации.
4. Godot — ResourceImporterTexture — Описывает масштаб растра и ограничения размера стандартного импортёра текстур.
5. ThorVG — About ThorVG — Определяет границы поддержки интерпретатора SVG.
6. MDN — SVG image element — Объясняет наличие растровой графики в SVG.

---

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