Animator

แอนิเมชัน 2D และ 3D บนเวทีเดียวกัน: เลเยอร์และคีย์เฟรม ตัวแก้ไขกราฟ ช็อต การจัดโครงกระดูกอัตโนมัติ VFX และตัวผสมภาพ

สรุปในประโยคเดียว#

สตูดิโอที่มีรูปแบบคล้าย After Effects ที่ทำแอนิเมชัน 2D และ 3D บนไทม์ไลน์เดียวกัน พร้อมตัวแก้ไขกราฟสำหรับเส้นโค้ง และตัวผสมภาพสำหรับขั้นตอนสุดท้าย

การจัดวางหน้าจอ#

Animator: เครื่องมือ เวที ไทม์ไลน์พร้อมหกแท็บ และการตั้งค่าฉาก

แถบเมนูFile · Edit · Image · Filters · Tools · Window · Config · Plugins
แถบเครื่องมือคำสั่งไฟล์ เครื่องมือแปลงรูป รูปทรง ระบบเล่น เวลาปัจจุบันและรวม อัตราเฟรม สวิตช์ 2D/3D การแบ่งมุมมอง และการซูม
ซ้ายTools: VFX Builder, Procedural Shape, รายการอ็อบเจ็กต์, Create, Auto-Rig และหมวด View / 3D layers / Add special
กลางเวที พร้อมกิซโมแกน 3D เมื่ออยู่ในโหมด 3D
ล่างไทม์ไลน์ อยู่หลังหกแท็บ
ขวาScene settings
แถบสถานะเฟรมปัจจุบัน เวลาปัจจุบันเทียบกับเวลารวม จำนวนแถว

หกแท็บของไทม์ไลน์#

Shotsลำดับช็อตที่ประกอบกันเป็นชิ้นงาน
Timelineเลเยอร์และคีย์เฟรมตามเวลา: ค่าเริ่มต้น
Graphคีย์เฟรมชุดเดียวกัน แต่แสดงเป็นเส้นโค้งที่แก้ไขได้ ที่ที่การอีซิ่งเกิดขึ้นจริง
Audioเสียงประกอบ และการซิงค์กับมัน
Color Gradingการเกรดสี
Compositorการซ้อนเลเยอร์และเอฟเฟกต์

สิ่งที่คุณทำที่นี่#

ตั้งค่าฉากก่อน#

แผง Scene settings ทางขวาคือสิ่งที่ควรทำก่อนเริ่มทำแอนิเมชัน ไม่ใช่ทำทีหลัง:

  • Canvas size: กำหนดเอง หรือเลือกพรีเซ็ตตั้งแต่ 32×32 ถึง 1080×1920
  • Frame rate: 12, 15, 24, 30 หรือ 60
  • Duration: หน่วยเป็นวินาที พร้อมจำนวนเฟรมกำกับไว้ด้านล่าง (150 เฟรมที่ 30 fps) และพรีเซ็ตตั้งแต่ 1 ถึง 60 วินาที
  • สีพื้นหลัง

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

เพิ่มสิ่งต่าง ๆ#

Create ใส่รูปทรง ข้อความ ภาพ และรูปทรงพื้นฐาน 3D อ็อบเจ็กต์ยังมาจากสตูดิโออื่น ได้ด้วย: ภาพวาดจาก Vectra, สไปรต์พิกเซล, mesh จากไปป์ไลน์ 3D Auto-Rig สร้างริกให้ตัวละครโดยอัตโนมัติ ซึ่งเป็นเส้นทางที่เร็วที่สุดสู่สิ่งที่จัดท่าได้

ทำแอนิเมชัน#

ไทม์ไลน์ พร้อมแถวเลเยอร์ แทร็กเหตุการณ์แอนิเมชัน และไม้บรรทัดเฟรม

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

Onion skinning อยู่บนแถบเครื่องมือ (และอยู่ใน command palette ด้วย ชื่อ Toggle onion skinning)

ปรับแต่งการเคลื่อนไหว#

แท็บ Graph คือจุดที่แอนิเมชันหยุดดูเหมือนกลไก คีย์เฟรมทุกอันกลายเป็นจุดบน เส้นโค้งที่มีแฮนเดิล การอีซิ่งคือสิ่งที่คุณทำกับแฮนเดิลเหล่านั้น

ทำงานในโหมด 3D#

สวิตช์ 2D/3D บนแถบเครื่องมือเปลี่ยนเวที ไม่ใช่เปลี่ยนโปรเจกต์ การตั้งค่าฉากยังครอบคลุม การจัดแสง (ambient, key, fill และสภาพแวดล้อม HDRI พร้อม specular IBL), หมอก และ กล้อง (FOV ระนาบใกล้และไกล) Cam Key ใส่คีย์เฟรมให้กล้อง Morph Key ใส่คีย์เฟรมให้รูปทรงเปลี่ยนระหว่างสองแบบ

VFX#

VFX Builder ประกอบเอฟเฟกต์ และคลิป VFX อยู่บนไทม์ไลน์เหมือนคลิปอื่น ๆ Procedural Shape สร้างเรขาคณิตจากพารามิเตอร์แทนที่จะวาดเอง

พาเนลด้านขวา สิบสี่แท็บ#

พาเนลด้านขวา บนแท็บ Scene Settings

พาเนลด้านขวาไม่ใช่ตัวตรวจสอบเดียว แต่มีถึงสิบสี่แท็บ:

แท็บ
Scene Settingscanvas, อัตราเฟรม, ระยะเวลา, พื้นหลัง, ฉาก 3D, การจัดแสง, หมอก, กล้อง
Propsคุณสมบัติของอ็อบเจ็กต์ที่เลือก
Paramsพารามิเตอร์ที่เปิดเผยโดยอ็อบเจ็กต์แบบ procedural
Keysการตั้งค่าคีย์เฟรม
Brushการตั้งค่าเครื่องมือวาด
FXmodifiers ที่ใช้กับส่วนที่เลือก
Post FXชุดขั้นตอนหลังการประมวลผล
VFXชุดเอฟเฟกต์
Assetsสิ่งที่ฉากกำลังดึงเข้ามาใช้
Segmentการแบ่งส่วนด้วย AI: ดูด้านล่าง
Edgeการปรับแต่งขอบสำหรับการแบ่งส่วนนั้น
Skinningการผูก mesh เข้ากับริก
Pipelineตำแหน่งของช็อตนี้ในสายการผลิต
Inputsการผูกอินพุต

แถบเครื่องมือ#

ยี่สิบเอ็ดเครื่องมือ ใน 4 กลุ่ม

แถบเครื่องมือของ Animator: เครื่องมือแปลงรูป เครื่องมือวาด รูปทรง ระบบเล่น และสวิตช์ 2D/3D

กลุ่มเครื่องมือ
Transformselect · move · rotate · scale
Riggingbone
Drawingpaint · eraser · fill · pen · bezier · spline · text
Shapesrectangle · ellipse · polygon · star · line
Stagekeyframe · canvas · nodes · split

สวิตช์ 2D/3D ก็อยู่ตรงนี้เช่นกัน พร้อมโหมด Mixed ที่แสดงเลเยอร์ 2D และ 3D ในวิวพอร์ตเดียวกันแทนที่จะบังคับให้คุณเลือกอย่างใดอย่างหนึ่ง

การปรับแต่งการเคลื่อนไหว#

แท็บ Timeline บอกว่า เมื่อไร แท็บ Graph บอกว่า อย่างไร คีย์เฟรมทุกอันคือ จุดบนเส้นโค้งที่มีแฮนเดิล และการประมาณค่าระหว่างสองคีย์เป็นหนึ่งในเก้าโหมด:

linear · hold · step · easeIn · easeOut · easeInOut · bounce · elastic · spring

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

Modifiers, แท็บ FX#

สี่สิบ modifiers ซ้อนกันต่ออ็อบเจ็กต์ จัดลำดับใหม่ได้ แต่ละอันเปิด/ปิดได้โดย ไม่ต้องเอาออก หกหมวด:

หมวด
Visual (9)glow · blur · outline · drop shadow · colour adjust · gradient map · vignette · chromatic aberration · colour grading
Distortion (10)noise · wave · turbulence · pixelate · distort · liquify · ripple · displacement · spherize · swirl
Temporal (6)pulse · shimmer · trail · afterimage · motion blur · echo
Transform (7)shake · jitter · bounce · wiggle · spring · elastic · gravity
Composite (4)mask · blend · clamp · clip
Generative (3)fractal noise · cell pattern · gradient fill

กลุ่ม Temporal และ Transform คือกลุ่มที่เคลื่อนไหวได้เอง: wiggle หรือ trail คือการเคลื่อนไหวที่คุณไม่ต้องใส่คีย์เฟรมเอง

Post FX#

ชุดขั้นตอนแบบ screen-space สำหรับเวทีทั้งหมด พร้อมเจ็ดพรีเซ็ตให้เริ่มต้น clean, cinematic, CRT, neon, glitch, dreamy, studio

กลุ่ม
Normal-map lightingมุม ระดับความสูง สีแสง ambient, specular, ความมันวาว, ความแรง
Screen effectschromatic aberration · vignette · scanlines พร้อมความหนาแน่น · film grain · glitch
Bloomความเข้ม เกณฑ์ รัศมี
Gradingcurves, exposure, contrast, saturation, temperature, tint, hue, lift/gamma/gain
Stylizesharpen · posterize · pixelate

สองสิ่งที่พาเนลบอกคุณและพลาดได้ง่าย:

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

ไปป์ไลน์แมตต์#

Pipeline คือชุดขั้นตอนแบบจัดลำดับใหม่ได้ที่ใช้กับภาพในแต่ละเฟรม มีแคชของตัวเอง และมี Clear Cache เมื่อมันเก่าเกินไป สิบขั้นตอน:

grayscale · invert · luma to alpha · alpha fill · alpha fusion · colour decontaminate · premultiply · matte cleanup · smoothed alpha · alpha denoise

รันได้ที่ เฟรมปัจจุบัน ที่ ช่วง (from/to) หรือที่ ทุกเฟรม นี่คือขั้นตอน สุดท้ายของการตัดตัวแบบออกจากวิดีโอ: matte จาก AI สร้าง alpha ให้ และขั้นตอนเหล่านี้ ทำให้มันใช้งานได้จริง colour decontaminate ลบสีพื้นหลังที่เปื้อนขอบออก premultiply เตรียมมันให้พร้อมสำหรับการผสมภาพ

การจัดโครงกระดูก ทั้งสองมิติ#

Auto-Rig สร้างริกให้ตัวละครโดยอัตโนมัติ จากนั้น:

  • ข้อจำกัดของริก 2D มีสามแบบ IK แก้ปัญหาห่วงโซ่ระหว่างกระดูกต้นและปลาย (พร้อม pole target สำหรับทิศทางข้อศอกหรือเข่า); transform คัดลอกการเคลื่อนไหว ของกระดูกหนึ่งไปยังอีกกระดูก; path ทำให้กระดูกเคลื่อนตามเส้นโค้งที่มีอย่างน้อย สองจุด
  • Skinning ผูก mesh เข้ากับริก พร้อมน้ำหนักที่ส่งออกแยกได้
  • 2D Deform Editor เปลี่ยนรูปงานศิลป์แบบแบนด้วยกรง (cage) แทนกระดูก เทคนิค cut-out สำหรับภาพวาดที่ไม่เคยถูกสร้างเป็นโครงกระดูกมาก่อน
  • 3D skeletons มีสคีมาของตัวเอง และรองรับการนำเข้า/ส่งออก BVH

เครื่องจักรสถานะแอนิเมชัน#

ไม่เหมือนของ Engine: ตัวนี้ตัดสินใจว่า คลิป ไหนจะเล่น

สถานะหนึ่งมีคลิป ค่าลูป ความเร็ว และ การผสมเป็นมิลลิวินาที Any State และ Exit State คือสองโหนดพิเศษ การเปลี่ยนสถานะมี exit time และรายการ เงื่อนไข:

Bool == true · Bool == false · Number > · < · == · >= · <= · Trigger · On Click · On Hover · Timer · Anim End

คลิกขวาเพื่อเชื่อมสองสถานะ Alt-ลากเพื่อเลื่อนกราฟ

VFX#

สามพื้นที่ และไม่สามารถใช้แทนกันได้

VFX Builder ประกอบชุดเอฟเฟกต์ทีละเลเยอร์ Stylized VFX คือสตูดิโอ 3D ที่พรีวิวมันเป็นระบบอนุภาคจริง นี่คือพรีวิวเดียวเท่านั้นของสิ่งที่ builder กำลังสร้าง ตัวเลือกพรีเซ็ต (preset browser) มีชุดสำเร็จรูปหกทิศทางศิลป์: esports, dark fantasy, anime, ethereal, painterly, minimalist

สตูดิโอ 3D รัน อนุภาคแบบ GPU หรือ CPU เรนเดอร์ลงบน ระนาบ 2D หรือปริมาตร 3D และมีหกเอฟเฟกต์สำหรับเริ่มต้น: explosion, fireball, impact, slash, lightning และ energy ring แต่ละอันมีสเกล ระยะเวลา จำนวนประกายไฟ ความเร็ว และแรงโน้มถ่วง

เอฟเฟกต์ออกจากสตูดิโอไปยังเอนจินอื่นได้: Unity VFX Graph, Unreal Niagara, Babylon.js หรือ JSON

Performance Capture Studio#

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

อินพุตสิ่งที่คุณได้รับ
Tracking JSONครบทุกอย่าง: บทบาทของร่างกาย ช่องข้อมูลใบหน้า ข้อต่อมือ
Reference videoข้อมูลอ้างอิง บวกการวิเคราะห์ root-motion ในเครื่อง
Camera recordingเหมือนกัน คือการแสดงอ้างอิง

⚠️ การวิเคราะห์วิดีโอในเครื่องคือจุดศูนย์กลางของการเคลื่อนไหว ไม่ใช่การติดตาม ร่างกาย พาเนลบอกเช่นนั้นในจุดที่คุณอาจสันนิษฐานเป็นอย่างอื่น สำหรับการแสดงจริง ให้นำเข้า tracker JSON

ขั้นตอนการทำงานมีสี่ขั้น: calibrate ท่ากลาง clean อาการกระตุกและช่องว่าง retarget ลงบนโครงกระดูก (ต้องมีอยู่ก่อน) แล้ว สร้างคลิปของ Animator ความ ครอบคลุมและความเชื่อมั่นถูกรายงานต่อการแสดงแต่ละครั้ง เส้นโค้งใบหน้าจะถูกเก็บไว้ใน เมทาดาต้าของคลิปจนกว่าจะแมป morph target อย่างชัดเจน มันไม่ถูกทิ้งไปเงียบ ๆ และก็ไม่ถูกนำไปใช้เงียบ ๆ เช่นกัน

นอกเหนือจากการใส่คีย์เฟรม#

อีกสามสตูดิโอ เข้าถึงได้จากแถบเครื่องมือและคอลัมน์เครื่องมือ ไม่ใช่จากไทม์ไลน์

การตัดตัวแบบออกจากวิดีโอ#

  • Segmentation: matte จาก AI (BiRefNet) Run Segmentation แยกตัวแบบออก จากพื้นหลังในวิดีโอหรือภาพ
  • Edge refinement ขั้นตอนที่ทำให้ matte นั้นใช้งานได้จริง: เส้นผม motion blur และขอบกึ่งโปร่งใสที่ขั้นตอนแรกมักทำผิดพลาด
  • Luma to Alpha เปลี่ยนความสว่างให้เป็นความโปร่งใส เส้นทางคลาสสิกสำหรับ เอฟเฟกต์สต็อกที่ถ่ายบนพื้นดำ และยังเป็นขั้นตอนหนึ่งในไปป์ไลน์ด้านบนด้วย

กราฟโหนด รูปทรง procedural และไลบรารี#

Node Graph Editor เชื่อมการประมวลผลเป็นกราฟ นอกไทม์ไลน์ ทำให้นำกลับมาใช้ใหม่ ข้ามช็อตได้ Procedural Shape สร้างเรขาคณิตจากพารามิเตอร์แทนที่จะวาดเอง Animation Library เก็บการเคลื่อนไหวไว้ใช้ซ้ำ และ Generated Assets รวบรวมสิ่งที่พาเนล procedural และ AI สร้างขึ้น

ขั้นสุดท้าย#

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

ไฟล์ที่อ่านและเขียนได้#

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

รูปแบบ
Sprite sheetPNG หนึ่งไฟล์ ทุกเฟรมเรียงเป็นกริด
Image sequencePNG หนึ่งไฟล์ต่อเฟรม
Pipeline PNG sequenceเหมือนกัน แต่ผ่าน pipeline และผสมภาพแล้ว เป็น RGBA
Animated GIF256 สี ใช้ได้ทั่วไป
WebPแนวคิดเดียวกัน แต่เล็กกว่า
WebMวิดีโอเว็บ พร้อมความโปร่งใส
APNGแอนิเมชันแบบไม่สูญเสียคุณภาพพร้อม alpha
Lottie JSONแอนิเมชันแบบเวกเตอร์สำหรับเว็บและมือถือ
SVG (SMIL)แอนิเมชันเวกเตอร์ที่ปรับขนาดได้
Spineข้อมูลแอนิเมชันแบบโครงกระดูก
glTFฉากและแอนิเมชัน 3D
BVHmotion capture ทั้งนำเข้าและส่งออก
AVF runtimeไบนารีสำหรับ Flutter, React, Unity และ Unreal
JSONข้อมูลแอนิเมชันดิบ หรือโปรเจกต์

ชุด VFX มีทางออกของตัวเอง: Unity VFX Graph, Unreal Niagara และ Babylon.js ริกส่งออกได้ พร้อม mesh เป็น โครงกระดูกอย่างเดียว หรือ เป็น น้ำหนัก (weights)

การส่งงานไปยังสตูดิโออื่น#

สร้าง แอนิเมชันและ ริก 2D รับ อ็อบเจ็กต์จาก Vectra, ภาพพิกเซล, ภาพ, mesh จาก Sculpt, Retopo และ Pigment รวมถึงริก 2D

ริก 2D ถูกแชร์กับ Engine ในรูปแบบเดียวกัน ตัวละครที่ริก ไว้ที่นี่จึงเป็นตัวละครที่เกมนำไปอนิเมท ไม่ใช่การนำเข้าใหม่ แอนิเมชันยังไปที่ Fusion สำหรับการตัดต่อด้วย

การทำงานร่วมกับผู้อื่น#

Animator ซิงค์แบบ ทีละการกระทำ: เลเยอร์ คีย์เฟรมที่เพิ่ม ลบ และย้าย อ็อบเจ็กต์ ไทม์ไลน์ คลิป VFX เฟรมของ canvas คลิป มาร์กเกอร์

ข้อจำกัดและปัญหาที่พบบ่อย#

  • ตั้งอัตราเฟรมและระยะเวลาก่อนใส่คีย์เฟรม การเปลี่ยนทีหลังจะขยับทุกอย่าง เทียบกับนาฬิกา
  • "No objects: generate assets or add to timeline" คือสถานะว่างเปล่า ไม่ใช่ข้อผิดพลาด สร้างอะไรบางอย่างขึ้นมา หรือส่งบางอย่างเข้ามา
  • การอีซิ่งอยู่ในแท็บ Graph แท็บ Timeline แสดง เมื่อไร แท็บ Graph แสดง อย่างไร
  • เหตุการณ์แอนิเมชันไม่ใช่คีย์เฟรม มันอยู่บนแทร็กของตัวเองและทำงานครั้งเดียว