PerfectVector
โดย Irene Kimอ่าน 3 นาที

นำเข้า SVG ใน Unreal Engine: ตรวจรูปทรง Motion Design

เตรียม SVG สำหรับ Motion Design ของ Unreal Engine ตรวจช่องเปิดและชิ้นแยก และแยกรูปทรงฉากจากเท็กซ์เจอร์หรือกระบวนการภาพ UI ขณะรัน

ในหน้านี้

SVG Importer ของ Unreal Engine ให้กระบวนการรูปทรงสำหรับ Motion Design บทเรียนนำเข้า SVG ของ Epic อธิบายการเปลี่ยนไฟล์เวกเตอร์ 2 มิติเป็นรูปทรง 3 มิติ เริ่มจากตรวจปลั๊กอินและเอกสารสำหรับเวอร์ชันเอนจิน แล้วนำเข้าต้นทางเล็กที่จำช่องเปิด สี และชิ้นแยกได้

นั่นเป็นงานต่างจากแสดง SVG เป็นภาพ UI ขณะรัน พรีวิวเท็กซ์เจอร์ actor ฉาก และตัวเรนเดอร์วิดเจ็ตเป็นสิ่งส่งมอบต่างกัน คู่มือนี้เน้นเตรียมงานสำหรับวิธีรูปทรงฉากและเลือกว่าโครงสร้างวัตถุผลเหมาะกับ motion design หรือไม่

ตัวอย่างเป็นตรากลวงที่สร้างขึ้นพร้อมข้าวหลามตัดแยก เป็นกระบวนการตามเอกสารให้ลองในโปรเจกต์ ไม่ใช่รายงานการทดสอบนำเข้าหรืออัดความลึกใน Unreal

เลือกปลายทางก่อนเปลี่ยนงาน

เลือกว่ากราฟิกต้องกลายเป็นอะไร นามสกุล SVG อย่างเดียวไม่ตอบ

การใช้ที่ตั้งใจสิ่งที่ต้องยืนยันก่อนสิ่งที่ตรวจ
กราฟิกสร้างเป็นรูปทรงฉากกระบวนการ SVG Importer และ Motion Design ที่ตรงกันช่องเปิด พื้นผิว สี ขอบเขต และการควบคุมวัตถุ
ภาพแบนบนพื้นผิววิธีเท็กซ์เจอร์/วัสดุของโปรเจกต์ความละเอียด ความโปร่งใส และวัสดุสุดท้าย
ไอคอนในวิดเจ็ต UMG ปกติวิธีเรนเดอร์ที่ UI รองรับพฤติกรรมวิดเจ็ตและการรองรับเป้าหมายที่แพ็ก
SVG รับหลังแอปเริ่มระบบโหลด/เรนเดอร์ขณะรันชัดเจนจัดการอินพุต ฟีเจอร์ครอบคลุม และพฤติกรรมเมื่อผิดพลาด

คู่มือเริ่ม Motion Design ของ Epic อธิบายปลั๊กอิน editor สำหรับกราฟิกออกอากาศ อินเทอร์เฟซคล้าย UMG แต่มีความสามารถนอกวิดเจ็ต ความคล้ายไม่ใช่หลักฐานว่า UMG Image ปกติโหลด SVG ใด ๆ ได้

หากย้ายต้นทางเดียวระหว่างเอนจิน คู่มือนำเข้า SVG ใน Unity ครอบคลุมตัวนำเข้าและการเลือกปลายทางแยก การยอมรับโดยเอนจินหนึ่งไม่ตรวจการรองรับไฟล์ของอีกตัว

ตรวจปลั๊กอินในเวอร์ชันเอนจิน

รายการปลั๊กอิน SVG Importer ของ Epic ปัจจุบันมีแบนเนอร์ Beta และหมวด Experimental ให้ถือเป็นเหตุผลตรวจฟีเจอร์ในโปรเจกต์ที่จะส่งมอบ โดยเฉพาะก่อนพึ่งมันมาก

บทเรียนทางการติดแท็ก Unreal Engine 5.4 และ 5.5 เอกสาร API ปัจจุบันเป็นอีกแหล่ง อย่าสมมติว่าแผงหรือป้ายในวิดีโอเก่าตรงกับรุ่นติดตั้งอื่นทุกอย่าง

สำหรับตั้ง Motion Design ทำตาม คำแนะนำเริ่มต้น ที่ตรงรุ่นเพื่อเปิด Motion Design และ Storm Sync Motion Design Bridge ตรวจว่า SVG Importer ที่ตรงกันมีและเปิดในโปรเจกต์ ทำตามคำขอรีสตาร์ต editor ก่อนตรวจงานภาพ

ใช้เลเวลทดสอบเล็กก่อน คู่มือเริ่มต้นอธิบายเลเวลว่างหรือเทมเพลต แล้ว Motion Design > Create Defaults > Spawn แยกทดสอบจากลำดับซับซ้อนเพื่อแยก actor หาย ปัญหากล้อง หรือการตั้งปลั๊กอินจากต้นทางผิดง่าย

เตรียมตรากลวงกับชิ้นแยกหนึ่งชิ้น

บันทึกตัวอย่างที่สร้างนี้เป็น 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>

พาธเขียวอมฟ้าเป็นกรอบจัตุรัสพร้อมกลางจัตุรัสว่าง ข้าวหลามตัดปะการังเป็นพาธแยก มีพื้นที่ระหว่างมันกับกรอบ ไม่มีสี่เหลี่ยมพื้นหลัง เส้นขอบ ข้อความ ฟิลเตอร์ ภาพภายนอก หรือแอนิเมชันในไฟล์

การละสิ่งเหล่านั้นตั้งใจให้ถามสิ่งมีประโยชน์ก่อนภาพซับซ้อน: กลางยังเปิดไหม ข้าวหลามตัดยังแยกไหม และทั้งสองสีแสดงตามตั้งใจไหม?

ตรวจต้นฉบับของคุณในโปรแกรมเวกเตอร์ด้วย หากเพียงห่อภาพถ่ายใน SVG การตรวจราสเตอร์ฝัง ช่วยระบุ การเปลี่ยนชื่อหรือห่อบิตแมปไม่ให้ขอบปิดที่แบบฝึกรูปทรงนี้ต้องการ

เก็บไฟล์หลักแก้ได้และส่งออกสำเนาส่งมอบ ใช้รูปปิดเติมสีเรียบง่ายเป็นฐาน เพิ่มเอฟเฟกต์ ไล่สี หรือการตัดซับซ้อนเฉพาะเมื่อโปรเจกต์ต้องใช้และตรวจการจัดการได้ การมีคลาสชื่อคล้ายใน API ไม่ใช่คำรับประกันความเข้ากันได้ฟีเจอร์ครบ

ภาพประกอบตราจัตุรัสกลวงแบนกับข้าวหลามตัดแยก รูปเดียวกันที่มีความลึกตื้น และรูปทรงที่จัดในฉาก
ภาพประกอบ: งานต้นทาง รูปทรงที่สร้าง และการวางฉากตอบคำถามต่างกัน ให้ช่องเปิดและชิ้นเน้นแยกเห็นชัดขณะตรวจผลนำเข้าจริง

นำเข้าไฟล์เดียวและระบุ asset ที่ได้

เลือกโฟลเดอร์เนื้อหาโปรเจกต์สำหรับทดลอง คู่มือนำเข้า asset ทั่วไปของ Epic อธิบายปุ่ม Import ใน Content Browser และลากวาง เมื่อเปิดตัวนำเข้า SVG ที่ตรง เลือก SVG เล็กและตรวจตัวเลือกเฉพาะตัวนำเข้ากับข้อมูลวินิจฉัยในรุ่นติดตั้ง

หากไฟล์ถูกปฏิเสธหรือตัวนำเข้าที่คาดไม่ปรากฏ ตรวจเวอร์ชันเอนจินและการตั้งปลั๊กอินก่อน ลดงานให้เรียบง่ายซ้ำไม่แก้ฟีเจอร์นำเข้าที่ไม่มี

หลังนำเข้า ระบุชนิด asset ก่อนวาง API SVGImporter ของ Epic มีข้อมูล SVG, actor SVG และคอมโพเนนต์ dynamic mesh ความต่างมีประโยชน์: asset ข้อมูลต้นทางเองไม่พิสูจน์ว่าฉากมีรูปทรงที่ตั้งใจ

ใช้กระบวนการวาง actor SVG ของเวอร์ชันเพื่อนำ asset เข้าฉากทดสอบ toolbox Motion Design มี actor SVG เลือกผลวางและตรวจจากหน้าก่อนเปลี่ยนความลึก วัสดุ หรือแอนิเมชัน บันทึก asset กับ actor ที่ใช้เพื่อให้เพื่อนทีมทำซ้ำได้

บันทึก asset นำเข้าและเก็บ SVG เดิม คู่มือนำเข้าทั่วไปของ Unreal อธิบายว่าเนื้อหานำเข้าเก็บใน asset โปรเจกต์ ไฟล์ต้นทางยังสำคัญสำหรับแก้และนำเข้าใหม่

ตรวจช่องเปิด สี และวัตถุแยก

เริ่มด้วยช่องจัตุรัสของตรา ดูบนพื้นหลังตัดกันและอีกมุมหากผลมีความลึก หน้าสีอ่อนปิดกลางอาจคล้ายช่องเปิดเมื่อมองตรง การตรวจรับคือพื้นที่ที่ตั้งใจว่างยังว่างจริงไหม

หากกลางถูกเติม ตรวจพาธย่อยและพฤติกรรมเติมต้นทางก่อนเพิ่มเอฟเฟกต์ คู่มือแก้ช่องเปิด SVG อธิบายว่าทำไมส่วนแทรกที่วาดกับช่องจริงดูคล้ายในพรีวิวแบน

ต่อไปตรวจช่องข้างข้าวหลามตัด มองหาเส้นเชื่อมไม่ตั้งใจ หน้าเพิ่ม หรือพื้นหลัง แล้วเลือกวัตถุที่แอนิเมชันต้องการ หากข้าวหลามตัดต้องเคลื่อนอิสระ ยืนยันว่าการจัด actor/component ที่มีให้ย้ายโดยไม่เปลี่ยนกรอบได้ ชิ้นเน้นที่เห็นแยกไม่พิสูจน์โครงสร้างเลือกที่ต้องการในตัวเอง

ตรวจสีหลังรูปทรง เปรียบเทียบกรอบเขียวอมฟ้ากับข้าวหลามตัดปะการังภายใต้วัสดุและแสงที่องค์ประกอบจะใช้ อย่าวินิจฉัยหน้าข้างมีเงาเป็นสีต้นทางผิดเพียงเพราะเข้มกว่าหน้า

สำหรับปัญหาความลึก รายการตรวจการอัดความลึก SVG ให้คำถามรูปทรงต้นทาง ไม่ใช่คู่มือคำสั่ง Unreal เฉพาะ และรูปลักษณ์สำเร็จในการทดสอบไม่ยืนยันเมชผลิตปิดสนิท

ตรวจงานโค้งและนำเข้าใหม่อย่างตั้งใจ

ตัวอย่างจัตุรัสเลี่ยงโค้ง แต่โลโก้ส่วนใหญ่ไม่ใช่ API SVGImporter ของ Epic อธิบายการตั้งคุณภาพแปลง spline เป็น polyline หมายความว่าโค้งต้นทางกับรูปแบบที่สร้างต้องตรวจแยก

สำหรับโลโก้มน ตรวจโค้งนอกและช่องเล็กสุดที่ระยะกล้องใกล้สุดในช็อต หากขอบดูเป็นเหลี่ยม ตรวจตัวควบคุมแปลงที่เกี่ยวข้องในรุ่นเอนจิน อย่าตั้งค่าสูงสุดตามอำเภอใจเพียงเพราะต้นทางเป็นเวกเตอร์

เอกสาร SVGData สำหรับ 5.4 ของ Epic ระบุว่าการเปลี่ยน quality override กระตุ้นการนำเข้าใหม่และสร้างรูปทรงใหม่ ถือเป็นเหตุให้บันทึกฐานและตรวจฉากหลังเปลี่ยนต้นทางหรือการตั้งแปลง แทนสมมติว่างานถัดไปไม่กระทบ ชื่อคุณสมบัติในเอกสารนั้นไม่รับประกันทุกแผง editor รุ่นหลัง

ตรวจช่องเปิด ช่องว่าง วัสดุ และควบคุมวัตถุซ้ำหลังนำเข้าใหม่ ทดสอบฉากในบริบทส่งมอบจริงก่อนจัดชุดงานเต็ม คู่มือนี้ไม่ยืนยันรองรับ runtime ที่แพ็ก เรนเดอร์ SVG เท่าเบราว์เซอร์ หรือประสิทธิภาพทั่วไปปลั๊กอิน

เมื่อตราราสเตอร์ต้องสร้างคืน

หากเวกเตอร์หลักหายและต้นทางเป็นตรา PNG หรือ JPG เรียบง่าย กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector เตรียม SVG นิ่งสำหรับประเมินได้ ครอปถึงงาน ตรวจช่องเปิดกับชิ้นเน้นแยกในพรีวิว และเทียบกับต้นทาง ดาวน์โหลด SVG ที่ยอมรับแล้วตรวจรูปทรงเดียวกันใน Unreal

การแปลงไม่เลือกหน่วยฉาก สร้าง rig กำหนดวัสดุผลิต หรือรับประกันโครงสร้างเมชเฉพาะ ใช้เวกเตอร์หลักเดิมเมื่อมี เก็บภาพถ่ายกับเอฟเฟกต์วาดซับซ้อนเป็นราสเตอร์เมื่อรักษารูปลักษณ์ดีกว่า สำหรับตราเรขาคณิตเรียบง่าย เขียนรูปที่จำเป็นไม่กี่รูปโดยตรงอาจคุมได้มากกว่าสร้างจากพิกเซล

เก็บบันทึกส่งต่อสั้น: ไฟล์ต้นทาง เวอร์ชันเอนจิน/ปลั๊กอิน การตั้งนำเข้า พื้นที่ว่างที่คาด ส่วนที่เคลื่อนอิสระ และระยะกล้องตรวจ คู่มือเตรียมงานในบล็อก ครอบคลุมการเลือกต้นทางก่อนขั้นเฉพาะเอนจินนี้

คำถามที่พบบ่อย

Unreal Engine นำเข้า SVG ได้ไหม? ได้ Epic ให้ SVG Importer ที่ใช้กับรูปทรง Motion Design ตรวจฟีเจอร์และเอกสารของรุ่นเอนจิน แล้วตรวจ asset ที่นำเข้ากับผลฉาก

นำเข้า SVG หมายถึง UMG แสดง SVG ใด ๆ ขณะรันได้ไหม? ไม่ กระบวนการรูปทรง Motion Design ไม่ยืนยันการโหลด SVG ใด ๆ ขณะรันใน UMG ปกติ เลือกและทดสอบวิธีเรนเดอร์ที่ UI ต้องใช้

ทำไมช่องใน SVG ดูเติมหลังนำเข้า? ตรวจว่าต้นทางมีช่องจริงหรือส่วนแทรกที่วาด แล้วตรวจพาธย่อยกับพฤติกรรมเติม ตรวจรูปทรงนำเข้าบนพื้นหลังตัดกันแทนพึ่งหน้าตรงอย่างเดียว

แปลงโลโก้ PNG เป็นวัตถุ 3 มิติพร้อม Unreal ได้ไหม? การแปลงเวกเตอร์กู้รูปต้นทางนิ่งได้ แต่ไม่ทำฉาก Unreal เสร็จ นำเข้า SVG ที่ยอมรับ ตรวจรูปทรงและวัสดุที่สร้าง และยืนยันการควบคุมวัตถุที่โปรเจกต์ต้องใช้

แหล่งอ้างอิง

  1. Epic Games — การนำเข้าและ SVG importer — วิธีรูปทรง Motion Design และบริบทเวอร์ชันบทเรียน
  2. Epic Games — ปลั๊กอิน SVG Importer — ขอบเขตปลั๊กอิน แบนเนอร์ Beta และหมวด Experimental
  3. Epic Games — คู่มือเริ่ม Motion Design — ตั้งโปรเจกต์ ขอบเขต editor และ toolbox actor SVG
  4. Epic Games — นำเข้า Asset โดยตรง — นำเข้า Content Browser ทั่วไปและบันทึก asset
  5. Epic Games — SVGImporter API — ข้อมูล actor คลาส dynamic mesh และแนวคิดแปลง spline
  6. Epic Games — SVGData, Unreal Python 5.4 — quality override และพฤติกรรมสร้างใหม่ตามเวอร์ชัน

ตรวจช่องเปิด ชิ้นแยก และพฤติกรรมฉากของตราหนึ่งก่อนนำเข้าชุด หากเหลือเพียงราสเตอร์ ให้ เตรียม SVG สำหรับประเมิน ตรวจรูปทรง และตรวจไฟล์ที่ยอมรับในโปรเจกต์ Unreal

เพิ่มเติมจากบล็อก

เริ่มต้นด้วย SVG ที่เรียบร้อยขึ้น
และแก้ไขได้ง่ายกว่า