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

| แถบเมนู | 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 | canvas, อัตราเฟรม, ระยะเวลา, พื้นหลัง, ฉาก 3D, การจัดแสง, หมอก, กล้อง |
| Props | คุณสมบัติของอ็อบเจ็กต์ที่เลือก |
| Params | พารามิเตอร์ที่เปิดเผยโดยอ็อบเจ็กต์แบบ procedural |
| Keys | การตั้งค่าคีย์เฟรม |
| Brush | การตั้งค่าเครื่องมือวาด |
| FX | modifiers ที่ใช้กับส่วนที่เลือก |
| Post FX | ชุดขั้นตอนหลังการประมวลผล |
| VFX | ชุดเอฟเฟกต์ |
| Assets | สิ่งที่ฉากกำลังดึงเข้ามาใช้ |
| Segment | การแบ่งส่วนด้วย AI: ดูด้านล่าง |
| Edge | การปรับแต่งขอบสำหรับการแบ่งส่วนนั้น |
| Skinning | การผูก mesh เข้ากับริก |
| Pipeline | ตำแหน่งของช็อตนี้ในสายการผลิต |
| Inputs | การผูกอินพุต |
แถบเครื่องมือ#
ยี่สิบเอ็ดเครื่องมือ ใน 4 กลุ่ม

| กลุ่ม | เครื่องมือ |
|---|---|
| Transform | select · move · rotate · scale |
| Rigging | bone |
| Drawing | paint · eraser · fill · pen · bezier · spline · text |
| Shapes | rectangle · ellipse · polygon · star · line |
| Stage | keyframe · 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 effects | chromatic aberration · vignette · scanlines พร้อมความหนาแน่น · film grain · glitch |
| Bloom | ความเข้ม เกณฑ์ รัศมี |
| Grading | curves, exposure, contrast, saturation, temperature, tint, hue, lift/gamma/gain |
| Stylize | sharpen · 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 sheet | PNG หนึ่งไฟล์ ทุกเฟรมเรียงเป็นกริด |
| Image sequence | PNG หนึ่งไฟล์ต่อเฟรม |
| Pipeline PNG sequence | เหมือนกัน แต่ผ่าน pipeline และผสมภาพแล้ว เป็น RGBA |
| Animated GIF | 256 สี ใช้ได้ทั่วไป |
| WebP | แนวคิดเดียวกัน แต่เล็กกว่า |
| WebM | วิดีโอเว็บ พร้อมความโปร่งใส |
| APNG | แอนิเมชันแบบไม่สูญเสียคุณภาพพร้อม alpha |
| Lottie JSON | แอนิเมชันแบบเวกเตอร์สำหรับเว็บและมือถือ |
| SVG (SMIL) | แอนิเมชันเวกเตอร์ที่ปรับขนาดได้ |
| Spine | ข้อมูลแอนิเมชันแบบโครงกระดูก |
| glTF | ฉากและแอนิเมชัน 3D |
| BVH | motion 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 แสดง อย่างไร
- เหตุการณ์แอนิเมชันไม่ใช่คีย์เฟรม มันอยู่บนแทร็กของตัวเองและทำงานครั้งเดียว