PerfectVector
Oleh Irene Kim9 menit baca

Impor SVG Unreal Engine: Periksa Geometri Motion Design

Siapkan SVG untuk Motion Design Unreal Engine, periksa lubang dan bagian terpisah, dan bedakan geometri scene dari tekstur atau alur kerja gambar UI runtime.

Di halaman ini

SVG Importer Unreal Engine menyediakan alur kerja geometri untuk Motion Design. Tutorial importer SVG Epic menjelaskan pengubahan file vektor 2D menjadi geometri 3D. Mulailah dengan memeriksa plugin dan dokumentasi untuk versi engine Anda, lalu impor sumber kecil yang lubang, warna, dan bagian terpisahnya dapat Anda kenali.

Itu merupakan tugas berbeda dari menampilkan SVG sebagai gambar UI runtime. Pratinjau tekstur, actor scene, dan renderer widget adalah hasil yang diserahkan berbeda. Panduan ini berfokus pada persiapan artwork untuk jalur geometri scene dan penentuan apakah objek yang dihasilkan sesuai dengan motion design.

Contoh adalah lencana berongga orisinal dengan belah ketupat terpisah. Ini adalah alur kerja terdokumentasi untuk dicoba dalam proyek Anda, bukan laporan pengujian impor atau ekstrusi Unreal.

Pilih tujuan sebelum mengubah artwork

Tentukan apa yang harus menjadi hasil grafis. Ekstensi SVG saja tidak menjawab pertanyaan itu.

Penggunaan yang dimaksudkanYang perlu ditetapkan terlebih dahuluYang perlu diperiksa
Grafis yang dibangun sebagai geometri sceneSVG Importer dan alur kerja Motion Design yang sesuaiLubang, permukaan, pewarnaan, batas, dan kontrol objek
Gambar datar pada permukaanJalur tekstur/material proyekResolusi, transparansi, dan material akhir
Ikon di dalam widget UMG biasaPendekatan rendering yang didukung UIPerilaku widget dan dukungan target terpaket
SVG yang diterima setelah aplikasi dimulaiImplementasi pemuatan/rendering runtime eksplisitPenanganan input, cakupan fitur, dan perilaku kegagalan

Panduan memulai Motion Design Epic menjelaskan plugin editor untuk grafis siaran. Antarmukanya menyerupai UMG, tetapi menyertakan kemampuan di luar widget. Kemiripan itu bukan bukti bahwa Image UMG biasa dapat memuat file SVG sembarang.

Jika Anda memindahkan sumber yang sama antarengine, panduan impor SVG Unity membahas importer dan keputusan tujuan yang terpisah. Penerimaan oleh satu engine tidak memverifikasi dukungan file engine lainnya.

Periksa plugin pada versi engine Anda

Daftar plugin SVG Importer Epic saat ini memuat banner Beta dan mencantumkan kategorinya sebagai Experimental. Perlakukan itu sebagai alasan memvalidasi fitur dalam proyek yang akan Anda serahkan, terutama sebelum membangun ketergantungan besar padanya.

Tutorial resmi ditandai untuk Unreal Engine 5.4 dan 5.5. Dokumentasi API saat ini merupakan referensi terpisah, jadi jangan menganggap panel atau label video lama sama persis dengan rilis terinstal lain.

Untuk penyiapan Motion Design, ikuti instruksi memulai yang sesuai untuk mengaktifkan Motion Design dan Storm Sync Motion Design Bridge. Pastikan SVG Importer yang sesuai tersedia dan aktif dalam proyek tersebut. Ikuti permintaan restart dari editor sebelum menyelidiki artwork.

Gunakan level pengujian kecil terlebih dahulu. Panduan memulai menjelaskan level atau template kosong, diikuti Motion Design > Create Defaults > Spawn. Pisahkan pengujian ini dari sequence kompleks agar actor hilang, masalah kamera, atau masalah penyiapan plugin lebih mudah dibedakan dari sumber yang tidak valid.

Siapkan lencana berongga dengan satu bagian terpisah

Simpan contoh orisinal ini sebagai 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>

Path hijau kebiruan membentuk bingkai persegi dengan pusat persegi kosong. Belah ketupat koral adalah path terpisah, dengan ruang di antara bentuk itu dan bingkai. Tidak ada persegi panjang latar belakang, stroke, teks, filter, gambar eksternal, atau animasi dalam file.

Penghilangan itu disengaja. Penghilangan tersebut memungkinkan Anda mengajukan beberapa pertanyaan berguna sebelum menguji ilustrasi kompleks: apakah pusat tetap terbuka, apakah belah ketupat tetap terpisah, dan apakah kedua warna direpresentasikan sesuai tujuan?

Periksa juga sumber Anda sendiri di editor vektor. Jika sumber hanya membungkus foto dalam kontainer SVG, pemeriksaan raster tertanam membantu mengidentifikasi situasi itu. Mengganti nama atau membungkus bitmap tidak menyediakan batas tertutup yang diperlukan untuk latihan geometri ini.

Simpan master yang dapat diedit dan ekspor salinan penyerahan. Gunakan bentuk sederhana tertutup dan berisian sebagai dasar; tambahkan efek, gradien, atau clipping rumit hanya ketika proyek memerlukannya dan Anda dapat memverifikasi penanganannya. Keberadaan class bernama mirip dalam referensi API bukan jaminan kompatibilitas lengkap untuk fitur tersebut.

Ilustrasi lencana persegi berongga datar dan belah ketupat terpisah, bentuk yang sama dengan kedalaman dangkal, dan geometri yang disusun dalam scene
Ilustrasi: artwork sumber, geometri yang dibangun, dan penempatan scene menjawab pertanyaan berbeda. Jaga bukaan dan aksen terpisah tetap terlihat saat memeriksa hasil impor sebenarnya.

Impor satu file dan identifikasi aset yang dihasilkan

Pilih folder konten proyek untuk eksperimen. Panduan impor aset umum Epic mendokumentasikan tombol Import Content Browser dan impor drag-and-drop. Dengan importer SVG yang sesuai aktif, pilih SVG kecil dan periksa opsi khusus importer serta diagnostik dalam versi terinstal Anda.

Jika file ditolak atau importer yang diharapkan tidak muncul, verifikasi dahulu versi engine dan penyiapan plugin. Menyederhanakan artwork berulang kali tidak akan memperbaiki fitur impor yang tidak tersedia.

Setelah impor, identifikasi tipe aset sebelum menempatkannya. API SVGImporter Epic mencakup data SVG, actor SVG, dan komponen dynamic mesh. Ini adalah perbedaan berguna: aset data sumber sendiri bukan bukti bahwa scene berisi geometri yang dimaksudkan.

Gunakan alur kerja penempatan actor SVG versi Anda untuk membawa aset ke scene pengujian. Toolbox Motion Design mencakup actor SVG. Pilih hasil yang ditempatkan dan periksa dari depan sebelum mengubah kedalaman, material, atau animasi. Catat aset dan actor yang Anda gunakan agar rekan tim dapat mereproduksi penyiapan.

Simpan aset impor dan pertahankan SVG asli. Panduan impor umum Unreal menjelaskan bahwa konten impor disimpan dalam aset proyek; file sumber masih penting untuk pengeditan dan impor ulang berikutnya.

Periksa lubang, pewarnaan, dan objek terpisah

Mulailah dengan bukaan persegi lencana. Lihat di atas latar belakang kontras dan dari sudut lain jika hasil memiliki kedalaman. Permukaan berwarna pucat yang menutupi pusat dapat menyerupai bukaan dari depan. Pemeriksaan penerimaannya adalah apakah wilayah kosong yang dimaksudkan benar-benar tetap kosong.

Jika pusat terisi, periksa subpath sumber dan perilaku isian sebelum menambahkan lebih banyak efek. Panduan pemecahan masalah lubang SVG menjelaskan mengapa bidang dalam yang diberi warna dan bukaan sungguhan dapat terlihat mirip dalam pratinjau datar.

Berikutnya, periksa ruang di samping belah ketupat. Cari jembatan tak disengaja, permukaan tambahan, atau wilayah latar belakang. Kemudian pilih objek yang dibutuhkan animasi. Jika belah ketupat harus bergerak secara mandiri, verifikasi bahwa susunan actor/komponen yang tersedia memungkinkan Anda memindahkannya tanpa mengubah bingkai. Aksen yang terpisah secara visual tidak dengan sendirinya membuktikan struktur seleksi yang diinginkan.

Periksa pewarnaan setelah memeriksa geometri. Bandingkan bingkai hijau kebiruan dan belah ketupat koral dengan sumber dalam kondisi material dan pencahayaan yang akan digunakan komposisi. Jangan mendiagnosis permukaan samping berbayang sebagai kesalahan warna sumber hanya karena lebih gelap daripada bagian depan.

Untuk masalah terkait kedalaman, daftar pemeriksaan ekstrusi SVG menyediakan pertanyaan geometri sumber untuk diselidiki. Panduan itu bukan panduan perintah khusus Unreal, dan tampilan yang berhasil dalam pengujian ini tidak membuktikan mesh untuk manufaktur yang tertutup tanpa celah (watertight).

Tinjau artwork melengkung dan impor ulang secara sengaja

Contoh persegi menghindari kurva, tetapi sebagian besar logo tidak. API SVGImporter Epic menjelaskan pengaturan kualitas konversi untuk mengubah spline menjadi polyline. Artinya, kurva sumber dan representasi yang dihasilkan adalah hal terpisah untuk diperiksa.

Untuk logo membulat, periksa kurva luar dan bukaan terkecil pada jarak kamera terdekat yang digunakan dalam shot. Jika tepi tampak berfaset, periksa kontrol konversi yang relevan pada versi engine Anda. Jangan menetapkan nilai maksimum sembarang hanya karena sumbernya vektor.

Referensi SVGData versi 5.4 Epic menyatakan bahwa mengubah override kualitasnya memicu impor ulang dan regenerasi geometri. Perlakukan itu sebagai alasan menyimpan dasar pembanding dan memeriksa ulang scene setelah mengubah sumber atau pengaturan konversi, alih-alih menganggap semua pekerjaan berikutnya tetap tidak terdampak. Nama properti dalam referensi itu bukan janji tentang setiap panel editor selanjutnya.

Ulangi pemeriksaan lubang, celah, material, dan kontrol objek setelah impor ulang. Uji scene dalam konteks penyerahan sebenarnya sebelum mengorganisasi seluruh kumpulan artwork. Panduan ini tidak membuktikan dukungan runtime terpaket, rendering SVG setara browser, atau performa universal untuk plugin.

Ketika lambang raster membutuhkan rekonstruksi

Jika master vektor hilang dan sumbernya lambang PNG atau JPG sederhana, alur kerja gambar-ke-vektor PerfectVector dapat menyiapkan kandidat SVG statis. Crop ke desain, periksa bukaan dan aksen terpisah dalam pratinjau, dan bandingkan kandidat dengan sumber. Unduh SVG yang diterima, lalu jalankan pemeriksaan geometri yang sama di Unreal.

Vektorisasi tidak memilih unit scene, membuat rig, menetapkan material produksi, atau menjamin topologi mesh tertentu. Gunakan master vektor yang sudah ada jika tersedia. Pertahankan foto dan efek lukisan kompleks sebagai raster jika itu menjaga tampilannya dengan lebih baik. Untuk lencana geometris sederhana, menulis beberapa bentuk yang diperlukan secara langsung mungkin memberikan kendali lebih besar daripada merekonstruksinya dari piksel.

Simpan catatan penyerahan singkat: file sumber, versi engine/plugin, pengaturan importer, area kosong yang diharapkan, bagian yang bergerak secara mandiri, dan jarak kamera yang digunakan untuk peninjauan. Panduan persiapan artwork di blog membahas keputusan sumber sebelum langkah khusus engine ini.

FAQ

Dapatkah Unreal Engine mengimpor file SVG? Ya. Epic menyediakan SVG Importer yang digunakan bersama geometri Motion Design. Periksa fitur dan dokumentasi untuk versi engine Anda, lalu verifikasi aset impor dan hasil scene.

Apakah impor SVG berarti UMG dapat menampilkan SVG apa pun saat runtime? Tidak. Alur kerja geometri Motion Design tidak membuktikan pemuatan SVG sembarang saat runtime dalam widget UMG biasa. Pilih dan uji jalur rendering yang dibutuhkan UI.

Mengapa lubang SVG saya tampak terisi setelah impor? Periksa apakah sumber berisi bukaan sungguhan atau bidang dalam yang diberi warna, lalu periksa subpath dan perilaku isian. Verifikasi geometri impor di atas latar belakang kontras alih-alih hanya mengandalkan tampilan depan.

Dapatkah saya mengonversi logo PNG menjadi objek 3D siap Unreal? Vektorisasi dapat memulihkan bentuk sumber statis, tetapi tidak menyelesaikan scene Unreal. Impor SVG yang diterima, periksa geometri dan material yang dihasilkan, dan verifikasi kontrol objek yang dibutuhkan proyek Anda.

Sources

  1. Epic Games — Importing + SVG importer — Jalur geometri Motion Design dan konteks versi tutorial.
  2. Epic Games — Plugin SVG Importer — Cakupan plugin, banner Beta, dan kategori Experimental.
  3. Epic Games — Panduan Memulai Motion Design — Penyiapan proyek, cakupan editor, dan toolbox actor SVG.
  4. Epic Games — Mengimpor Aset Secara Langsung — Impor Content Browser umum dan penyimpanan aset.
  5. Epic Games — API SVGImporter — Data, actor, class dynamic mesh, dan konsep konversi spline.
  6. Epic Games — SVGData, Unreal Python 5.4 — Override kualitas berversi dan perilaku regenerasi.

Validasi bukaan, bagian terpisah, dan perilaku scene satu lencana sebelum mengimpor seluruh kumpulan. Jika hanya artwork raster tersisa, siapkan kandidat SVG, periksa geometrinya, dan lihat file yang diterima dalam proyek Unreal Anda.

Lebih banyak dari blog

Mulai dengan SVG yang lebih rapi
dan lebih mudah diedit