นำเข้า SVG ใน Unity: เตรียมกราฟิกสำหรับ UI Toolkit หรือสไปรต์

การนำเข้า SVG ใน Unity เริ่มจากการตัดสินใจสองข้อ: ใช้ตัวแก้ไขรุ่นใด และกราฟิกจะปรากฏที่ไหน Unity 6.3 มีการนำเข้า SVG สำหรับ UI Toolkit และ Texture2D ในตัว การนำเข้า SVG โดยตรงเป็น Sprite หรือทรัพยากร uGUI ใช้แพ็กเกจ Vector Graphics ส่วนตัวแก้ไขรุ่นก่อนใช้แพ็กเกจสายเก่า Unity อธิบายการแยกนี้ใน คู่มือรุ่น Vector Graphics

หากมี SVG ที่แก้ไขได้แล้ว ให้เตรียมไฟล์นั้นสำหรับตัวนำเข้า หากมีเพียง PNG หรือ JPG ให้ลากเส้นเฉพาะเมื่อต้องการรูปทรงเวกเตอร์ พื้นผิวหรือสไปรต์พิกเซลอาร์ตยังเป็นแรสเตอร์ได้

ทดสอบไอคอนตัวแทนหนึ่งชิ้น เพื่อแยกปัญหาต้นฉบับออกจากปัญหานำเข้าและแสดงผลของ Unity ก่อนทำทั้งชุด

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

เลือกวิธีนำเข้าก่อนแก้กราฟิก

ใช้คอมโพเนนต์ปลายทางเลือกวิธี ทรัพยากรที่ใช้ได้ในเลย์เอาต์ UI Toolkit ไม่ได้ใส่ในช่อง Sprite Renderer ได้โดยอัตโนมัติ

ตารางอิง ข้อกำหนดแพ็กเกจของ Unity ล็อกรุ่นตัวแก้ไขและแพ็กเกจที่โครงการใช้ คำแนะนำ Unity 2018 หรือตัวนำเข้าพรีวิว 2.0 อาจอธิบายตัวเลือกต่างจากโครงการ 6.3 ปัจจุบัน

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

เก็บไฟล์ทดสอบนำเข้าเล็กไว้ข้างกราฟิก

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

เตรียม SVG ที่ตัวนำเข้าถ่ายทอดได้

เปิดต้นฉบับในตัวแก้ไขเวกเตอร์และตรวจวัตถุจริง เก็บต้นแบบเดิม แล้วทำไฟล์ส่งออกสำหรับ Unity แยก

ยืนยันว่ากราฟิกมีพาธ

SVG มีบิตแมปผ่านองค์ประกอบ <image> ได้ นามสกุลอย่างเดียวไม่ได้ยืนยันว่ากราฟิกเป็นเรขาคณิตเวกเตอร์ ข้อกำหนดเนื้อหาฝังของ W3C อธิบายความต่างนี้ เลือกส่วนกราฟิกในตัวแก้ไขแล้วตรวจวัตถุหรือมาร์กอัป ใช้ วิธีวินิจฉัยแรสเตอร์ฝัง หากเป็นสี่เหลี่ยมภาพเดียว

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

แทนคุณสมบัติที่ไม่รองรับอย่างตั้งใจ

ตัวนำเข้าในตัวของ Unity รองรับ SVG 1.1 บางส่วน สิ่งที่ไม่รองรับตามเอกสารรวมข้อความที่ยังเป็นข้อความ มาสก์พิกเซล ฟิลเตอร์ การโต้ตอบ และแอนิเมชัน ภาพตัวอย่างในเบราว์เซอร์จึงอาจถูกต้องแต่ผล Unity ต่าง ดู ข้อจำกัด SVG ของ Unity

เตรียมสำเนาส่งมอบตามสิ่งที่กราฟิกต้องมี:

• แปลงตัวอักษรตกแต่งเป็นเส้นขอบ เก็บป้ายส่วนติดต่อเป็นข้อความในส่วนติดต่อเมื่อต้องแก้ไขหรือแปลภาษา
• สร้างเงาหรือแสงเรืองที่ต้องใช้ใหม่ด้วยเอฟเฟกต์ที่ปลายทางรองรับ หรือเก็บกราฟิกนั้นเป็นแรสเตอร์
• ตรวจมาสก์แยกจากพาธตัดภาพ มาสก์พิกเซลนุ่มกับการตัดเรขาคณิตเป็นโครงสร้างต่างกัน
• วางแผนแอนิเมชันใน Unity แทนอาศัยแอนิเมชันฝังใน SVG

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

ลบความซับซ้อนที่เกิดโดยไม่ตั้งใจ

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

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

นำเข้า UI Toolkit ใน Unity 6.3 หรือใหม่กว่า

เริ่มด้วย SVG ส่งมอบที่ตรวจรูปร่างและเอฟเฟกต์แล้ว

1. เพิ่ม SVG ในโฟลเดอร์ Assets ของโครงการแล้วเลือก
2. ตั้ง Generated Asset Type เป็น UI Toolkit Vector Image ใน Inspector
3. ใช้การตั้งค่านำเข้าและใช้ภาพเวกเตอร์ที่ได้ในองค์ประกอบ UI Toolkit ที่ต้องการ
4. ดูตัวอย่างเลย์เอาต์จริงที่ขนาดแสดงเล็กที่สุดและใหญ่ที่สุดที่ตั้งใจ

Unity อธิบายตัวเลือกทรัพยากรในตัวใน ทำงานกับกราฟิกเวกเตอร์ หากผู้ใช้ทรัพยากรต้องการ Texture2D ให้เลือกผลนั้นแทนและตรวจเท็กซ์เจอร์ที่ขนาดใช้งาน

สำหรับ UI Toolkit เริ่มจากการตั้งค่าแบ่งรูปทรงพื้นฐานที่แนะนำ Target Resolution และ Zoom Factor ให้ตัวนำเข้ากำหนดการแบ่งเส้นโค้งสำหรับเงื่อนไขแสดงผลที่ต้องการ Unity แนะนำใช้ความละเอียดเป้าหมายต่ำที่สุดที่ให้ผลน่าพอใจ การตั้งค่านำเข้าภาพ อธิบายตัวควบคุม

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

นำเข้าสำหรับ Sprite Renderer หรือ uGUI

ติดตั้งแพ็กเกจ com.unity.vectorgraphics ที่เข้ากันได้ผ่าน Package Manager เมื่อปลายทางต้องใช้การรองรับ Sprite หรือ uGUI เลือกทรัพยากรที่สร้างให้ตรงคอมโพเนนต์และยืนยันว่าคอมโพเนนต์รับได้ เอกสารปัจจุบัน ของแพ็กเกจแยกชนิดนำเข้าเหล่านี้จากวิธี UI Toolkit ในตัว

สำหรับ Sprite Renderer ตรวจขนาดวัตถุในฉากและจุดหมุนก่อนคัดลอกเข้า prefab สำหรับ uGUI ตรวจขั้นตอน SVGImage ที่โครงการใช้ ขั้นตอนสไปรต์แรสเตอร์ปกติยังเป็นทางเลือกเมื่อกราฟิกดูถูกต้องที่มิติที่ต้องการอยู่แล้ว

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

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

วินิจฉัยความต่างแรกที่เห็น

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

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

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

ขั้นตอนนี้เมื่อใช้ PerfectVector

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

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

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

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

Unity 6 ต้องใช้แพ็กเกจ Vector Graphics หรือไม่? ขึ้นกับรุ่นย่อยและปลายทาง Unity 6.3 มีการนำเข้า SVG สำหรับ UI Toolkit และ Texture2D ในตัว Sprite และ uGUI ใช้แพ็กเกจพรีวิว 3.0 ส่วน Unity รุ่นก่อนใช้วิธีแพ็กเกจพรีวิว 2.0 ที่เข้ากันได้

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

การลากเส้นแก้ SVG ที่ Unity นำเข้าไม่ถูกได้หรือไม่? เฉพาะเมื่อเรขาคณิตต้นฉบับต้องสร้างใหม่ หาก SVG มีพาธถูกแต่ชนิดทรัพยากรที่สร้างผิดหรือเอฟเฟกต์ไม่รองรับเป็นสาเหตุ ให้แก้การเลือกนำเข้าหรือส่งออกนั้นก่อน

แหล่งข้อมูล

1. Unity — คู่มือแพ็กเกจ Vector Graphics 3.0 — ระบุการแยกตามรุ่นตัวแก้ไขและวิธีในตัวเทียบกับแพ็กเกจ Sprite/uGUI
2. Unity — ทำงานกับกราฟิกเวกเตอร์ — อธิบายตัวเลือกทรัพยากรในตัวและคุณสมบัติ SVG ที่ไม่รองรับ
3. Unity — การตั้งค่านำเข้าภาพ — อธิบายการตั้งค่าภาพเวกเตอร์ UI Toolkit และตัวควบคุมแบ่งรูปทรง
4. Unity — คู่มือแพ็กเกจ Vector Graphics 2.0 — ครอบคลุมตัวนำเข้าเก่า หน่วยฉาก จุดหมุน และสถานะทดลอง
5. W3C — เนื้อหาฝัง SVG — ยืนยันว่า SVG มีเนื้อหาภาพแรสเตอร์ได้

---

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