นำเข้า SVG ใน Rive: เตรียมกราฟิกแก้ไขได้สำหรับแอนิเมชัน

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

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

SVG ใน Rive เปลี่ยนเป็นอะไร?

หลังนำเข้า คุณทำงานกับวัตถุ Rive SVG ต้นฉบับไม่ได้รวมในไฟล์ .riv ที่ส่งออก และรันไทม์ Rive ปัจจุบันไม่แปลงทรัพยากร SVG ระหว่างรัน เตรียมและนำเข้า SVG ในตัวแก้ไขให้เสร็จก่อนส่งออกไฟล์ Rive พฤติกรรมส่งออกของ Rive อธิบายขอบเขตนี้

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

หาก SVG ต้นฉบับเองแยกไม่ได้ ให้ใช้ วิธีวินิจฉัยวัตถุและการแยกกลุ่ม SVG ระบุกลุ่ม พาธประกอบ หรือภาพฝังก่อนเปลี่ยน

เตรียมส่วนต่าง ๆ ก่อนส่งออก

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

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

วางแผนส่วนที่เคลื่อนไหว

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

หลังนำเข้า ใช้กลุ่ม Rive จัดชิ้นส่วนและให้ตัวควบคุมการแปลงแยก Rive ให้สร้างกลุ่มและวางวัตถุภายในใน Hierarchy ได้ จัดกลุ่มสิ่งที่เลือกด้วย Command+G บน macOS หรือ Ctrl+G บน Windows ได้เช่นกัน เอกสารกลุ่มของ Rive ครอบคลุมตัวควบคุมเหล่านี้

นำเข้าจาก SVG, Figma หรือ Illustrator

ไฟล์ SVG ที่บันทึกไว้

1. บันทึก SVG ส่งออกแยกเพื่อเก็บต้นแบบแก้ไขได้ไว้
2. ลากไฟล์เข้า Rive หรือคลิก + ในแผง Assets แล้วเลือกไฟล์ที่จะนำเข้า
3. วางกราฟิกตรงที่ต้องการและขยายโครงสร้างใน Hierarchy
4. เลือกส่วนเล็กหนึ่งส่วน เปลี่ยนสีเติม แล้วเลิกทำ ตรวจว่ามีเพียงพื้นที่ที่ต้องการเปลี่ยนหรือไม่

วิธีนำเข้าไฟล์สองแบบอยู่ใน ภาพรวม Assets ของ Rive การนำเข้าสำเร็จเป็นจุดเริ่มต้นของการตรวจแก้ไข

Figma

ใช้ Copy as SVG กับกราฟิกที่ต้องการใน Figma แล้ววางในตัวแก้ไข Rive ตรวจรูปทรงและรูปลักษณ์ที่นำเข้าก่อนคัดลอกองค์ประกอบใหญ่ส่วนที่เหลือ นี่คือ วิธีนำเข้าจาก Figma ตามเอกสาร Rive

Illustrator

ตั้งรูปแบบการกำหนดสไตล์ SVG เป็น Presentation Attributes Rive ระบุชื่อที่ต่างเล็กน้อยสำหรับวิธีส่งออกของ Illustrator:

• Save As: ใน SVG Options ตั้ง CSS Properties เป็น Presentation Attributes
• Export As: ใน SVG Options ตั้ง Styling เป็น Presentation Attributes
• คัดลอกและวางโดยตรง: ตรวจตัวเลือกสไตล์ Export As SVG เพราะ Illustrator ใช้การตั้งค่านั้นกับวิธีนี้

ปิด Preserve Illustrator Editing Capabilities ใน SVG ที่ส่งต่อด้วย เก็บ Illustrator ต้นแบบแยก Rive เตือนว่าตัวเลือกนี้เพิ่มข้อมูล Illustrator พิเศษ เพิ่มขนาดไฟล์ และอาจมีข้อมูลที่ตัวนำเข้าไม่รู้จัก คำแนะนำ Illustrator ของ Rive เป็นแหล่งอ้างอิงของการตั้งค่าเหล่านี้

จับคู่อาการนำเข้ากับการตรวจแรก

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

หาก SVG จาก Illustrator ดูดำ ให้เริ่มจากการส่งออก Presentation Attributes แล้วตรวจสีของรูปทรงที่มีปัญหา กราฟิกดำอย่างเดียวระบุสาเหตุไม่ได้ และอย่าสับสนกับค่า fallback สีขาวของ inherit ที่ Rive ระบุ

สำหรับเนื้อหาภาพหาย คู่มือ SVG ที่มีแรสเตอร์ฝัง อธิบายการตรวจว่ามีพาธจริงหรือภาพในคอนเทนเนอร์ SVG Rive นำเข้า JPEG, PNG และ WebP เป็นทรัพยากรภาพแยกได้ตาม รายการประเภททรัพยากร การเก็บพื้นหลังมีพื้นผิวเป็นแรสเตอร์แยกอาจเป็นทางเลือกที่เหมาะ

หากการนำเข้าไม่จบสักที

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

เมื่อใดควรใช้ PerfectVector ในขั้นตอนนี้

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

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

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

ตรวจการเคลื่อนไหวหนึ่งอย่างก่อนสร้างแอนิเมชัน

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

ตรวจจุดหมุนด้วย ใน Rive วัตถุลูกสืบทอดการแปลงจากวัตถุแม่ และจุดกำเนิดกำหนดตำแหน่งหมุนหรือปรับขนาด Freeze ให้เปลี่ยนตำแหน่งวัตถุแม่โดยไม่ย้ายวัตถุลูก เปิดปิดด้วย Y และปิดหลังปรับจุดกำเนิด ทำตาม คู่มือ Freeze และ Origin ของ Rive สำหรับตัวควบคุม

ก่อนเดินหน้าทำแอนิเมชัน ให้ยืนยันว่า:

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

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

การนำเข้า SVG ทำให้แก้ไขใน Rive ได้หรือไม่? ได้สำหรับคุณสมบัติ SVG ที่ Rive รองรับ ขยายกราฟิกที่นำเข้าใน Hierarchy เพื่อเลือกส่วนที่ต้องการ หากหลายพื้นที่ยังทำงานเป็นวัตถุเดียว ให้ตรวจกลุ่มและโครงสร้างพาธ

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

Rive รองรับสีไล่ระดับ SVG หรือไม่? รองรับแบบเส้นตรงและรัศมี แต่ละเว้นการแปลงทางเรขาคณิตของสีไล่ระดับ จึงอาจต้องปรับตำแหน่งหลังนำเข้า

การลากเส้น PNG สร้างแอนิเมชัน Rive หรือไม่? การลากเส้นสร้างเรขาคณิต SVG จากแรสเตอร์ที่เหมาะได้ คุณยังต้องตรวจและแยกส่วนเคลื่อนไหว ตั้งลำดับชั้นกับจุดกำเนิด และสร้างแอนิเมชันใน Rive

แหล่งข้อมูล

1. Rive — SVG และทรัพยากรเวกเตอร์ — การแปลงเป็นวัตถุของโปรแกรม การนำเข้าจาก Illustrator และ Figma พฤติกรรมส่งออกสำหรับรันไทม์ และคุณสมบัติ SVG ที่ไม่รองรับ
2. Rive — ทรัพยากร — ตัวควบคุมนำเข้าไฟล์และทรัพยากรภาพแรสเตอร์แยก
3. Rive — ภาพรวมรูปทรงและพาธ — การกำหนดสไตล์รูปทรงและเรขาคณิตพาธภายในเลเยอร์รูปทรง
4. Rive — กลุ่ม — การจัดส่วนและตัวควบคุมกลุ่มใน Hierarchy
5. Rive — Freeze และ Origin — การแปลงวัตถุแม่–ลูกและการย้ายจุดกำเนิดโดยไม่ย้ายกราฟิกของวัตถุลูก

---

หากกราฟิกเริ่มจาก PNG หรือ JPG และต้องมีเส้นขอบแก้ไขได้ ให้ เตรียม SVG ด้วย PerfectVector ตรวจส่วนที่ลากเส้น นำเข้าใน Rive และทดลองเคลื่อนไหวแยกหนึ่งอย่างก่อนสร้างแอนิเมชันส่วนที่เหลือ