Impor SVG Unity: Siapkan Grafis untuk UI Toolkit atau Sprite

Impor SVG Unity dimulai dengan dua keputusan: versi editor yang digunakan dan tempat grafis akan muncul. Unity 6.3 menyertakan impor SVG untuk UI Toolkit dan Texture2D. Impor SVG langsung sebagai aset Sprite atau uGUI memakai paket Vector Graphics; editor sebelumnya memakai lini paket lama. Unity mendokumentasikan pembagian ini dalam panduan versi Vector Graphics.

Jika sudah memiliki SVG yang bisa diedit, siapkan file itu untuk importer. Jika sumber hanya PNG atau JPG, trace hanya ketika membutuhkan bentuk vektor. Tekstur atau sprite pixel art bisa tetap raster.

Uji satu ikon yang mewakili untuk memisahkan masalah grafis sumber dari masalah impor dan tampilan Unity sebelum memproses seluruh set.

Untuk geometri adegan dalam engine berbeda, gunakan pemeriksaan impor SVG Unreal Engine untuk memeriksa bentuk sumber Motion Design, bukaan, dan potongan terpisah.

Pilih jalur impor sebelum mengedit grafis

Gunakan komponen tujuan untuk memilih jalur. Aset yang bekerja dalam layout UI Toolkit tidak otomatis sesuai untuk kolom Sprite Renderer.

Tabel mengikuti persyaratan paket Unity. Tetapkan versi editor dan paket yang digunakan proyek. Petunjuk Unity 2018 atau importer preview 2.0 bisa menjelaskan opsi berbeda dari proyek 6.3 saat ini.

Pilih tujuan terlebih dahulu

Simpan pengujian impor kecil bersama grafis

Pilih ikon dengan kurva, lubang dalam, dan efek pewarnaan yang dibutuhkan set. Simpan SVG asli bersama versi sederhana dari bentuk solid. Jika versi sederhana diimpor dengan benar, selidiki grafis kompleks sebelum mengubah seluruh proyek.

Siapkan SVG yang bisa direproduksi importer

Buka sumber di editor vektor dan periksa objek sebenarnya. Pertahankan master asli, lalu buat ekspor serah Unity terpisah.

Pastikan grafis berisi path

SVG bisa menyimpan bitmap melalui elemen <image>; ekstensi saja tidak membuktikan grafis berupa geometri vektor. Spesifikasi konten tertanam W3C mendokumentasikan perbedaan itu. Pilih bagian grafis di editor dan periksa objek atau markup-nya. Gunakan diagnosis raster tertanam jika berupa satu persegi panjang gambar.

Jika file vektor asli ada, ekspor ulang. Tracing PNG yang diekspor dari master itu menambah pekerjaan rekonstruksi dan bisa mengubah siluet. Untuk keluarga ikon, sepakati kanvas, padding, dan bobot visual terlebih dahulu; panduan persiapan SVG kit UI membahas keputusan tingkat set tersebut.

Ganti fitur yang tidak didukung secara sengaja

Importer native Unity mendukung sebagian SVG 1.1. Pengecualian yang didokumentasikan mencakup teks yang belum diubah menjadi outline, mask piksel, filter, interaksi, dan animasi. Karena itu, pratinjau browser bisa tampak benar sementara hasil Unity berbeda. Lihat batasan SVG Unity.

Siapkan salinan serah sesuai kebutuhan grafis:

• Ubah huruf dekoratif menjadi outline. Pertahankan label antarmuka sebagai teks di antarmuka jika perlu diedit atau dilokalkan.
• Buat kembali bayangan atau glow yang dibutuhkan dengan efek yang didukung tujuan, atau pertahankan grafis itu sebagai raster.
• Periksa mask secara terpisah dari clipping path. Mask piksel lembut dan clip geometris merupakan konstruksi berbeda.
• Rencanakan animasi di Unity alih-alih mengandalkan animasi tertanam dalam SVG.

Jangan meratakan semua gradien hanya karena filter tidak didukung. Uji efek yang benar-benar digunakan desain. Jika lencana kompleks gagal, ekspor versi fill solid dan tambahkan kembali efek satu demi satu. Itu mengisolasi fitur yang mengubah tampilan.

Hapus kerumitan yang tidak disengaja

Hapus bintik liar, duplikat tersembunyi, dan persegi panjang latar belakang yang bukan bagian ikon. Sederhanakan kurva yang jelas penuh noise hanya sambil membandingkannya dengan sumber. Lubang kecil yang menutup selama perapian merupakan pengeditan gagal, meskipun file menjadi lebih pendek.

Tidak ada target node universal yang berguna untuk semua grafis game. Panah geometris dan karakter gambar tangan membutuhkan jumlah detail berbeda. Panduan perapian node SVG membantu menentukan titik yang membawa informasi bentuk.

Impor ke UI Toolkit pada Unity 6.3 atau lebih baru

Mulailah dengan SVG serah yang siluet dan efeknya sudah ditinjau.

1. Tambahkan SVG ke folder Assets proyek dan pilih.
2. Tetapkan Generated Asset Type menjadi UI Toolkit Vector Image dalam Inspector.
3. Terapkan pengaturan impor dan gunakan gambar vektor hasil dalam elemen UI Toolkit tujuan.
4. Lihat pratinjau layout sebenarnya pada ukuran tampilan terkecil dan terbesar yang diinginkan.

Unity mendokumentasikan pilihan aset native dalam Work with vector graphics. Jika komponen yang memakai aset memerlukan Texture2D, pilih keluaran itu dan tinjau tekstur hasil pada ukuran tujuan.

Untuk UI Toolkit, mulailah dengan pengaturan tessellation dasar yang disarankan. Target Resolution dan Zoom Factor memungkinkan importer mengonfigurasi pembagian kurva sesuai kondisi tampilan tujuan. Unity menyarankan resolusi target terendah yang memberi hasil memuaskan. Pengaturan impor gambar menjelaskan kontrolnya.

Pisahkan dua pemeriksaan: apakah SVG menjelaskan bentuk yang benar, dan apakah aset impor menampilkan bentuk itu dengan baik. Meningkatkan tessellation tidak bisa memulihkan lubang yang hilang dalam ekspor sumber.

Impor untuk Sprite Renderer atau uGUI

Pasang paket com.unity.vectorgraphics yang kompatibel melalui Package Manager jika tujuan membutuhkan dukungan Sprite atau uGUI-nya. Pilih aset hasil yang sesuai untuk komponen dan pastikan komponen menerimanya. Dokumentasi paket saat ini membedakan jenis impor ini dari jalur UI Toolkit bawaan.

Untuk Sprite Renderer, verifikasi ukuran objek dalam adegan dan pivot sebelum menyalinnya ke prefab. Untuk uGUI, verifikasi alur SVGImage yang digunakan proyek. Alur sprite raster biasa tetap merupakan alternatif jika grafis sudah terlihat benar pada dimensi yang diperlukan.

Paket 2.0 lama mendokumentasikan satuan SVG per satuan adegan, pivot sprite, dan kontrol tessellation. Dokumentasi itu juga menyebut paket eksperimental dan menyarankan agar tidak digunakan dalam produksi. Tim yang mempertahankan jalur itu perlu meninjau manual paket 2.0 bersama kendala proyek sebelum menambahkannya.

Jika memperbarui proyek yang ada, lakukan pengujian impor pada salinan atau branch yang dikelola kontrol versi. Bandingkan jenis aset hasil dan referensi dalam prefab serta adegan sebenarnya. Jangan gunakan pratinjau thumbnail yang berhasil sebagai satu-satunya pengujian migrasi, dan jangan menerapkan pengeditan .meta massal dari posting forum lama tanpa mereproduksi masalah spesifiknya.

Diagnosiskan perbedaan pertama yang terlihat

Gunakan catatan uji singkat untuk setiap aset yang mewakili: file sumber, versi editor/paket, komponen tujuan, ukuran tampilan yang diharapkan, dan ketidakcocokan pertama yang terlihat.

Misalnya, lencana bintang diimpor tetapi lubang tengahnya hilang. Pertama buka SVG serah dan pastikan lubang ada di sana. Jika ada, bandingkan ekspor lencana sederhana di Unity. Jika lubang bertahan dalam versi itu, periksa bentuk tumpang tindih, konstruksi fill, atau mask lencana asli. Tracing ulang sumber berguna hanya jika geometri path itu sendiri salah.

Uji aset yang diterima dalam build target serta editor. Catat apakah tetap terbaca pada ukuran terkecil, warna dan transparansi cocok, serta referensi adegan atau prefab bertahan setelah impor baru. Keputusan performa membutuhkan profiling adegan Anda sendiri; ekstensi SVG bukan pengukuran performa.

Contoh penggunaan PerfectVector

PerfectVector berguna sebelum impor Unity ketika satu-satunya sumber yang sesuai berupa grafis raster dan Anda membutuhkan bentuk yang bisa diedit. Unggah satu PNG atau JPG warna datar ke konverter gambar-ke-vektor PerfectVector, bandingkan siluet dan lubang hasil tracing dengan aslinya, lalu periksa SVG yang diunduh di editor vektor sebelum mengimpor ke Unity.

Gunakan ikon perwakilan yang sama untuk seluruh penyerahan. Terima trace hanya ketika area tujuan bisa diedit, ruang negatif tetap terbuka, dan perapian tidak mendistorsi bentuk. Lalu terapkan pengujian tujuan Unity di atas.

Pertahankan foto, tekstur, glow lembut, atau sprite pixel art yang disengaja sebagai raster jika itu mempertahankan tampilan tujuan. Untuk simbol geometris sederhana, gambar manual mungkin lebih mudah dikontrol daripada tracing. PerfectVector menyiapkan geometri sumber SVG; alat itu tidak mengubah fitur yang didukung Unity atau memvalidasi rendering runtime. Jika perbedaan format belum dikenal, mulailah dari isi file SVG.

FAQ

Apakah Unity 6 membutuhkan paket Vector Graphics? Jawabannya bergantung pada versi minor dan tujuan. Unity 6.3 memiliki impor SVG UI Toolkit dan Texture2D bawaan. Impor Sprite dan uGUI memakai paket preview 3.0. Versi Unity sebelumnya memakai jalur paket preview 2.0 yang kompatibel.

Apakah mengubah ekstensi PNG menjadi SVG membuat sprite vektor? Tidak. Mengganti nama file tidak melakukan tracing pikselnya. Gunakan sumber vektor asli, gambar bentuknya, atau trace grafis raster yang sesuai dan periksa path hasil sebelum impor Unity.

Bisakah tracing memperbaiki SVG yang diimpor secara salah oleh Unity? Hanya ketika geometri sumber perlu dibangun ulang. Jika SVG berisi path benar tetapi masalah disebabkan jenis aset hasil salah atau efek yang tidak didukung, perbaiki keputusan impor atau ekspor itu terlebih dahulu.

Sources

1. Unity — Panduan paket Vector Graphics 3.0 — Mendefinisikan pembagian versi editor dan jalur bawaan versus paket Sprite/uGUI.
2. Unity — Work with vector graphics — Mendokumentasikan pilihan aset native dan fitur SVG yang tidak didukung.
3. Unity — Pengaturan impor gambar — Menjelaskan pengaturan gambar vektor UI Toolkit dan kontrol tessellation.
4. Unity — Manual paket Vector Graphics 2.0 — Membahas importer lama, kontrol satuan adegan dan pivot, serta status eksperimentalnya.
5. W3C — Konten tertanam SVG — Menetapkan bahwa SVG bisa menyertakan konten gambar raster.

---

Jika aset Unity bermula sebagai PNG atau JPG datar dan membutuhkan path yang bisa diedit, konversikan gambar Anda dengan PerfectVector. Periksa siluet, lubang, dan bentuk latar belakang yang tidak diinginkan, lalu uji SVG pada komponen Unity dan ukuran tampilan yang akan dirilis.