Import SVG do Unity: przygotuj grafikę do UI Toolkit lub sprite’ów

Import SVG do Unity zaczyna się od dwóch decyzji: której wersji edytora używasz i gdzie grafika ma się pojawić. Unity 6.3 zawiera obsługę importu SVG do UI Toolkit i jako Texture2D. Bezpośredni import SVG jako zasobów Sprite lub uGUI wymaga pakietu Vector Graphics; wcześniejsze wersje edytora korzystają ze starszej linii tego pakietu. Unity opisuje ten podział w dokumencie Vector Graphics version guide.

Jeśli masz już edytowalny SVG, przygotuj ten plik do importu. Jeśli jedynym źródłem jest PNG lub JPG, przeprowadź wektoryzację tylko wtedy, gdy potrzebujesz kształtów wektorowych. Tekstura lub sprite w stylu pixel art mogą pozostać obrazami rastrowymi.

Przetestuj jedną reprezentatywną ikonę, aby oddzielić problemy z grafiką źródłową od problemów z importem i wyświetlaniem w Unity, zanim przetworzysz cały zestaw.

Jeśli przygotowujesz geometrię sceny w innym silniku, skorzystaj z listy kontroli importu SVG do Unreal Engine, aby sprawdzić źródłowe kształty, otwory i oddzielne elementy dla Motion Design.

Wybierz sposób importu, zanim zaczniesz edytować grafikę

Wybierz sposób importu na podstawie komponentu docelowego. Zasób, który działa w układzie UI Toolkit, niekoniecznie nadaje się do pola komponentu Sprite Renderer.

Tabela opiera się na wymaganiach pakietu Unity. Ustal stałe wersje edytora i pakietu używane w projekcie. Instrukcje dla Unity 2018 lub importera 2.0 w wersji preview mogą opisywać inne opcje niż te dostępne w aktualnym projekcie 6.3.

Najpierw wybierz miejsce użycia

Zachowaj prosty przykład do testowania importu obok swojej grafiki

Wybierz ikonę z krzywą, wewnętrznym otworem i efektami graficznymi wymaganymi w zestawie. Zachowaj oryginalny SVG obok prostej wersji złożonej z kształtów o jednolitym wypełnieniu. Jeśli prosta wersja importuje się poprawnie, sprawdź bardziej złożoną grafikę, zanim zaczniesz zmieniać cały projekt.

Przygotuj SVG, który importer potrafi odtworzyć

Otwórz plik źródłowy w edytorze grafiki wektorowej i sprawdź rzeczywiste obiekty. Zachowaj oryginalny plik główny, a następnie przygotuj osobny eksport przeznaczony do Unity.

Upewnij się, że grafika zawiera ścieżki

SVG może zawierać obraz rastrowy w elemencie <image>; samo rozszerzenie nie świadczy o tym, że grafika ma geometrię wektorową. To rozróżnienie opisuje W3C embedded-content specification. Zaznacz fragment grafiki w edytorze i sprawdź jego obiekty lub kod. Jeśli jest to jeden prostokąt z obrazem, skorzystaj z poradnika rozpoznawania osadzonego obrazu rastrowego.

Jeśli istnieje oryginalny plik wektorowy, wyeksportuj go ponownie. Wektoryzacja PNG wyeksportowanego z tego pliku głównego wymaga dodatkowego odtwarzania kształtów i może zmienić sylwetkę. W przypadku rodziny ikon najpierw ustal obszar roboczy, odstępy i ciężar wizualny; poradnik przygotowania SVG do zestawu UI omawia te decyzje dotyczące całego zestawu.

Świadomie zastępuj nieobsługiwane funkcje

Natywny importer Unity obsługuje część SVG 1.1. Udokumentowane wyłączenia obejmują tekst niezamieniony na ścieżki, maski rastrowe, filtry, interakcję i animację. Podgląd w przeglądarce może więc wyglądać poprawnie, mimo że wynik w Unity będzie inny. Zobacz SVG limitations w dokumentacji Unity.

Przygotuj kopię przeznaczoną do importu zgodnie z potrzebami grafiki:

• Zamień ozdobne napisy na obrysy. Etykiety interfejsu pozostaw jako tekst w interfejsie, jeśli wymagają edycji lub lokalizacji.
• Odtwórz potrzebny cień lub poświatę za pomocą efektu obsługiwanego w docelowym miejscu użycia albo pozostaw tę grafikę jako obraz rastrowy.
• Sprawdzaj maski oddzielnie od ścieżek przycinania. Miękka maska rastrowa i geometryczne przycięcie to różne konstrukcje.
• Zaplanuj animację w Unity zamiast polegać na animacji osadzonej w SVG.

Nie zastępuj każdego gradientu jednolitym wypełnieniem tylko dlatego, że filtr nie jest obsługiwany. Przetestuj efekt, którego projekt rzeczywiście używa. Jeśli złożona odznaka nie importuje się poprawnie, wyeksportuj wersję z jednolitym wypełnieniem i przywracaj efekty pojedynczo. W ten sposób wyodrębnisz funkcję, która zmienia wygląd.

Usuń przypadkową złożoność

Usuń zbędne drobinki, ukryte duplikaty i prostokąty tła, które nie należą do ikony. Upraszczaj wyraźnie poszarpaną krzywą tylko przy jednoczesnym porównywaniu jej ze źródłem. Jeśli podczas porządkowania zamknie się mały otwór, edycja jest nieudana, nawet gdy plik stanie się krótszy.

Nie istnieje uniwersalna docelowa liczba węzłów, która byłaby użyteczna dla każdej grafiki do gier. Geometryczna strzałka i ręcznie rysowana postać wymagają różnego poziomu szczegółowości. Poradnik porządkowania węzłów SVG pomoże Ci zdecydować, które punkty niosą informacje o kształcie.

Importuj do UI Toolkit w Unity 6.3 lub nowszym

Zacznij od SVG przygotowanego do importu, którego sylwetkę i efekty masz już sprawdzone.

1. Dodaj SVG do folderu Assets projektu i zaznacz go.
2. W panelu Inspector ustaw Generated Asset Type na UI Toolkit Vector Image.
3. Zastosuj ustawienia importu i użyj powstałego obrazu wektorowego w docelowym elemencie UI Toolkit.
4. Sprawdź podgląd rzeczywistego układu przy najmniejszym i największym planowanym rozmiarze wyświetlania.

Unity opisuje wybór natywnego typu zasobu w dokumencie Work with vector graphics. Jeśli element korzystający z zasobu wymaga Texture2D, wybierz ten typ wyjściowy i sprawdź powstałą teksturę w docelowym rozmiarze.

W przypadku UI Toolkit zacznij od zalecanych podstawowych ustawień teselacji. Target Resolution i Zoom Factor pozwalają importerowi skonfigurować podział krzywych na segmenty pod kątem planowanych warunków wyświetlania. Unity zaleca używanie najniższej rozdzielczości docelowej, która daje zadowalające rezultaty. Dokument Image import settings wyjaśnia działanie tych ustawień.

Przeprowadzaj dwie osobne kontrole: czy SVG opisuje właściwy kształt i czy zaimportowany zasób dobrze go wyświetla. Zwiększenie teselacji nie przywróci otworu, który zniknął podczas eksportu pliku źródłowego.

Importuj do Sprite Renderer lub uGUI

Zainstaluj zgodny pakiet com.unity.vectorgraphics przez Package Manager, jeśli docelowe miejsce użycia wymaga jego obsługi Sprite lub uGUI. Wybierz odpowiedni generowany zasób dla swojego komponentu i potwierdź, że komponent go przyjmuje. Aktualna dokumentacja pakietu odróżnia te typy importu od wbudowanego sposobu importu do UI Toolkit.

W przypadku Sprite Renderer sprawdź rozmiar obiektu w scenie i jego punkt zakotwiczenia (pivot), zanim skopiujesz go do prefabów. W przypadku uGUI sprawdź proces pracy z SVGImage używany w Twoim projekcie. Standardowy proces pracy ze sprite’ami rastrowymi pozostaje alternatywą, jeśli grafika już wygląda poprawnie w wymaganych wymiarach.

Dokumentacja starszego pakietu 2.0 opisuje liczbę jednostek SVG na jednostkę sceny, punkty zakotwiczenia sprite’ów (pivot) i ustawienia teselacji. Określa też ten pakiet jako eksperymentalny i odradza jego użycie produkcyjne. Zespoły utrzymujące ten sposób importu powinny przed dodaniem pakietu zapoznać się z dokumentem Vector Graphics 2.0 package manual, uwzględniając ograniczenia swojego projektu.

Jeśli aktualizujesz istniejący projekt, wykonaj test importu w kopii lub w gałęzi objętej kontrolą wersji. Porównaj typy generowanych zasobów i odwołania do nich w rzeczywistych prefabach i scenach. Nie traktuj poprawnego podglądu miniatury jako jedynego testu migracji i nie wprowadzaj zbiorczej zmiany plików .meta na podstawie starego wpisu na forum, jeśli nie udało Ci się odtworzyć opisanego w nim konkretnego problemu.

Zdiagnozuj pierwszą widoczną różnicę

Prowadź krótki zapis testu dla każdego reprezentatywnego zasobu: plik źródłowy, wersje edytora i pakietu, komponent docelowy, oczekiwany rozmiar wyświetlania oraz pierwsza widoczna rozbieżność.

Załóżmy na przykład, że odznaka w kształcie gwiazdy importuje się, ale znika otwór w jej środku. Najpierw otwórz SVG przygotowany do importu i potwierdź, że otwór w nim istnieje. Jeśli tak, porównaj w Unity uproszczony eksport odznaki. Jeśli w tej wersji otwór pozostaje, sprawdź nakładające się kształty, sposób budowy wypełnienia lub maskę w oryginalnej odznace. Ponowna wektoryzacja źródła jest przydatna tylko wtedy, gdy błędna jest sama geometria ścieżek.

Przetestuj zaakceptowany zasób zarówno w docelowej kompilacji, jak i w edytorze. Zapisz, czy pozostaje czytelny w najmniejszym rozmiarze, czy kolory i przezroczystość są zgodne oraz czy odwołania w scenach lub prefabach pozostają poprawne po imporcie od nowa. Decyzje dotyczące wydajności wymagają profilowania własnej sceny; rozszerzenie SVG nie jest miarą wydajności.

Jak to wygląda z PerfectVector

PerfectVector przydaje się przed importem do Unity, gdy jedynym odpowiednim źródłem jest grafika rastrowa, a potrzebujesz edytowalnych kształtów. Prześlij jeden PNG lub JPG z obszarami jednolitego koloru do konwertera obrazów na grafikę wektorową PerfectVector, porównaj sylwetkę i otwory po wektoryzacji z oryginałem, a następnie sprawdź pobrany SVG w edytorze grafiki wektorowej przed zaimportowaniem go do Unity.

Używaj tej samej reprezentatywnej ikony na wszystkich etapach przekazywania grafiki. Zaakceptuj wynik wektoryzacji dopiero wtedy, gdy możesz edytować przewidziane obszary, puste przestrzenie pozostają otwarte, a porządkowanie nie zniekształciło kształtu. Następnie przeprowadź opisany wyżej test docelowego miejsca użycia w Unity.

Pozostaw zdjęcie, teksturę, miękką poświatę lub celowo zaprojektowany sprite w stylu pixel art jako obraz rastrowy, jeśli pozwala to zachować zamierzony wygląd. W przypadku prostego symbolu geometrycznego ręczne rysowanie może zapewnić łatwiejszą kontrolę niż wektoryzacja. PerfectVector przygotowuje źródłową geometrię SVG; nie zmienia zestawu funkcji obsługiwanych przez Unity ani nie sprawdza renderowania podczas działania aplikacji. Jeśli różnica między formatami jest Ci obca, zacznij od artykułu o tym, co zawiera plik SVG.

Najczęściej zadawane pytania

Czy Unity 6 wymaga pakietu Vector Graphics? Odpowiedź zależy od konkretnej wersji z serii Unity 6 i miejsca użycia. Unity 6.3 ma wbudowany import SVG do UI Toolkit i jako Texture2D. Import do Sprite i uGUI korzysta z pakietu 3.0 w wersji preview. Wcześniejsze wersje Unity korzystają ze sposobu importu opartego na zgodnym pakiecie 2.0 w wersji preview.

Czy zmiana rozszerzenia PNG na SVG utworzy wektorowy sprite? Nie. Zmiana nazwy pliku nie wektoryzuje jego pikseli. Użyj oryginalnego źródła wektorowego, narysuj kształty albo przeprowadź wektoryzację odpowiedniej grafiki rastrowej i sprawdź powstałe ścieżki przed importem do Unity.

Czy wektoryzacja może naprawić SVG, który Unity importuje niepoprawnie? Tylko wtedy, gdy geometria źródłowa wymaga odtworzenia. Jeśli SVG zawiera poprawne ścieżki, ale problem powoduje niewłaściwy typ generowanego zasobu lub nieobsługiwany efekt, najpierw skoryguj sposób importu lub eksportu.

Źródła

1. Unity — Vector Graphics 3.0 package guide — Określa podział według wersji edytora oraz rozróżnienie między wbudowanym importem a importem do Sprite/uGUI opartym na pakiecie.
2. Unity — Work with vector graphics — Opisuje natywne typy zasobów i nieobsługiwane funkcje SVG.
3. Unity — Image import settings — Wyjaśnia ustawienia obrazów wektorowych UI Toolkit i opcje teselacji.
4. Unity — Vector Graphics 2.0 package manual — Omawia starszy importer, ustawienia jednostek sceny i punktu zakotwiczenia (pivot) oraz eksperymentalny status pakietu.
5. W3C — SVG embedded content — Potwierdza, że SVG może zawierać obraz rastrowy.

---

Jeśli punktem wyjścia dla Twojego zasobu Unity jest PNG lub JPG z obszarami jednolitego koloru i potrzebujesz edytowalnych ścieżek, przekonwertuj obraz za pomocą PerfectVector. Sprawdź sylwetkę, otwory i niepożądane kształty tła, a następnie przetestuj SVG w komponencie Unity i rozmiarach wyświetlania, których zamierzasz użyć w wydanej wersji.