นำเข้า SVG ใน Godot: Texture2D, DPITexture และไอคอนคมชัด

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

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

เลือกชนิดนำเข้า SVG ตามพฤติกรรมแสดงผล

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

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

ต้นฉบับ SVG และพิกเซลที่เรนเดอร์

ตรวจการนำเข้า Texture2D ค่าเริ่มต้นก่อน

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

1. ใส่ SVG ในโครงการแล้วเลือกในแผง FileSystem
2. เปิดแผง Import และยืนยันว่าชนิดนำเข้าเป็น Texture2D
3. ตรวจ SVG > Scale และ Process > Size Limit แล้วนำเข้าใหม่หลังเปลี่ยนตัวเลือก
4. วางเท็กซ์เจอร์ในสไปรต์หรือคอมโพเนนต์ UI ที่ต้องการและตรวจขนาดแสดง

SVG > Scale เปลี่ยนขนาดการแปลงแรสเตอร์ ค่าสูงสร้างภาพใหญ่ขึ้น และมีผลต่อขนาดเท็กซ์เจอร์ใน 2 มิติด้วย จึงควรตรวจมิติโหนดหรือเลย์เอาต์หลังเปลี่ยน Process > Size Limit จำกัดมิตินำเข้าได้ ทั้งสองอธิบายใน เอกสารอ้างอิงตัวนำเข้าเท็กซ์เจอร์

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

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

ใช้ DPITexture กับการตั้งค่าโอเวอร์แซมปลิงที่ถูกต้อง

หากทดสอบวิธีปรับตามขนาด ให้เลือก SVG ใน FileSystem เปลี่ยนชนิดนำเข้าเป็น DPITexture แล้วนำเข้าใหม่ ใช้ตำแหน่ง UI เดิมเพื่อให้การเทียบตอบคำถามเดียว: เปลี่ยนวิธีแปลงแรสเตอร์แล้วแก้ความต่างที่มาตราส่วนที่ต้องการหรือไม่?

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

มีกรณีการขยายสองแบบที่ต้องตรวจ:

• การขยายวิวพอร์ต: โอเวอร์แซมปลิงภาพของ Godot เรนเดอร์ต้นฉบับเวกเตอร์ใหม่ได้เมื่อปัจจัยมาตราส่วนวิวพอร์ตเปลี่ยน เปิดสำหรับ SVG ด้วยการนำเข้าภาพเป็น DPITexture
• การขยายโหนด: โอเวอร์แซมปลิงตาม Scale ของ Node2D หรือ Control ปิดโดยค่าเริ่มต้น เปิด Oversampling with Scale บนโหนดที่เกี่ยวข้องเมื่อต้องการพฤติกรรมนั้น

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

ตัวแก้ไข 2 มิติคำนวณตัวอย่างภาพใหม่อัตโนมัติขณะซูมได้ จึงเป็นภาพตัวอย่างที่ช่วยได้ รันโครงการและทดสอบวิวพอร์ตจริงด้วย ในโหมด stretch แบบ Viewport ฉากถูกวาดที่ขนาดวิวพอร์ตฐานก่อนแล้วขยายเข้าหน้าต่าง การขยายสุดท้ายนั้นยังอาจกำหนดรูปลักษณ์ส่วนติดต่อ เอกสารโหมด stretch อธิบายความต่างจาก Canvas Items

เตรียมกราฟิกที่ Godot ถ่ายทอดได้

เปลี่ยนตัวนำเข้าแก้ปัญหาขนาดเรนเดอร์ วัตถุหายหรือรูปร่างเปลี่ยนต้องตรวจต้นฉบับ

มองหาพาธจริง

เปิด SVG ในตัวแก้ไขเวกเตอร์แล้วเลือกกราฟิกที่เห็น หากทั้งไอคอนเป็นบิตแมปวางเดียว ให้ตรวจก่อนปรับ Godot องค์ประกอบ <image> ของ SVG มีแรสเตอร์ได้ตาม เอกสารอ้างอิงองค์ประกอบ MDN การแปลงคอนเทนเนอร์นั้นเป็นแรสเตอร์ใหม่ไม่อาจสร้างเส้นโค้งสะอาดที่ PNG ฝังขนาดเล็กไม่เคยมี

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

แปลงข้อความตกแต่งเป็นพาธ

ตัวนำเข้า SVG ของ Godot ไม่เรนเดอร์ข้อความ SVG ที่ยังเป็นข้อความ แปลงตัวอักษรตกแต่งเป็นพาธในสำเนาส่งมอบ โดยเก็บต้นแบบข้อความแก้ไขได้ ใน Inkscape คำสั่งคือ Path > Object to Path Godot รวมขั้นตอนไว้ใน นำเข้าภาพ SVG ที่มีข้อความ

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

ทดสอบเอฟเฟกต์ซับซ้อนแยก

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

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

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

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

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

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

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

ตรวจรับไอคอนในส่วนติดต่อจริง

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

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

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

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

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

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

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

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

Godot นำเข้า SVG ได้หรือไม่? ได้ การนำเข้า Texture2D ค่าเริ่มต้นแปลง SVG เป็นแรสเตอร์ตอนนำเข้า ตัวนำเข้าปัจจุบันมี DPITexture สำหรับภาพ SVG ที่ต้องแปลงแรสเตอร์ใหม่ตามโอเวอร์แซมปลิง ตรวจเอกสารรุ่นโครงการ เพราะ DPITexture ระบุว่าเป็นทดลอง

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

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

แหล่งข้อมูล

1. Godot — นำเข้าภาพ — นิยามชนิดนำเข้า SVG การเตรียมข้อความ ข้อจำกัดตัวเรนเดอร์ และค่าฟิลเตอร์เท็กซ์เจอร์
2. Godot — DPITexture — อธิบายการสืบทอด ต้นฉบับ SVG ที่เก็บไว้ การปรับขนาด และสถานะทดลอง
3. Godot — หลายความละเอียด — อธิบายการยืดวิวพอร์ต โอเวอร์แซมปลิงภาพ ค่าตามขนาดโหนด และต้นทุนแปลงแรสเตอร์ซ้ำ
4. Godot — ResourceImporterTexture — อธิบายตัวควบคุมมาตราส่วนแรสเตอร์และจำกัดขนาดของตัวนำเข้าเท็กซ์เจอร์ค่าเริ่มต้น
5. ThorVG — เกี่ยวกับ ThorVG — นิยามขอบเขตรองรับของตัวแปล SVG
6. MDN — องค์ประกอบภาพ SVG — อธิบายว่า SVG มีกราฟิกแรสเตอร์ได้อย่างไร

---

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