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

How To Pixel Art Game Fighting

posted on 23 Sep 2007 18:52 by nikki009 in Pixel-Art directory Cartoon, Lifestyle

ผมเอาจากเวปเมืองนอกที่เขามีสอนบวกกับประสบการณ์ในการทำกราฟิคเกมแบบ Pixel Art เอามาอธิบายกับแนะนำครับ โดยวิธีการที่ผมใช้จะเป็นการใช้การดอทล้วนๆนะครับ

พิกเซล (Pixel) เป็นคำผสมของคำว่า Picture กับคำว่า Element หรือหน่วยพื้นฐานของภาพ เทียบได้กับ "จุดภาพ" 1 จุด แต่ละพิกเซลเปรียบได้กับสี่เหลี่ยมเล็กๆ ที่บรรจุค่าสี โดยถูกกำหนดตำแหน่งไว้บนเส้นกริดของแนวแกน x และแกน y หรือในตารางเมตริกซ์สี่เหลี่ยม ภาพบิตแมปจะประกอบด้วยพิกเซลหลายๆ พิกเซล

จำนวนพิกเซลของภาพแต่ละภาพ จะเรียกว่า ความละเอียด หรือ Resolution โดยจะเทียบจำนวนพิกเซลกับความยาวต่อนิ้ว ดังนั้นจะมีหน่วยเป็น พิกเซลต่อนิ้ว (ppi: pixels per inch) หรือจุดต่อนิ้ว (dpi; dot per inch) ภาพขนาดเท่านั้นแต่มีความละเอียดต่างกัน แสดงว่าจำนวนพิกเซลต่างกัน และขนาดของจุดพิกเซลก็ต่างกันด้วย

ซึ่งโดยหลักการของกราฟิคแบบ Pixel จะต้องอาศัยการไล่ระดับของสีเป็นชั้นๆ เพื่อให้เกิดแสงเงา และใช้ดินสอเป็นเครื่อง มือในการจุด แบบลักษณะจุดต่อจุด รวมทั้งต้องเป็นกราฟิคแบบ Aliased คือต้องเป็นหยักธรรมชาติ ไม่มีการ Anti-Aliased เด็ดขาด


เริ่มกันที่วาดรูปตัวละครขึ้นมาหนึ่งตัว ตรงนี้แนะนำว่าอย่าใส่รายละเอียดมากนะครับ เพราะตัวละครในเกมแนวFightingขนาดส่วนมากพวกตัวละครขนาดกลางจะมีความสูงโดยประมาณ 128 x 128 Pixel ถ้าใส่รายละเอียดมากไปเวลาย่อมันจะดูมั่วๆหรือรายละเอียดหายไป ทำให้ทำงานได้ยากครับ งาน Pixel Art ต้องตั้งความละเอียดอยู่ที่ Resolution ที่ 72 นะครับ

รูปที่ 1 ได้ภาพมาแล้วก็ทำการย่อ ถ้า Photo Shop แนะนำให้อยู่ในโหมด bilinear นะครับ ภาพจะไม่แตกมาจนเกินไป เข้าไปปรับได้ที่ Edit/Preference/Genaral แล้วปรับตรงช่อง Image Interpolation เป็น bilinear ย่อเส้นก็นำมาย่อให้ได้ขนาดที่ต้องการ ตรงนี้คนที่ไม่รู้ว่าขนาดไหนพอดีก็ลองหาภาพจากเกมอื่นมาอ้างอิงได้ครับ ตรงนี้อาจจะเปลี่ยนสีเส้นเป้นสีฟ้าเพื่อจะได้ง่ายในการดอทภาพทับ แต่ตัวอย่างนี้ผมใช้สีดำ

รูปที่ 2 ทำการดอทตัวเส้นเป็นสีดำขึ้นมา ตามภาพต้นแบบ

รูปที่ 3 ก็ทำการลงสีในส่วนต่างๆก่อน โดยลงแค่หนึ่งสีต่อหนึ่งระดับนะครับ

รูปที่ 4 เราก็จะทำการเพิ่มการไล่ระดับชั้นสีเข้า ตรงผมตั้งระดับของแต่ละสีไว้ไม่เกิน4ระดับ

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

รูปที่ 6 ตรงนี้ก็เป็นการเก็บรายละเอียดต่างๆ ภาพนี้ใส่สีไปทั้ง24สีครับ

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

อ้างอิง ข้อมูลบางส่วนจาก
http://www.zoggles.co.uk/ ---------------------------เวปนี้ใครอยากศึกษางานPixelArtเพิ่มเข้าไปดูได้ครับ
http://www.nectec ----------------------------------- ข้อมูลอธิบายเรื่องไฟล์ของงานกราฟิค

 

ต่อบทที่2ตามลิงค์นี้ครับ http://nikki009.exteen.com/20071211/how-to-pixel-art-game-fighting-2

edit @ 30 May 2008 18:57:44 by nikki009

edit @ 14 Dec 2009 02:24:08 by nikki009

edit @ 10 Jan 2012 17:53:54 by nikki009

edit @ 25 Jan 2012 20:06:43 by nikki009

edit @ 6 Feb 2013 23:35:28 by nikki009

Comment

Comment:

Tweet

สุดยอดเลยค่ะ น่าลองจัง

#15 By adamie. on 2011-10-09 18:25

โอ้ ! สวยจังเลย !

#14 By Bestz2541 on 2010-07-11 11:07

เจ๋งงงงbig smile

#13 By Niya~ニヤ on 2009-08-14 04:51

ต้องลอง ต้องลอง!!!
Hot!
เอาดาวไปเลยค่า

#12 By YokeK.N. on 2009-07-09 07:00

ขอบคุณมากครับที่ชี้แนะ

แต่ผมยัง งงๆ อยู่ว่า การ ดอท คืออะไรครับ

#11 By KIRYU on 2009-07-05 16:25

กำลังสนใจอยู่เลยครับดีจังมีคนปล่อยของ อยากเล่น famicom[e13

#10 By อนุชา on 2008-12-25 22:57

confused smile

#9 By top (222.123.188.13) on 2008-07-27 18:41

-0- ว้าวๆ
แจ่ม ต้องลองทำดูหน่อย
(แต่ฝีมือแย่นี่สิ)

#8 By © dearyuna™ on 2008-03-03 11:28

ขออนุญาตินำภาพไปโพสต์ที่อื่น สำหรับผู้ที่สนใจนะครับ
มีประโยชน์มากครับ ขอบคุณครับ

#7 By stairhead (124.120.168.132) on 2008-02-29 01:12

ขอบคุณมากค่ะ ขอแอดนะคะ
ได้ประโยชน์จิงๆ
ขอบคุณคับbig smile

#5 By Tabun man on 2007-12-25 17:10

ขอบคุณครับ :)

#4 By หมูปิ้ง on 2007-11-17 11:03

very good!~ ^[]^!~

ยอดเยี่ยมค่ะ โฮะๆๆๆๆ

#3 By otaro* on 2007-09-28 11:04

เจ๋งครับ

#2 By Vommx (203.154.9.29) on 2007-09-26 09:42

โอ้...อาจารย์โก้ปล่อยของ....
เยี่ยมไปเลยครับ.. - -b

#1 By นิเกะ on 2007-09-24 11:04