2007/Sep/23

ผมเอาจากเวปเมืองนอกที่เขามีสอนบวกกับประสบการณ์ในการทำกราฟิคเกมแบบ 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 ----------------------------------- ข้อมูลอธิบายเรื่องไฟล์ของงานกราฟิค

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

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




smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry
โอ้...อาจารย์โก้ปล่อยของ....
เยี่ยมไปเลยครับ.. - -b
#1  by  นิเกะ At 2007-09-24 11:04, 
เจ๋งครับ
#2  by  Vommx (203.154.9.29) At 2007-09-26 09:42, 
very good!~ ^[]^!~

ยอดเยี่ยมค่ะ โฮะๆๆๆๆ
#3  by  otaro* At 2007-09-28 11:04, 
ขอบคุณครับ :)
#4  by  beginner At 2007-11-17 11:03, 
ได้ประโยชน์จิงๆ
ขอบคุณคับbig smile
#5  by  CH.Lee At 2007-12-25 17:10, 
ขอบคุณมากค่ะ ขอแอดนะคะ
#6  by  ปลาทองคะนองศึก At 2008-02-28 15:22, 
ขออนุญาตินำภาพไปโพสต์ที่อื่น สำหรับผู้ที่สนใจนะครับ
มีประโยชน์มากครับ ขอบคุณครับ
#7  by  stairhead (124.120.168.132) At 2008-02-29 01:12, 
-0- ว้าวๆ
แจ่ม ต้องลองทำดูหน่อย
(แต่ฝีมือแย่นี่สิ)
#8  by  •.★*...Dear...*★.• At 2008-03-03 11:28, 

<< Home