Import SVG w Unreal Engine: sprawdź geometrię w Motion Design

SVG Importer w Unreal Engine umożliwia pracę z geometrią w Motion Design. Samouczek importera SVG firmy Epic opisuje przekształcanie plików grafiki wektorowej 2D w geometrię 3D. Zacznij od sprawdzenia wtyczki i dokumentacji dla swojej wersji silnika, a następnie zaimportuj niewielki plik źródłowy, w którym łatwo rozpoznasz otwory, kolory i oddzielne elementy.

To inne zadanie niż wyświetlanie SVG jako obrazu w interfejsie podczas działania aplikacji. Podgląd tekstury, aktor w scenie i mechanizm renderowania widżetów to różne rezultaty. Ten poradnik skupia się na przygotowaniu grafiki do utworzenia geometrii sceny i ocenie, czy powstałe obiekty nadają się do projektowanej animacji.

Przykładem jest autorska odznaka z otworem i oddzielnym rombem. To opisany proces do wypróbowania w Twoim projekcie, a nie relacja z przeprowadzonego testu importu lub wyciągania geometrii w Unreal.

Wybierz zastosowanie, zanim zmienisz grafikę

Zdecyduj, czym ma się stać grafika. Samo rozszerzenie SVG nie odpowiada na to pytanie.

Przewodnik szybkiego startu Motion Design firmy Epic opisuje wtyczkę edytora do tworzenia grafiki na potrzeby transmisji. Jej interfejs przypomina UMG, ale oferuje też możliwości wykraczające poza widżety. To podobieństwo nie dowodzi, że zwykły widżet UMG Image może wczytywać dowolne pliki SVG.

Jeśli przenosisz ten sam plik źródłowy między silnikami, poradnik importu SVG w Unity omawia odrębny importer i wybór docelowego zastosowania. Przyjęcie pliku przez jeden silnik nie potwierdza jego obsługi w drugim.

Sprawdź wtyczkę w swojej wersji silnika

Strona wtyczki SVG Importer firmy Epic ma obecnie oznaczenie Beta, a jej kategorię podano jako Experimental. Potraktuj to jako powód do zweryfikowania tej funkcji w projekcie, który dostarczysz, zwłaszcza zanim uzależnisz od niej znaczną część projektu.

Oficjalny samouczek oznaczono jako przeznaczony dla Unreal Engine 5.4 i 5.5. Aktualna dokumentacja API to odrębne źródło, więc nie zakładaj, że panele lub etykiety ze starszego filmu dokładnie odpowiadają tym w innej zainstalowanej wersji.

Aby skonfigurować Motion Design, wykonaj odpowiednie instrukcje szybkiego startu i włącz Motion Design oraz Storm Sync Motion Design Bridge. Sprawdź, czy odpowiedni SVG Importer jest dostępny i włączony w tym projekcie. Zanim zaczniesz sprawdzać grafikę, uruchom edytor ponownie, jeśli o to poprosi.

Zacznij od niewielkiego poziomu testowego. Przewodnik szybkiego startu opisuje użycie pustego poziomu lub szablonu, a następnie polecenia Motion Design > Create Defaults > Spawn. Przeprowadź ten test oddzielnie od złożonej sekwencji, aby łatwiej odróżnić brak aktora, problem z kamerą lub konfiguracją wtyczki od nieprawidłowego pliku źródłowego.

Przygotuj odznakę z otworem i jednym oddzielnym elementem

Zapisz ten autorski przykład jako hollow-badge.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
  <path fill="#147D78" fill-rule="evenodd"
    d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
  <path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>

Turkusowa ścieżka tworzy kwadratową ramkę z pustym kwadratowym środkiem. Koralowy romb jest osobną ścieżką, oddzieloną odstępem od ramki. W pliku nie ma prostokąta tła, obrysu, tekstu, filtra, obrazu zewnętrznego ani animacji.

Te pominięcia są celowe. Pozwalają odpowiedzieć na kilka przydatnych pytań przed testowaniem złożonej ilustracji: czy środek pozostaje otwarty, czy romb pozostaje oddzielony i czy oba kolory są odwzorowane zgodnie z zamierzeniem?

Sprawdź też własny plik źródłowy w edytorze grafiki wektorowej. Jeśli zawiera jedynie fotografię opakowaną w kontener SVG, sprawdzenie osadzonego obrazu rastrowego pomoże rozpoznać taką sytuację. Zmiana nazwy bitmapy lub opakowanie jej w SVG nie zapewnia zamkniętych konturów potrzebnych w tym ćwiczeniu z geometrią.

Zachowaj edytowalny plik wzorcowy i wyeksportuj kopię do dalszego użycia. Jako punkt wyjścia zastosuj proste, zamknięte kształty z wypełnieniem; dodawaj efekty, gradienty lub rozbudowane przycinanie tylko wtedy, gdy projekt ich wymaga i możesz zweryfikować ich obsługę. Istnienie klasy o podobnej nazwie w dokumentacji API nie jest pełną gwarancją zgodności danej funkcji.

Zaimportuj jeden plik i rozpoznaj powstały zasób

Wybierz folder zawartości projektu na potrzeby eksperymentu. Ogólny poradnik importu zasobów firmy Epic opisuje przycisk Import w Content Browser oraz import przez przeciąganie i upuszczanie. Po włączeniu odpowiedniego importera SVG wybierz niewielki plik SVG i sprawdź opcje właściwe dla tego importera oraz wszelkie komunikaty diagnostyczne w zainstalowanej wersji.

Jeśli plik zostanie odrzucony lub oczekiwany importer się nie pojawi, najpierw sprawdź wersję silnika i konfigurację wtyczki. Wielokrotne upraszczanie grafiki nie sprawi, że niedostępna funkcja importu stanie się dostępna.

Po imporcie rozpoznaj typ zasobu, zanim umieścisz go w scenie. SVGImporter API firmy Epic obejmuje dane SVG, aktorów SVG i komponenty siatek dynamicznych. To przydatne rozróżnienia: sam zasób z danymi źródłowymi nie dowodzi, że scena zawiera zamierzoną geometrię.

Użyj sposobu umieszczania aktorów SVG właściwego dla swojej wersji, aby wprowadzić zasób do sceny testowej. Zestaw narzędzi Motion Design obejmuje aktorów SVG. Zaznacz umieszczony obiekt i obejrzyj go od przodu, zanim zmienisz głębokość, materiały lub animację. Zanotuj, którego zasobu i aktora użyto, aby inna osoba z zespołu mogła odtworzyć konfigurację.

Zapisz zaimportowane zasoby i zachowaj oryginalny plik SVG. Ogólny poradnik importu Unreal wyjaśnia, że zaimportowana zawartość jest przechowywana w zasobach projektu; plik źródłowy nadal jest istotny przy późniejszej edycji i ponownym imporcie.

Sprawdź otwór, kolory i oddzielne obiekty

Zacznij od kwadratowego otworu w odznace. Obejrzyj go na kontrastowym tle, a jeśli wynik ma głębokość, także pod innym kątem. Jasna powierzchnia zakrywająca środek może od przodu wyglądać jak otwór. Kryterium akceptacji jest to, czy obszar, który ma być pusty, rzeczywiście pozostaje pusty.

Jeśli środek zostanie wypełniony, sprawdź podścieżki pliku źródłowego i sposób wypełniania, zanim dodasz kolejne efekty. Poradnik rozwiązywania problemów z otworami w SVG wyjaśnia, dlaczego wypełniony kolorem obszar wewnętrzny i rzeczywisty otwór mogą wyglądać podobnie na płaskim podglądzie.

Następnie sprawdź przestrzeń obok rombu. Poszukaj niezamierzonego połączenia, dodatkowej powierzchni lub obszaru tła. Potem zaznacz obiekty potrzebne do animacji. Jeśli romb ma poruszać się niezależnie, sprawdź, czy dostępny układ aktorów i komponentów pozwala przesuwać go bez zmiany ramki. Akcent, który wizualnie jest oddzielony, sam w sobie nie potwierdza oczekiwanej struktury zaznaczania obiektów.

Po sprawdzeniu geometrii sprawdź kolory. Porównaj turkusową ramkę i koralowy romb z plikiem źródłowym przy materiałach i oświetleniu, których użyjesz w kompozycji. Nie uznawaj zacienionej powierzchni bocznej za błąd koloru w źródle wyłącznie dlatego, że jest ciemniejsza od przedniej.

W przypadku problemów związanych z głębokością lista kontrolna wyciągania geometrii SVG zawiera pytania dotyczące geometrii źródłowej, które warto sprawdzić. Nie jest to poradnik poleceń właściwych dla Unreal, a poprawny wygląd w tym teście nie potwierdza, że siatka jest szczelna i nadaje się do wytwarzania fizycznych obiektów.

Sprawdź grafikę z krzywymi i świadomie wykonuj ponowny import

Kwadratowy przykład nie zawiera krzywych, ale większość logo je ma. SVGImporter API firmy Epic opisuje ustawienie jakości konwersji krzywych typu spline na polilinie. Oznacza to, że krzywe źródłowe i wygenerowana reprezentacja wymagają osobnego sprawdzenia.

W przypadku logo z zaokrągleniami sprawdź krzywą zewnętrzną i najmniejszy otwór przy najmniejszej odległości kamery używanej w ujęciu. Jeśli krawędzie wyglądają na złożone z prostych odcinków, sprawdź odpowiednie ustawienia konwersji w swojej wersji silnika. Nie ustawiaj arbitralnie maksymalnej wartości tylko dlatego, że źródło jest grafiką wektorową.

Dokumentacja SVGData dla wersji 5.4 firmy Epic podaje, że zmiana ustawienia nadpisania jakości wywołuje ponowny import i ponowne wygenerowanie geometrii. Potraktuj to jako powód do zapisania stanu wyjściowego i ponownego sprawdzenia sceny po zmianie źródła lub ustawień konwersji, zamiast zakładać, że zmiany te nie wpłyną na efekty dalszej pracy. Nazwy właściwości w tej dokumentacji nie gwarantują, że panele edytora w późniejszych wersjach będą używać tych samych nazw.

Po ponownym imporcie powtórz sprawdzanie otworu, odstępu, materiału i sterowania obiektami. Przetestuj scenę w rzeczywistych warunkach docelowego użycia, zanim uporządkujesz cały zestaw grafik. Ten poradnik nie potwierdza obsługi podczas działania spakowanej aplikacji, renderowania SVG takiego jak w przeglądarce ani wydajności wtyczki we wszystkich zastosowaniach.

Gdy emblemat rastrowy wymaga odtworzenia

Jeśli nie masz wektorowego pliku wzorcowego, a źródłem jest prosty emblemat PNG lub JPG, proces przekształcania obrazu w grafikę wektorową w PerfectVector może pomóc przygotować statyczny plik SVG do oceny. Przytnij obraz do obszaru z emblematem, sprawdź otwór i oddzielny akcent na podglądzie, a następnie porównaj proponowany wynik ze źródłem. Pobierz zaakceptowany plik SVG, po czym przeprowadź te same kontrole geometrii w Unreal.

Wektoryzacja nie wybiera jednostek sceny, nie tworzy rigu, nie przypisuje materiałów produkcyjnych ani nie gwarantuje konkretnej topologii siatki. Korzystaj z istniejącego wektorowego pliku wzorcowego, jeśli jest dostępny. Zachowaj fotografie i złożone efekty malarskie jako obrazy rastrowe, jeśli lepiej oddaje to ich wygląd. W przypadku prostej geometrycznej odznaki bezpośrednie narysowanie kilku potrzebnych kształtów może dać większą kontrolę niż odtwarzanie ich z pikseli.

Przygotuj krótką notatkę do przekazania projektu: plik źródłowy, wersja silnika i wtyczki, ustawienia importera, obszary, które mają pozostać puste, części poruszające się niezależnie oraz odległość kamery użyta podczas oceny. Poradniki przygotowania grafiki na blogu omawiają decyzje dotyczące źródła podejmowane przed tym etapem właściwym dla konkretnego silnika.

FAQ

Czy Unreal Engine może importować pliki SVG? Tak. Epic udostępnia SVG Importer używany do tworzenia geometrii w Motion Design. Sprawdź tę funkcję i dokumentację dla swojej wersji silnika, a następnie zweryfikuj zaimportowany zasób i wynik w scenie.

Czy import SVG oznacza, że UMG może wyświetlać dowolne SVG podczas działania aplikacji? Nie. Tworzenie geometrii w Motion Design nie potwierdza możliwości wczytywania dowolnych SVG podczas działania aplikacji w zwykłych widżetach UMG. Wybierz i przetestuj sposób renderowania wymagany przez interfejs.

Dlaczego otwór w moim SVG po imporcie wygląda na wypełniony? Sprawdź, czy źródło zawiera rzeczywisty otwór, czy wypełniony kolorem obszar wewnętrzny, a następnie sprawdź podścieżki i sposób wypełniania. Zweryfikuj zaimportowaną geometrię na kontrastowym tle, zamiast polegać wyłącznie na widoku od przodu.

Czy mogę przekształcić logo PNG w obiekt 3D gotowy do użycia w Unreal? Wektoryzacja może odtworzyć statyczne kształty źródłowe, ale nie kończy pracy nad sceną w Unreal. Zaimportuj zaakceptowany plik SVG, sprawdź wygenerowaną geometrię i materiały oraz zweryfikuj możliwości sterowania obiektami potrzebne w Twoim projekcie.

Źródła

1. Epic Games — Importing + SVG importer — tworzenie geometrii w Motion Design i kontekst wersji samouczka.
2. Epic Games — SVG Importer plugin — zakres działania wtyczki, oznaczenie Beta i kategoria Experimental.
3. Epic Games — Motion Design Quick Start Guide — konfiguracja projektu, zakres działania w edytorze i zestaw narzędzi z aktorami SVG.
4. Epic Games — Importing Assets Directly — ogólne zasady importu w Content Browser i zapisywania zasobów.
5. Epic Games — SVGImporter API — dane, aktorzy, klasy siatek dynamicznych i zagadnienia konwersji krzywych typu spline.
6. Epic Games — SVGData, Unreal Python 5.4 — ustawienie nadpisania jakości w konkretnej wersji i zachowanie przy ponownym generowaniu geometrii.

Zanim zaimportujesz cały zestaw, zweryfikuj otwór i oddzielny element jednej odznaki oraz jej zachowanie w scenie. Jeśli pozostała tylko grafika rastrowa, przygotuj plik SVG do oceny, sprawdź jego geometrię i przetestuj zaakceptowany plik w swoim projekcie Unreal.