2009/Jul/04

ก่อนอื่นใครที่เพิ่งเข้ามาอ่าน How To Pixel Art Game Fighter หรือลืมตอนเก่าๆ แนะนำให้ย้อนกลับไปอ่านทบทวนก่อน

ตอนที่1 http://nikki009.exteen.com/20070923/how-to-pixel-art-game-fighting

ตอนที่2 http://nikki009.exteen.com/20071211/how-to-pixel-art-game-fighting-2

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

ตรงนี้ถ้าถามว่าต้องยืนแบบไหนยังไงให้ย้อนไปดูตัวละครที่ออกแบบว่าเป็นแนวไหน บุคลิกยังไง ใช้วิชาหรือรูปแบบการต่อสู้แบบไหน ถ้ายังคิดไม่ออกอีกแนะนำให้ไปหาตัวอย่างเกมแนวไฟติ้งดูซะ จะทำให้นึกออกง่ายขึ้นและดูเป็นแนวทางได้ แนะนำเวป http://www.fightersgeneration.com/ เวปนี้มีภาพ Gif ตัวละครจากเกมต่างๆให้ผู้สนใจเข้าดูได้

 ตัวละครที่ผมเอามาเป็นตัวอย่างควรนี้เป็นตัวละครออริจินัลที่ทำขึ้นเพื่อร่วมกิจกรรมที่บอร์ด http://www.dojin-city.com/ ในส่วนกิจกรรม DC Fighting ( รายละเอียดตามลิงค์ http://www.dojin-city.com/news/newsPreview.php?newsNo=117 ) 

ซึ่งรายละเอียดคร่าวๆ ขอตัวละครัวนี้มีอยู่ว่า  " Elanor ปิศาจสาวนักทำสัญญามือหนึ่งของโลกปิศาจ บังเอิญผ่านมายังเมืองโดจินซิตี้ และได้ทราบถึงการประลองที่จะจัดขึ้น ซึ่งเกิดไอเดียว่าน่าจะลองหาลูกค้ามาทำสัญญาปิศาจในการประลองครั้งนี้ เพราะเธอรู้สึกถึงพลังความอยากและความทุกข์ที่ซ่อนปะปนในกลุ่มผู้แข่งขัน จึงได้เข้ารวมลงแข่งขันในการประลองครั้งนี้ด้วย ถ้าเป็นไปได้สวยยอดพุ่งตามเป้าก็จะได้ของท่านประธานลาพักร้อนสักที " ( รายละเอียดตามลิงค์  http://www.dojin-city.com/gallery&book/galleryboard_ans.php?&Category=iiirus&No=1732 )

เริ่มขั้นตอน

รูปที่1 ผมออกแบบแล้วร่างท่ายืนบนกระดาษแล้วสแกนแล้วเริ่มทำตามขั้นตอนต่างๆในบทที่หนึ่ง (ใครลืมไปดุก่อน http://nikki009.exteen.com/20070923/how-to-pixel-art-game-fighting )

 

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

 

 รูปที่3 ผมเริ่มคิดอนิเมทแบบง่ายก่อน โดยการทำให้ผมตัวละครปลิ้วไปมา ก็ทำการแยกเอาผมออกมาทำเฟรมที่แตกต่างกัน 8 เฟรม แล้วอนิเมทดู

 

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

มาดูกันอีกแบบดีกว่า

 

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

 

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

รูปที่7 ผมนำเอาทั้งสองแบบรวมกันดูจะเอามาเป็นแบบนี้

ดูโอเคขึ้น ขั้นตอนต่างๆก็ประมาณนี้แหละครับ ถ้าอัพ How To อีกคราวหน้าคงเป็นเรื่องการขยับต่อล่ะครับ

เจอกันคราวหน้า

 

อ้างอิง ข้อมูลบางส่วนจาก
http://www.zoggles.co.uk/ ---------------------------เวปนี้ใครอยากศึกษางานPixelArtเพิ่มเข้าไปดูได้ครับ
http://www.fightersgeneration.com/ ---------------------------เวปนี้ใครอยากศึกษาภาพเคลื่อนไหวตัวละครต่างๆเป็นไฟล์Gifให้ดูกัน

----------------------------------------------------------------------------------------------------------------------------

แถมท้าย

วันนี้ไปได้Doll เป็น Body ผู้หญิงของสักยี่ห้อมา กะเอามาไว้จัดท่าเป็นแบบ แต่ไม่มีหัว สงสัยต้องปั้นหัวเองซะละมั้ง ของเก่ายังไม่เสร็จยังไปหาของใหม่มาเพิ่ม จริงๆเลยน่าตูเนี่ย - -.

นั่งรอหัวไปสักพักน้อ

edit @ 4 Jul 2009 21:32:24 by nikki009

edit @ 4 Jul 2009 22:27:31 by nikki009

edit @ 4 Jul 2009 22:31:32 by nikki009

edit @ 4 Jul 2009 22:54:43 by nikki009

edit @ 5 Jul 2009 03:10:34 by nikki009

ชื่อ: 
เว็บไซต์: 
Captcha: 
คอมเมนต์:




smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry
big smile Hot! Hot!
#1  by  b-padung Studio At 2009-07-04 21:45, 
ได้ความรู้ดีมากครับ ผมเคยลองจุดดูแล้วหลายหนมากเลย แต่ไม่เคยสำเร็จเลย สงสัยไม่มี sense ด้านนี้จริงๆ

Body Doll น่าได้ครับ >_< ปั้นเสร็จอย่าลืมนำมาโชว์ให้ดูนะครับ ^_^
#2  by  Elta_kung At 2009-07-04 21:50, 
ลืมดาวๆ Hot! Hot! Hot!
#3  by  Elta_kung At 2009-07-04 21:50, 
Hot! Hot! Hot!
#4  by  นิเกะ At 2009-07-04 22:29, 
สงสัยมานานละ ว่ามันต้องทำยังไง

มีประโยชน์ จริง ๆ


Hot! Hot! Hot!
#5  by  ZNOUJ At 2009-07-04 23:11, 
ว่าแต่ตอนนี้ DC Fighter นี่เค้าไปถึงไหนกันแล้วหว่า...

ไม่ได้ทำต่อเลยอ่า...
#6  by  Joker At 2009-07-04 23:19, 
Hot! Hot! Hot! Hot! Hot! big smile
#7  by  cartoonst At 2009-07-05 00:29, 
big smile big smile big smile big smile big smile big smileHot!
big smile big smile big smile big smile Hot! big smile big smile
Hot! big smile Hot! big smile big smile big smile big smile
big smile Hot! ]big smile big smile big smile big smile big smile
big smile big smile big smile big smile big smile big smile big smile
#8  by  garun At 2009-07-05 01:54, 
มันต้องใช้ความพยายามสูงมาก! Hot!
#9  by   มาสเตอร์แชมป์ At 2009-07-05 02:06, 
ลองเชคพิกเซลตรงคอผมว่ามันกระโดดไป 1 เม็ดรึปล่าว ตอนเฟรมกระโดดขึ้นสุดน่ะครับ เวลาเม็ดสีขาวมันชนกันจะรู้สึกสีกะโดด
#10  by  เจ๋ง At 2009-07-05 02:37, 
ปรับแก้เพิ่มไปแล้วครับ ขอบคุณ คุณเจ๋ง ที่ทักมานะครับ big smile
#11  by  nikki009 At 2009-07-05 03:13, 
สุดยอดเลย ขอรับความรู้ไปล่ะนะครับผม surprised smile
#12  by  Buffo At 2009-07-05 03:22, 
confused smile confused smile Hot! Hot!
#13  by  เม็ดบ๊วย At 2009-07-05 09:39, 
Hot! Hot! Hot! กำลังมองหาอยู่พอดีเลยค่ะ
#14  by  นุ้งบุ้งอารมณ์ดี ❤ At 2009-07-05 09:41, 
โอ้ว ขอบคุณมากครับ ผมกำลังอยากรู้อยู่พอดีว่าภาพเคลื่อนไหวการ์ตูนแบบน GIF เขามีวิธีทำยังไง

confused smile Hot! Hot! Hot!
#15  by  KIRYU At 2009-07-05 16:22, 
Hot! Hot! Hot! Hot! Hot! double wink
#16  by  STECHA ลา ล่า~ At 2009-07-05 18:27, 
เจ๋งเลยครับ
ขอทบทวนความรู้ด้วยคน
#17  by  MyRainyWorld At 2009-07-05 19:54, 
หน้าอกไม่เด้งอะคะ (//โดนตบ!!!)
Hot! Hot! Hot!
#18  by  I am MILD At 2009-07-05 22:05, 
รู้อะไรเยอะเลย
#19  by  ที่พักหัวหิน (124.120.18.86) At 2009-07-06 00:28, 
โอ้ว อะฮั้นได้บอดี้ผู้ชายมาแบบไม่มีหัวเช่นกัน เนื้อคู่ๆ อิอิbig smile
#20  by  (^_^)/nana At 2009-07-06 15:28, 

สุดยอด ได้ความรู้มากมายมหาศาล

ฝากเว็บด้วยนะ

ลงประกาศ ซื้อขาย ฟรี
http://www.siamshopmarket.com/
#21  by  kokkok At 2009-07-11 11:55, 

<< Home

Creative Commons License
ผลงานนี้ โดย nikkigo009 ใช้สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-ไม่ดัดแปลง 3.0 ประเทศไทย.