Import SVG w Godot: Texture2D, DPITexture i ostre ikony

Import SVG w Godot zwykle zamienia SVG na piksele podczas importowania zasobu. Powiększenie takiej tekstury może więc powodować rozmycie, nawet jeśli plik źródłowy zawiera poprawne ścieżki wektorowe. Dla ikon SVG, które muszą dostosowywać się do skalowania obszaru wyświetlania, obecny importer oferuje także DPITexture — typ, który może ponownie rasteryzować źródło przy innym współczynniku nadpróbkowania. Godot opisuje obie możliwości w przewodniku po importowaniu obrazów.

Zacznij od sprawdzenia zaimportowanego zasobu i sposobu, w jaki projekt go skaluje. Ponowna wektoryzacja poprawnego SVG nie naprawi tekstury o niskiej rozdzielczości rozciąganej na większym ekranie.

Wybierz typ importu SVG odpowiedni do sposobu wyświetlania

Dwie poniższe opcje to typy zasobów w panelu Import. Sam DPITexture dziedziczy po Texture2D, więc nie są to niezależne rodziny klas. Dokumentacja DPITexture oznacza tę klasę również jako eksperymentalną; zanim zaczniesz jej używać, sprawdź dokumentację odpowiadającą wersji Godot w Twoim projekcie.

Import tekstury daje zasób tekstury. Edycję ścieżek, kształty kolizji i wydajność traktuj jako osobne wymagania; rozszerzenie SVG w nazwie pliku nie dowodzi, że którekolwiek z nich zostało spełnione. W przypadku sceny działającej w przeglądarce porównaj import SVG jako geometrii i tekstury w PixiJS, aby zobaczyć, jak ten sam SVG może trafiać do renderera inną drogą.

Źródło SVG i jego wyrenderowane piksele

Najpierw sprawdź domyślny import Texture2D

Zanim zmienisz ustawienia całego folderu ikon, użyj jednego reprezentatywnego zasobu. Wybierz kształt z zakrzywioną krawędzią, wąską szczeliną i drobnymi szczegółami istotnymi dla interfejsu.

1. Umieść SVG w projekcie i zaznacz go w panelu FileSystem.
2. Otwórz panel Import i upewnij się, że typ importu to Texture2D.
3. Sprawdź SVG > Scale oraz Process > Size Limit, a po zmianie opcji ponownie zaimportuj zasób.
4. Umieść teksturę w docelowym spricie lub komponencie interfejsu i sprawdź jej rozmiar wyświetlania.

SVG > Scale zmienia rozmiar rasteryzacji; większa wartość tworzy większy obraz. Wpływa też na rozmiar tekstury w 2D, dlatego po zmianie sprawdź wymiary węzła lub układu. Process > Size Limit może ograniczyć wymiary importowanego obrazu. Oba ustawienia opisano w dokumentacji importera tekstur.

Prosty przykład: obraz rastrowy o szerokości 32 pikseli wyświetlany na szerokości 128 pikseli ekranu jest powiększany. Krzywe wektorowe źródła nie dodają pikseli do już zaimportowanego obrazu rastrowego. Wygeneruj teksturę odpowiednią do tego zastosowania albo przetestuj DPITexture tam, gdzie nadpróbkowanie odpowiada potrzebom interfejsu.

Unikaj mnożenia skali każdego SVG przez dowolnie wybrany duży współczynnik. Najpierw ustal największy rzeczywisty rozmiar wyświetlania, a potem sprawdź także najmniejszy. Zasób, który wygląda dobrze w dużym podglądzie ekwipunku, może stracić wąską szczelinę po wyświetleniu na małym przycisku.

Używaj DPITexture z odpowiednimi ustawieniami nadpróbkowania

Aby przetestować wariant adaptacyjny, zaznacz SVG w panelu FileSystem, zmień jego typ importu na DPITexture i ponownie go zaimportuj. Użyj tego samego miejsca w interfejsie, aby porównanie odpowiadało na jedno pytanie: czy zmiana sposobu rasteryzacji usuwa rozbieżność przy docelowych skalach?

DPITexture zachowuje dane źródłowe SVG i może tworzyć obraz rastrowy dopasowany do nadpróbkowania. Jego base_scale określa skalę tekstury źródłowej; nie zamienia zasobu w edytowalne ścieżki w scenie. Zobacz dokumentację klasy DPITexture.

Sprawdź dwa przypadki skalowania:

• Skalowanie obszaru wyświetlania: nadpróbkowanie obrazów w Godot może ponownie renderować źródło wektorowe, gdy zmienia się współczynnik skali obszaru wyświetlania. Włącz je dla SVG, importując ten obraz jako DPITexture.
• Skalowanie węzła: nadpróbkowanie zależne od Scale węzła Node2D lub Control jest domyślnie wyłączone. Włącz Oversampling with Scale na odpowiednim węźle, jeśli potrzebujesz takiego zachowania.

Przewodnik Godot po nadpróbkowaniu wyjaśnia tę różnicę. Wskazuje też, że częste zmiany skali mogą obciążać CPU, ponieważ tekstura jest renderowana ponownie. Zanim zastosujesz tę opcję na szerszą skalę, przetestuj animowane skalowanie w scenie, która trafi do wydanej wersji.

Edytor 2D może automatycznie ponownie próbkować obraz podczas zmiany powiększenia, co czyni go przydatnym narzędziem do podglądu. Uruchom też projekt i przetestuj rzeczywiste zachowanie jego obszaru wyświetlania. W trybie rozciągania Viewport scena jest najpierw rysowana w bazowym rozmiarze obszaru wyświetlania, a następnie skalowana do okna; to końcowe skalowanie nadal może decydować o wyglądzie interfejsu. Dokumentacja trybów rozciągania opisuje różnicę względem trybu Canvas Items.

Przygotuj grafikę, którą Godot potrafi odtworzyć

Zmiana importera rozwiązuje problem rozmiaru renderowania. Brakujące obiekty lub zmieniony kształt wymagają sprawdzenia grafiki źródłowej.

Sprawdź, czy grafika zawiera rzeczywiste ścieżki

Otwórz SVG w edytorze grafiki wektorowej i zaznacz widoczną grafikę. Jeśli cała ikona jest pojedynczym osadzonym obrazem rastrowym, zbadaj grafikę źródłową, zanim zaczniesz zmieniać ustawienia Godot. Element <image> w SVG może zawierać treść rastrową, co wyjaśnia dokumentacja elementu w MDN. Ponowna rasteryzacja takiego pliku nie odtworzy wyraźnych krzywych, których mały osadzony PNG nigdy nie zawierał.

Skorzystaj z listy kontrolnej osadzonych obrazów rastrowych, aby odróżnić osadzone piksele od edytowalnych kształtów. Jeśli istnieje wektorowy plik źródłowy, wyeksportuj grafikę z niego. Jeśli przygotowujesz zestaw, zachowaj spójny obszar roboczy i marginesy, korzystając z przewodnika po SVG do zestawów UI.

Zamień tekst dekoracyjny na ścieżki

Importer SVG w Godot nie renderuje tekstu SVG pozostawionego jako tekst. Zamień dekoracyjne liternictwo na ścieżki w kopii przeznaczonej do użycia w projekcie, zachowując plik źródłowy z edytowalnym tekstem. W Inkscape służy do tego polecenie Path > Object to Path. Godot opisuje tę procedurę w Importing SVG images with text.

Jeśli etykieta przycisku wymaga tłumaczenia lub częstej edycji, zachowaj ją jako tekst interfejsu, a ikonę importuj osobno. Zamiana całego interfejsu na ścieżki utrudniłaby takie późniejsze zmiany.

Testuj złożone efekty osobno

Godot używa ThorVG do renderowania SVG. Interpreter SVG w ThorVG ma określony zakres obsługi; jego przegląd SVG wymienia animację, interaktywność i multimedia wśród nieobsługiwanych funkcji. Ogólne możliwości silnika ThorVG nie gwarantują, że konkretna funkcja SVG działa przez importer Godot.

Jeśli odznaka traci szczegół, porównaj wyeksportowany SVG z kopią zbudowaną z prostych kształtów z wypełnieniem. Dodawaj potrzebne efekty z powrotem po jednym. Zachowaj eksport rastrowy, jeśli wierniej odtwarza złożoną grafikę, a projekt nie potrzebuje skalowalnych kształtów źródłowych.

Nie usuwaj wąskiego otworu podczas upraszczania tylko po to, by zmniejszyć złożoność pliku. Kryterium akceptacji jest docelowy kształt, w tym jego puste przestrzenie.

Zdiagnozuj pierwszą widoczną rozbieżność

Zanotuj, jaki plik źródłowy jest używany, typ importu, skalę SVG, skalę węzła, ustawienia obszaru wyświetlania i oczekiwany rozmiar wyświetlania. Następnie zmień ustawienie związane z objawem.

W Godot 4 filtrowanie tekstur 2D konfiguruje się przez właściwości CanvasItem, a projekt ma ustawienie domyślne. Starszy poradnik może kierować Cię do ustawienia importu, które już się tam nie znajduje. Podręcznik importowania obrazów opisuje tę zmianę. Filtrowanie może zmienić wygląd istniejących pikseli; nie naprawia brakujących szczegółów źródła.

Jeśli rozmycie pojawia się także poza Godot, skorzystaj z szerszego poradnika diagnozowania rozpikselowanego SVG. Pomoże Ci ustalić, czy wadliwa krawędź istnieje już przed przekazaniem pliku do silnika.

Zweryfikuj ikonę w jej rzeczywistym interfejsie

Przetestuj najmniejsze i największe planowane rozmiary ikon na jasnym i ciemnym tle. Sprawdź krzywiznę, najwęższą szczelinę i przezroczystość wokół krawędzi. Zmień rozmiar okna uruchomionego projektu, wypróbuj wszystkie dostępne dla użytkownika opcje zmiany skali interfejsu i przetestuj animację skali węzła, jeśli interfejs jej używa.

Powtórz sprawdzenie w wersji zbudowanej na platformę docelową. Zachowaj wybrane ustawienia importu razem z zasobem źródłowym, aby inna osoba pracująca nad projektem mogła odtworzyć wynik. W zestawie ikon przetestuj więcej niż najprostszy kształt: uwzględnij ikonę z największą liczbą szczegółów oraz tę z najcieńszym istotnym detalem.

Mały plik źródłowy SVG nie dowodzi mniejszego zużycia pamięci GPU. Obie opisane tu metody tworzą tekstury rastrowe do wyświetlania. Zbadaj za pomocą profilera zaimportowane zasoby i rzeczywistą scenę, jeśli o wyborze decyduje zużycie pamięci lub czas klatki.

Jak wygląda to z PerfectVector

PerfectVector przydaje się przed importem do Godot, gdy Twoim jedynym źródłem jest płaski obraz PNG lub JPG, a potrzebujesz edytowalnych kształtów SVG. Prześlij jedną reprezentatywną ikonę do konwertera obrazu na grafikę wektorową PerfectVector, porównaj odtworzony kontur i wewnętrzne szczeliny z oryginałem, a następnie sprawdź pobrany SVG, zanim wybierzesz typ importu w Godot.

Zaakceptuj wynik wektoryzacji dopiero wtedy, gdy kształt jest poprawny. Usuń niepożądany kształt tła, sprawdź, czy odpowiednie obszary pozostają edytowalne, i upewnij się, że małe otwory przetrwały porządkowanie grafiki. Następnie wykonaj te same testy rozmiaru i nadpróbkowania w Godot, co dla istniejącego SVG.

Zachowaj zdjęcia, miękkie efekty malarskie i grafikę celowo wykonaną w stylu pixel art w postaci rastrowej, jeśli taki jest zamierzony efekt. Prostą ikonę geometryczną może być łatwiej narysować bezpośrednio. Wektoryzacja pomaga odtworzyć kształty źródłowe; nie konfiguruje importera Godot ani nie weryfikuje gotowej gry.

FAQ

Czy Godot może importować pliki SVG? Tak. Domyślny import Texture2D rasteryzuje SVG podczas importowania. Obecny importer oferuje także DPITexture dla obrazów SVG wymagających ponownej rasteryzacji z nadpróbkowaniem. Sprawdź dokumentację wersji używanej w Twoim projekcie; DPITexture jest oznaczony jako eksperymentalny.

Dlaczego mój SVG jest rozmyty w Godot? Sprawdź, czy zaimportowany obraz rastrowy o stałych wymiarach jest wyświetlany w rozmiarze większym niż jego wymiary w pikselach. Sprawdź też rozciąganie obszaru wyświetlania, filtrowanie, nadpróbkowanie zależne od skali węzła i osadzoną treść rastrową. Usuń przyczynę, zanim zaczniesz wektoryzować lub zastępować źródło.

Czy DPITexture zachowuje edytowalne ścieżki SVG w scenie? Zachowuje źródło SVG na potrzeby ponownej rasteryzacji, ale jest zasobem tekstury. Jego import nie zapewnia możliwości edycji ścieżek w scenie ani nie tworzy automatycznie geometrii kolizji potrzebnej w Twojej grze.

Źródła

1. Godot — Importing images — Określa typy importu SVG, sposób przygotowania tekstu, ograniczenia renderera i ustawienia filtrowania tekstur.
2. Godot — DPITexture — Dokumentuje dziedziczenie, zachowywanie źródła SVG, skalowanie i status eksperymentalny.
3. Godot — Multiple resolutions — Wyjaśnia rozciąganie obszaru wyświetlania, nadpróbkowanie obrazów, ustawienia zależne od skali węzła i koszty wielokrotnej rasteryzacji.
4. Godot — ResourceImporterTexture — Opisuje ustawienia skali obrazu rastrowego i limitu rozmiaru w domyślnym importerze tekstur.
5. ThorVG — About ThorVG — Określa zakres funkcji obsługiwanych przez interpreter SVG.
6. MDN — SVG image element — Wyjaśnia, jak SVG może zawierać grafikę rastrową.

---

Jeśli Twoja ikona do Godot powstaje z płaskiego obrazu PNG lub JPG i potrzebuje edytowalnych kształtów, przekonwertuj obraz za pomocą PerfectVector. Sprawdź kształt, małe szczeliny i niepożądane ścieżki tła, a następnie przetestuj SVG w rozmiarach wyświetlania i przy ustawieniach skalowania używanych w Twoim projekcie.