- How to "เดิน" [2D-Animation]: ตอน 1 -

posted on 19 Sep 2009 13:48 by eltakung in ART

=================================================

กระทู้ How to เถื่อนๆ โปรดระวัง การโหลดรูปด้วย เนื่องจากมีหลายรูป และขนาดใหญ่(มั้ง)

และสมควรที่จะไปอ่านข้อมูล องค์ความรู้การใช้ image ready ที่บล็อกของคุณ dadeemodify ก่อน

http://dadeemodify.exteen.com/20070619/how-to-gif-animation-imageready

=================================================

 

 

วันนี้ดูเหมือนว่า Elta_kung จะมาแนะนำเกี่ยวกับสิ่งที่เขารู้ในการวาด animation ลองมาฟังกันดูก็ไม่น่าจะเสียหายนะคะ

เพื่อไม่ให้เป็นการเสียเวลาเรามาเริ่มคำถามกันเลยดีกว่า...

Animation คืออะไร ?

Wiki ตอบ> Animation คือ การแสดงอย่างรวดเร็วลำดับของภาพ ไม่ว่าจะเป็น 2D หรือ 3D ในนัยที่ทำให้เกิดการเคลื่อนไหวของรูปภาพ ที่มา wikipidia

จะสร้าง ภาพเคลื่อนไหวได้ยังไง

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

แต่ละภาพในกระบวนการเรียกว่าอะไร

Elta_kung> เรียกอะไรก็ได้ ภาพ รูป แต่เห็นชาวบ้านชาวช่องเขาเรียกกันว่าเฟรม(frame) 

การ์ตูนที่ดูๆกัน มีกี่เฟรม

Elta_kung> ไม่รู้ ผมไม่ได้เป็นทำการ์ตูนนี่ 555+ จากการจำได้เมื่อนานมาแล้ว เขาว่ากันว่าการ์ตูนญี่ปุ่นปัจจุบันใช้เฟรมเรท (frame/sec หรือ FPS) ประมาณเกือบ 30 FPS แต่นั่นก็ไม่ใช่ใช้ระดับเฟรมในระดับนั้นตลอดอย่างที่บางคนเข้าใจ สำหรับการ์ตูนปรกติ บางครั้งเฟรมเรท ก็จะมีค่าน้อยกว่านั้น  ถ้าหากการ์ตูนใดสามารถรักษาเฟรมเรทได้ ก็จะให้คุณภาพที่ดีกว่าการ์ตูนที่เฟรมเรทขึ้นๆลงๆ (เหมือนเล่นเกมส์สามมิติการ์ดจอไม่ค่อยดี เลยต้องปรับเฟรมเรทลงนั่นแหละ พอเฟรมเรทต่ำกว่าประมาณ 25 FPS ก็รู้สึกว่ากระตุกโดยชัดเจน)

สิ่งสำคัญของการทำ ภาพเคลื่อนไหวคืออะไร

Elta_kung> คิดว่าการทำ key frame

Key frame คืออะไร

Elta_kung> ไม่รู้ จำเขามา ขอหากุ๊กเกิ้ลก่อน 55+

ห่วยจริงๆ

Elta_kung> ="= ก็ตอนตูอ่านหนังสือมันไม่ได้เรียก Key frame นี่นา เขาเรียก critical point

แล้วตกลงมันคืออะไร

Elta_kung>  ในอนิเมชั่นมันจะมี movement ของ motion ที่จะทำ โดยหลักการแล้วการออกแบบการเคลื่อนไหวที่ดี กูรูส่วนมาก(ในหนังสือและinternet) จะให้ความสำคัญกับสิ่งที่เรียกว่า Key frame หรือที่ผมรู้จักในชื่อ critical point ซึ่งมันก็คือเฟรมที่สำคัญที่สุดในการเคลื่อนไหว กล่าวคือเป็นจุดเนื้อหาจริงๆของการเคลื่อนไหว คิดว่านักอนิเมเตอร์ที่ดี จะต้องตีโจทย์การเคลื่อนไหวของ motion ที่จะทำให้แตก ว่า motion ของตัวเองมี key frame คืออะไร โดยส่วนมากจะตีกันว่า จุดสิ้นสุดของ action เป็น key frame แต่ผมว่าไม่จำเป็นต้องเป็นแบบนั้นก็ได้ ผมคิดว่าการ switch motion มากกว่าที่เป็นตัว key frame ดังนั้นผมก็เลยเชื่อหนังสือเล่มหนึ่ง ที่เรียก key frame ว่า critical point มากกว่า (จำไม่ได้เหมือนกันว่าหนังสืออะไร)

เขียนอะไร ไม่รู้เรื่อง

Elta_kung> ="=

บทความนี้ไม่มีอ้างอิง และคุณ(เอ็ง)ก็ไม่ใช่มืออาชีพ จะเชื่อถือได้เหรอ

Elta_kung> กรำ (แต่ก็จริง....) เชื่อที่สิ่งที่เห็น เห็นในสิ่งที่เชื่อสิ 555+

Elta_kung> ผมคิดว่าผมลองผิดลองถูกเอานะ พอจะมีเนื้อหาที่เอาไปใช้ได้ละมั้ง

แล้วเริ่มยังไง

Elta_kung> ก็ต้องคิดก่อนว่าจะทำ motion อะไร ในที่นี้ผมลองทำเรื่องการ "เดิน"

แล้วเฟรมที่จะเอามาใช้คำนวนยังไง ถึงจะเหมาะ

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

อ้าว..... =_="

Elta_kung> (เหงื่อเริ่มแตก...) โดยหลักการแล้ว(อีกแล้ว) ถ้าเรากำหนด critical point ได้ เราจะกำหนดเวลาได้คร่าวๆนะครับ แล้วค่อยสอดเฟรมที่จะทำให้ผลลัพท์ไปถึง critical point เข้าไป แล้ว เราก็คำนวนเวลา ระยะระหว่าง citical point หาจำนวนเฟรมที่จะใช้(วาด) แล้วกำหนดโมชั่นของเฟรมระหว่างทางทั้งหลาย และนำ delay time ใส่ลงไป ในช่อง period การแสดงแต่ละเฟรม

Anime, Animation, 2D, frame, gif, how to
ตัวอย่างจากภาพนี้มองได้ว่า Layer 1 และ 5 เป็น critical point
เนื่องจากเป็นจุดเปลี่ยน motion ส่วน layer 2-4 นั้น เป็นลำดับภาพที่เพิ่มขึ้นมาเพื่อให้รู้สึกถึงการเคลื่อนไหว
(จากภาพแสดงลำดับของการเดิน1ก้าว(ที่ไม่ค่อยดีนัก))

ยังไม่เข้าใจอยู่ดี

Elta_kung> อืม... ก็น่าจะเป็นแบบนั้น ก่อนอื่นต้องตีโจทย์การเคลื่อนไหวให้ออกก่อน critical point ของการเดินผมคิดว่ามีสองจุด แต่ว่า motion การเดิน ขาก้าวเท้าไปและก้าวเท้ากลับจะไม่เหมือนกัน ดังนั้นแนวทางการเดินจนจบ loop ก็จะมีสอง route ถ้าเอาขาขวาเป็นหลัก ถ้าขาขวาเก้าก่อน ขาจะลอย แต่ตอนดึงตัวไปข้างหน้า ขาจะอยู่ติดพื้น ตรงส่วนนี้แหละที่ไม่เหมือนกัน เราไม่สามารถ reuse frame ได้ในจังหวะการเดิน ทั้งหมด แต่อาจลอกมาบางส่วนได้ ตรงส่วนนี้คิดว่าผมจะอธิบายในตอนสองน่ะ

ใช้โปรแกรมอะไรทำ และทำยังไง

Elta_kung> ใช้ Adobe Image Ready ทำ GIF กับ Painter X วาดเฟรม(รูป) ในแต่ละ layer ก่อนนำมาเรียงเป็น GIF file ใน Adobe Image Ready

แรกสุดทำอะไรก่อน

Elta_kung> เปิด Painter หรือโปรแกรมอื่นๆมา ถ้าโปรแกรมนี้จะมี canvas ให้มีสีขาวเต็มอยู่แล้วให้สร้าง new layer ได้เลย แต่ถ้าบางคนใช้ Photoshop ก็ต้องเทสีขาวให้เต็ม layer แรก จากนั้นก็ create new layer  ใช้กี่เฟรมก็ create เท่านั้น layer

 

 

(บน)ตัวอย่างหน้าจอการจัดการจัดการ layer ของ painter

 

 

(บน) ตัวอย่างหน้าจอการจัดการ layer ของ photoshop

จากนั้น

Elta_kung> ผมไม่ได้ทำตามแบบที่ควรจะทำ เพราะจริงๆควรกำหนด key frame หรือ critical point ก่อน แต่ที่ผมทำคือวาดการเคลื่อนไหวคร่าวๆแทน จุดสุดท้ายเท่าที่เห็นจริงๆคือ key frame หรือ critical point อย่างไรก็ตามหลังจากผมลองผิดลองถูกแล้ว หากใครจะทำตามควรกำหนด Critical point หรือ Key Frame ก่อนจะดีที่สุดนะ

Anime, Animation, 2D, frame, gif, how to

ที่เห็นในภาพทั้งหมด เฟรมมีทั้งหมดดังต่อไปนี้

Anime, Animation, 2D, frame, gif, how to

5 เฟรม Delay 0.1 

Anime, Animation, 2D, frame, gif, how to

 

Elta_kung> เท่ากับเรากำหนด Key frame ได้คร่าวๆได้ละมั้ง จากนั้นก็ทำการใส่เฟรมจริงลงไป โดยใช้สิ่งที่เรียกว่า opacity ใน tool ของ layer ทำการลดความเข้มของ ภาพร่างที่เรากำหนดไว้
แล้ววาดภาพจริงลงไป

 

Anime, Animation, 2D, frame, gif, how to

 

Elta_kung> จากนั้นก็ทำการวาด เฟรมทั้งหมดลงไปถึงจังหวะนี้จากเฟรม 5 เฟรมที่ผมใช้ผมขยายจริงๆเป็น 8 เฟรมแล้ว แต่โดยสรุปยังเป็น 5 เฟรมเหมือนเดิม ตอน create loop

เฟรมทั้งหมดมีดังนี้

  Anime, Animation, 2D, frame, gif, how to

 

Anime, Animation, 2D, frame, gif, how to

ถ้าเห็นไม่ชัดคลิกที่รูปขยายนะครับ 

 

Anime, Animation, 2D, frame, gif, how to

 

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

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

ตอนนี้ขอไปอ่านหนังสือสอบภาษาอังกฤษก่อนล่ะครับ ^_^

ถ้าชอบอย่าลืม comment เยอะๆ และอย่าลืมติดตามตอนหน้านะคะ

Elta_kung> ใช่แล้ว อย่างไรก็ตาม

Elta_kung, Wann> (พร้อมกัน) สวัสดี และขอบคุณที่อ่านจนจบครับ(ค่ะ) ^_^

 

 

PS. หากเพื่อนๆพี่ๆน้องๆ สร้างภาพเคลื่อนไหวสนุกๆอย่าลืมบอกต่อนะครับ  อยากชมงานของทุกท่านมาก ^_^ และหวังว่าความรู้แบบเป็ดๆของผมจะมีประโยชน์สำหรับคนที่สนใจนะครับ

 

=========================================================

ตอนต่อ ^_^

- How to "เดิน" [2D-Animation]: ตอน 2 -

=========================================================

Comment

Comment:

Tweet

ขอบคุณสำหรับตัวแบบนะครับช่วยผมได้มากเลย  _/\_  confused smile

#21 By เด็กน้อย (118.172.167.21|118.172.167.21) on 2015-08-18 21:18

ัีเดะำไึรเดินาดเี่้ัะคตถภะ้่ีรเดะ่เดานยกะีคตัจ้ดทสำ้่ึีะท้ัหาสอดกะี้ดทพืนหกดัี<IMG src="http://g.exteen.com/i/e/e7.gif" _mce_src="http://g.exteen.com/i/e/e7.gif"> <IMG src="http://g.exteen.com/i/e/e8.gif" _mce_src="http://g.exteen.com/i/e/e8.gif"> <IMG src="http://g.exteen.com/i/e/e8.gif" _mce_src="http://g.exteen.com/i/e/e8.gif"> <IMG src="http://g.exteen.com/i/e/e8.gif" _mce_src="http://g.exteen.com/i/e/e8.gif">

#20 By แนนนี่ (180.180.41.203|180.180.41.203) on 2015-07-23 14:02

ัีเดะำไึรเดินาดเี่้ัะคตถภะ้่ีรเดะ่เดานยกะีคตัจ้ดทสำ้่ึีะท้ัหาสอดกะี้ดทพืนหกดัีquestion embarrassed embarrassed embarrassed

#19 By แนนนี่ (180.180.41.203|180.180.41.203) on 2015-07-23 14:02

สวยๆๆๆๆๆๆๆๆ

#18 By แนนนี่ (180.180.41.203|180.180.41.203) on 2015-07-23 13:59

ขอบคุณค่ะ !

#17 By G.Ren on 2014-12-30 02:43

Likebig smile

#16 By Gensou (1.2.192.76|1.2.192.76) on 2014-08-28 02:21

ขอบคุณมากนะเจ้าคะ ><
เราเม้นแค่คำค่ะ "ขอบคุณค่ะ" ไหงกลายเป็นมีคอมเม้นของใครไม่รู้มาเพิ่มเติมจากข้างบน sad smile
ขอบคุณมากค่ะ big smile
animation คือการสัมพันกันของ timing และ spacing.
และ อนิเมชั่นนั้น เกิดจากการซ้อนกันของภาพติดตาที่เปลี่ยนไปbig smile

ทำออกมาได้ดี แต่เวลาคนเราเดินจะไม่แข็งขนาดนั้นsad smile
แนะนำอีกนิดเวลาเดินลองสังเกตุการยกขาดูนะ

#12 By mika-chai (58.8.35.29) on 2010-04-06 09:28

โอ้เจ๋งๆน่าลองเล่นมั่ง~

#11 By TopGorezilla on 2009-09-23 21:59

Hot! Hot! แจ่มแจ้ง

#10 By (^_^)/nana on 2009-09-22 12:49

อธิบายละเอียดเชียว
เยี่ยมมาากๆ
มารอดูต่อตอนขยับขา

#8 By XEGXEF on 2009-09-21 11:28

พอลงรายละเอียดแล้วแบบว่า..สุโค่ยเลย ^^

#7 By meawnoy on 2009-09-21 09:57

งวดนี้ยาวจริงๆ^^

อ่านไม่ครบนะแต่ดูแล้วท่าทางมีประโยชน์Hot! Hot!

ท่าทางใช้ความพยายามสูงผมคงหาเวลาทำยากอะTT-TT
ภาพสมบูรณ์งามมาก.. confused smile confused smile Hot! Hot!

#5 By Noar Wolkins on 2009-09-20 22:04

ภาษาคนศิลป ผมอ่านแล้ว งง ๆsad smile

#4 By salemanbps on 2009-09-20 21:19

confused smile Hot!

#3 By mini-teddy on 2009-09-20 15:36

โอ้ ขอบคุณสำหรับความรู้ใหม่ๆค่ะ XD

ทีแรกนึกว่าเค้าใช้โฟโต้ช็อปทำกัน ปรากฏว่าไม่ใช่แฮะ =w= จะขอลองเอาไปใช้ดูล่ะค่ะ

Hot! Hot! Hot!
ขอบคุณที่แนะนำนะคะconfused smile

#1 By mazu* on 2009-09-20 15:13

Elta_kung View my profile