Impor SVG Godot: Texture2D, DPITexture, dan Ikon Tajam

Impor SVG Godot biasanya mengubah SVG menjadi piksel saat aset diimpor. Karena itu, memperbesar tekstur bisa terlihat buram meskipun sumber berisi path vektor rapi. Untuk ikon SVG yang perlu menyesuaikan penskalaan viewport, importer saat ini juga menawarkan DPITexture, yang bisa merasterkan sumber lagi untuk faktor oversampling berbeda. Godot mendokumentasikan kedua jalur dalam panduan impor gambar.

Mulailah dengan memeriksa resource impor dan cara proyek menskalakannya. Tracing ulang SVG yang sudah valid tidak akan memperbaiki tekstur beresolusi rendah yang diregangkan pada layar lebih besar.

Pilih jenis impor SVG sesuai perilaku tampilan

Dua pilihan berikut menjelaskan jenis resource dalam dock Import. DPITexture sendiri mewarisi Texture2D, sehingga keduanya bukan keluarga class yang tidak berkaitan. Referensi DPITexture juga menandai class eksperimental; periksa dokumentasi yang cocok dengan versi Godot proyek sebelum menggunakannya.

Impor tekstur memberi resource tekstur. Perlakukan pengeditan path, bentuk collision, dan performa sebagai persyaratan terpisah; nama file SVG tidak membuktikan salah satunya ditangani. Untuk adegan browser, bandingkan jalur geometri dan tekstur PixiJS untuk melihat bagaimana SVG yang sama bisa mengikuti jalur berbeda ke renderer.

Sumber SVG dan piksel hasil rendernya

Periksa impor Texture2D default terlebih dahulu

Gunakan satu aset perwakilan sebelum mengubah seluruh folder ikon. Pilih bentuk dengan tepi melengkung, celah sempit, dan detail kecil yang penting dalam antarmuka.

1. Masukkan SVG ke proyek dan pilih dalam dock FileSystem.
2. Buka dock Import dan pastikan jenis impor Texture2D.
3. Periksa SVG > Scale dan Process > Size Limit, lalu impor ulang setelah mengubah opsi.
4. Tempatkan tekstur dalam komponen sprite atau UI tujuan dan periksa ukuran tampilannya.

SVG > Scale mengubah ukuran rasterisasi; nilai lebih besar membuat gambar lebih besar. Opsi itu juga memengaruhi ukuran tekstur dalam 2D, sehingga tinjau dimensi node atau layout setelah mengubahnya. Process > Size Limit bisa membatasi dimensi impor. Kedua kontrol dijelaskan dalam referensi importer tekstur.

Sebagai contoh ukuran sederhana, raster selebar 32 piksel yang ditampilkan sepanjang 128 piksel layar sedang diperbesar. Kurva vektor sumber tidak menambahkan piksel ke raster yang sudah diimpor. Buat tekstur yang sesuai untuk penggunaan itu atau uji DPITexture jika oversampling sesuai antarmuka.

Hindari menaikkan skala setiap SVG dengan pengali besar sembarang. Tentukan dahulu penggunaan terbesar sebenarnya, lalu periksa juga penggunaan terkecil. Resource yang tampak bagus dalam pratinjau inventaris besar mungkin kehilangan celah sempit ketika ditampilkan pada tombol kecil.

Gunakan DPITexture dengan pengaturan oversampling yang tepat

Untuk menguji jalur adaptif, pilih SVG dalam dock FileSystem, ubah jenis impor menjadi DPITexture, dan impor ulang. Gunakan penempatan UI yang sama agar perbandingan menjawab satu pertanyaan: apakah perubahan jalur rasterisasi mengatasi ketidakcocokan pada skala tujuan?

DPITexture mempertahankan data sumber SVG dan bisa menghasilkan raster yang sesuai oversampling. base_scale mengontrol skala tekstur sumber; properti itu tidak menjadikan resource sebagai path adegan yang bisa diedit. Lihat dokumentasi class DPITexture.

Ada dua kasus penskalaan yang perlu diperiksa:

• Penskalaan viewport: oversampling gambar Godot bisa merender ulang sumber vektor ketika faktor skala viewport berubah. Aktifkan untuk SVG dengan mengimpor gambar itu sebagai DPITexture.
• Penskalaan node: oversampling berdasarkan Scale Node2D atau Control nonaktif secara default. Aktifkan Oversampling with Scale pada node relevan jika itu perilaku yang dibutuhkan.

Panduan oversampling Godot menjelaskan perbedaan ini. Panduan juga menyebut perubahan skala yang sering bisa membutuhkan kerja CPU karena tekstur dirender lagi. Uji penskalaan animasi dalam adegan yang akan dirilis sebelum menerapkan opsi secara luas.

Editor 2D bisa melakukan resampling otomatis saat Anda memperbesar, sehingga berguna sebagai pratinjau. Jalankan juga proyek dan uji perilaku viewport sebenarnya. Dengan stretch mode Viewport, adegan mula-mula digambar pada ukuran viewport dasar lalu diskalakan ke jendela; penskalaan akhir itu tetap bisa menentukan tampilan antarmuka. Dokumentasi stretch mode menjelaskan perbedaannya dari mode Canvas Items.

Siapkan grafis yang bisa direproduksi Godot

Perubahan importer menyelesaikan masalah ukuran rendering. Objek hilang atau siluet berubah membutuhkan pemeriksaan grafis sumber.

Cari path sebenarnya

Buka SVG di editor vektor dan pilih grafis yang terlihat. Jika seluruh ikon berupa satu bitmap yang ditempatkan, selidiki sebelum menyesuaikan Godot. Elemen <image> SVG bisa berisi konten raster, seperti dijelaskan referensi elemen MDN. Rasterisasi ulang wadah itu tidak bisa merekonstruksi kurva rapi yang tidak pernah ada dalam PNG tertanam kecil.

Gunakan daftar pemeriksaan raster tertanam untuk membedakan piksel yang ditempatkan dari bentuk yang bisa diedit. Jika master vektor ada, ekspor darinya. Jika menyiapkan satu set, pertahankan kanvas dan padding konsisten menggunakan panduan SVG kit UI.

Ubah teks dekoratif menjadi path

Importer SVG Godot tidak merender teks SVG yang belum diubah menjadi path. Ubah huruf dekoratif menjadi path dalam salinan serah, sambil mempertahankan master teks yang bisa diedit. Di Inkscape, perintah relevannya Path > Object to Path. Godot menyertakan prosedur dalam Importing SVG images with text.

Untuk label tombol yang membutuhkan pelokalan atau sering diedit, pertahankan label sebagai teks antarmuka dan impor ikon terpisah. Mengubah seluruh antarmuka menjadi outline akan mempersulit perubahan berikutnya.

Uji efek kompleks secara terpisah

Godot menggunakan ThorVG untuk rendering SVG. Interpreter SVG ThorVG memiliki batas dukungan yang ditentukan; ikhtisar SVG-nya mencantumkan animasi, interaktivitas, dan multimedia sebagai fitur yang tidak didukung. Kemampuan umum engine ThorVG bukan jaminan fitur SVG tertentu bekerja melalui importer Godot.

Jika lencana kehilangan detail, bandingkan SVG ekspor dengan salinan dari bentuk sederhana berisi fill. Tambahkan kembali efek yang dibutuhkan satu demi satu. Pertahankan ekspor raster jika lebih andal mempertahankan grafis kompleks dan proyek tidak membutuhkan bentuk sumber yang bisa diskalakan.

Jangan menyederhanakan hingga menghapus bukaan sempit hanya untuk mengurangi kerumitan file. Pengujian penerimaan adalah siluet yang diinginkan, termasuk ruang negatifnya.

Diagnosiskan ketidakcocokan pertama yang terlihat

Catat file sumber, jenis impor, skala SVG, skala node, pengaturan viewport, dan ukuran tampilan yang diharapkan. Lalu ubah pengaturan yang berkaitan dengan gejala.

Di Godot 4, filtering tekstur 2D dikonfigurasi melalui properti CanvasItem, dengan default proyek. Tutorial lama mungkin mengarahkan Anda ke pengaturan impor yang tidak lagi berada di sana. Manual impor gambar mendokumentasikan perubahan itu. Filtering bisa mengubah tampilan piksel yang ada; itu tidak memperbaiki detail sumber yang hilang.

Untuk keburaman yang juga muncul di luar Godot, ikuti diagnosis SVG berpiksel yang lebih luas. Itu membantu mengenali apakah tepi buruk sudah ada sebelum engine menerima file.

Terima ikon dalam antarmuka sebenarnya

Uji penempatan ikon terkecil dan terbesar yang dituju pada latar terang dan gelap. Periksa kurva, celah tersempit, dan transparansi di sekitar tepi. Ubah ukuran jendela saat berjalan, gunakan kontrol skala UI yang tersedia bagi pengguna, dan uji animasi skala node jika antarmuka memakainya.

Ulangi pemeriksaan dalam build target. Simpan pengaturan impor pilihan bersama aset sumber agar kontributor lain bisa mereproduksi hasil. Untuk set ikon, uji lebih dari siluet termudah: sertakan ikon terpadat dan ikon dengan detail penting paling tipis.

File sumber SVG kecil bukan bukti penggunaan memori GPU lebih rendah. Kedua jalur yang dibahas di sini menghasilkan tekstur raster untuk tampilan. Lakukan profiling resource impor dan adegan sebenarnya ketika memori atau waktu frame menentukan pilihan.

Contoh penggunaan PerfectVector

PerfectVector berguna sebelum impor Godot ketika sumber hanya PNG atau JPG datar dan Anda membutuhkan bentuk SVG yang bisa diedit. Unggah satu ikon perwakilan ke konverter gambar-ke-vektor PerfectVector, bandingkan kontur hasil tracing dan celah dalamnya dengan aslinya, lalu periksa SVG yang diunduh sebelum memilih jenis impor Godot.

Terima trace hanya ketika bentuknya benar. Hapus bentuk latar belakang yang tidak diinginkan, pastikan area tujuan tetap bisa diedit, dan pastikan bukaan kecil bertahan setelah perapian. Lalu jalankan pemeriksaan ukuran dan oversampling Godot yang sama seperti untuk SVG yang sudah ada.

Pertahankan foto, efek lukisan lembut, dan pixel art yang disengaja sebagai raster jika itu hasil yang diinginkan. Ikon geometris sederhana mungkin lebih mudah digambar langsung. Tracing berguna untuk membangun ulang bentuk sumber; proses itu tidak mengonfigurasi importer Godot atau memvalidasi game akhir.

FAQ

Bisakah Godot mengimpor file SVG? Bisa. Impor Texture2D default merasterkan SVG saat impor. Importer saat ini juga menawarkan DPITexture untuk gambar SVG yang membutuhkan rasterisasi ulang dengan oversampling. Periksa dokumentasi versi proyek; DPITexture ditandai eksperimental.

Mengapa SVG saya buram di Godot? Periksa apakah raster hasil impor berukuran tetap ditampilkan lebih besar daripada dimensi pikselnya. Periksa juga stretch viewport, filtering, oversampling skala node, dan konten raster tertanam. Perbaiki penyebab sebelum melakukan tracing atau mengganti sumber.

Apakah DPITexture mempertahankan path SVG yang bisa diedit dalam adegan? DPITexture mempertahankan sumber SVG untuk rasterisasi ulang, tetapi merupakan resource tekstur. Mengimpornya tidak menyediakan alur pengeditan path adegan atau otomatis membuat geometri collision yang dibutuhkan game.

Sources

1. Godot — Mengimpor gambar — Mendefinisikan jenis impor SVG, persiapan teks, batasan renderer, dan pengaturan filter tekstur.
2. Godot — DPITexture — Mendokumentasikan pewarisan, sumber SVG yang dipertahankan, penskalaan, dan status eksperimental.
3. Godot — Multiple resolutions — Menjelaskan stretch viewport, oversampling gambar, pengaturan skala node, dan biaya rasterisasi berulang.
4. Godot — ResourceImporterTexture — Menjelaskan kontrol skala raster dan batas ukuran untuk importer tekstur default.
5. ThorVG — About ThorVG — Mendefinisikan batas dukungan interpreter SVG.
6. MDN — Elemen image SVG — Menjelaskan cara SVG bisa berisi grafis raster.

---

Jika ikon Godot bermula sebagai PNG atau JPG datar dan membutuhkan bentuk yang bisa diedit, konversikan gambar Anda dengan PerfectVector. Periksa siluet, celah kecil, dan path latar belakang yang tidak diinginkan, lalu uji SVG pada ukuran tampilan serta pengaturan penskalaan yang digunakan proyek.