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

นำเข้า SVG ใน Synfig: เตรียมเลเยอร์แอนิเมชันที่แก้ไขได้

เปรียบเทียบการนำเข้า SVG โดยตรงกับการส่งออก SIF จาก Inkscape สำหรับ Synfig ตรวจเลเยอร์ สี และส่วนที่เคลื่อนไหวแยกกันก่อนสร้างแอนิเมชันหรือริก

ในหน้านี้

Synfig นำเข้า SVG ผ่าน File → Import ได้ แต่ควรตรวจเลเยอร์ที่ได้ก่อนทำแอนิเมชัน เอกสารนำเข้า SVG ยังอธิบายวิธีจาก Inkscape ไป SIF เมื่อการนำเข้าโดยตรงไม่ถ่ายทอดกราฟิกได้เหมาะกับการใช้งาน

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

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

เลือกนำเข้า SVG โดยตรงหรือใช้สำเนา SIF

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

วิธีไฟล์ที่นำเข้า Synfigสิ่งที่ต้องตรวจ
นำเข้า SVG โดยตรงไฟล์ส่งออก .svg ของคุณกราฟิกที่เห็น เรขาคณิตที่แก้ไขได้ โครงสร้างเลเยอร์ และมาตราส่วน
ส่งออก SIF จาก Inkscapeสำเนา .sif แยกกลุ่มเลเยอร์ที่ส่งออก สีเติมและเส้นขอบ แล้วตรวจภาพแบบเดียวกัน
นำเข้าแรสเตอร์ไฟล์ภาพที่รองรับการขยับภาพแบนเพียงภาพเดียวเพียงพอสำหรับช็อตหรือไม่

ตัวเลือก SIF ยังมีใน นิยามส่วนขยายส่งออก Synfig อย่างเป็นทางการของ Inkscape โดยประกาศ Synfig Animation (*.sif) และระบุว่าการส่งออกอาจสูญเสียข้อมูล ตรวจว่ารุ่น Inkscape ที่ติดตั้งมีรูปแบบนี้หรือไม่ การมีตัวส่งออกไม่ได้รับรองว่าทุกการติดตั้งจะแสดงตัวเลือกเหมือนกัน

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

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

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

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

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

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

แผนภาพอธิบายการจัดโครงสร้างที่ต้องการ ไม่ได้ทำนายจำนวนเลเยอร์ที่ตัวนำเข้าจะสร้าง โค้ดตัวส่งออก SIF ของ Inkscape สร้างเลเยอร์พื้นที่กับเส้นขอบแยกจากสีเติมและเส้นขีดของพาธได้ ดังนั้นส่วนต้นฉบับหนึ่งส่วนอาจต้องให้หลายเลเยอร์ที่ได้เคลื่อนไหวร่วมกัน

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

ตรวจการนำเข้าโดยตรงด้วยไฟล์เล็ก

บันทึกสำเนาส่งต่อที่มีเฉพาะโคมไฟ แล้วนำเข้าเอกสาร Synfig ใหม่ผ่าน File → Import ก่อนเพิ่มแอนิเมชัน ให้ตรวจสี่ข้อ:

  1. เปรียบเทียบรูปร่างรวมและขนาดกราฟิกกับผืนงาน
  2. ขยายลำดับชั้นเลเยอร์แล้วหาแขนหนึ่งส่วนหรือโป๊ะ
  3. ซ่อนส่วนนั้นชั่วคราวเพื่อดูว่ามีกราฟิกอะไรอยู่ในส่วนนี้แน่
  4. คืนการมองเห็นและลองเคลื่อนเล็กน้อยชั่วคราว แล้วเลิกทำ

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

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

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

ลองส่งออก SIF จาก Inkscape เมื่อช่วยได้

หาก Inkscape ที่ติดตั้งมี Synfig Animation (*.sif) ใน Save As ให้บันทึกสำเนา SIF แยกและเปิดใน Synfig เก็บ SVG ต้นแบบที่แก้ไขได้ไว้ คู่มือแปลงจาก Inkscape ของ Synfig อธิบายวิธีนี้และความสัมพันธ์ระหว่างเลเยอร์ Inkscape กับ Group Layers ของ Synfig

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

เปรียบเทียบสำเนา SIF กับการนำเข้าโดยตรงด้วยรายการตรวจเดียวกัน เลือกโป๊ะได้หรือไม่ สีและเส้นขอบอยู่ด้วยกันหรือไม่ ส่วนซ้อนทับยังครบหรือไม่ เลือกตามผลเหล่านี้ แทนตามนามสกุลที่ฟังดูเข้ากับโปรแกรมกว่า

อย่านำรายการความเข้ากันได้เก่ามาใช้เป็นกฎทั่วไป หน้า Synfig wiki มีวิธีแปลง XSLT เก่าที่มีข้อจำกัดของตัวเอง ข้อจำกัดเหล่านั้นไม่ได้อธิบายตัวนำเข้า SVG โดยตรงหรือตัวส่งออก Inkscape ปัจจุบันโดยอัตโนมัติ สำหรับไฟล์มีปัญหา ให้ลดสำเนาเหลือรูปทรงเติมสีง่าย ๆ แล้วเพิ่มคุณสมบัติซับซ้อนกลับทีละอย่าง

กำหนดจุดกำเนิดกลุ่มก่อนทดสอบการเคลื่อนไหว

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

วางศูนย์กลางหมุนตรงข้อต่อที่ต้องการ Group Transformation Widget ตามเอกสาร ให้กด Ctrl ค้างขณะลากศูนย์กลางการแปลง เพื่อเปลี่ยน Origin แยกจากกลุ่ม ตรวจผลต่อกลุ่มที่เลือกก่อนทำแอนิเมชัน

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

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

หากนำเข้าแล้วว่างหรือสีเปลี่ยน

ใช้อาการจำกัดขอบเขตการตรวจ:

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

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

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

PerfectVector ช่วยตรงไหน

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

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

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

Synfig นำเข้าไฟล์ SVG ได้หรือไม่? ได้ ใช้ File → Import แล้วตรวจกราฟิกที่เห็นกับโครงสร้างเลเยอร์ที่ได้ เอกสาร Synfig ยังอธิบายวิธี Inkscape ไป SIF เป็นทางเลือกเมื่อการนำเข้าโดยตรงไม่ถ่ายทอดไฟล์ได้เหมาะกับการใช้งาน

ควรใช้ SVG หรือ SIF สำหรับแอนิเมชัน Synfig? เก็บ SVG ต้นแบบและเปรียบเทียบการนำเข้าโดยตรงกับไฟล์ส่งออก SIF แยกเมื่อ Inkscape ที่ติดตั้งมีตัวเลือกนั้น เลือกผลที่รูปลักษณ์และส่วนที่แก้ไขได้เหมาะกับแอนิเมชัน ไม่มีวิธีใดสร้างริกอัตโนมัติ

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

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

แหล่งข้อมูล

  1. Synfig — การนำเข้า SVG และแปลงจาก Inkscape — อธิบายการนำเข้าโดยตรงและวิธี SIF ทางเลือก พร้อมวิธีแปลงในอดีต
  2. Inkscape — นิยามส่วนขยายส่งออก Synfig — ลงทะเบียนรูปแบบส่งออก SIF และระบุว่าการส่งออกอาจสูญเสียข้อมูล
  3. Inkscape — การทำงานของตัวส่งออก Synfig — แสดงการจัดการคอนเทนเนอร์เลเยอร์และการแปลงสีเติม/เส้นขอบแยกกัน
  4. Synfig — Group Layer — นิยามการแปลงเลเยอร์ที่จัดกลุ่มและพารามิเตอร์
  5. Synfig — Group Transformation Widget — อธิบายการปรับ Origin ของกลุ่มแยกจากกราฟิก
  6. Synfig — Import Image Layer — อธิบายเลเยอร์แยกสำหรับเนื้อหาภาพที่นำเข้า

เริ่มจากกราฟิกแรสเตอร์ใช่ไหม? เตรียมพาธ SVG ด้วย PerfectVector ตรวจพื้นที่ที่จะเคลื่อนไหว และทดสอบหนึ่งส่วนใน Synfig ก่อนสร้างแอนิเมชันส่วนที่เหลือ

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

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