สุดยอดนวัตกรรมใหม่ในเกมเมื่ออดีต

ที่ผมนำมาเสนอนี้บอกก่อนเลยว่าอาจจะผิดพลาดได้นะครับ เพราะผมนำเสนอเพียงแค่เกมแรกที่ผมเล่นเท่านั้น  (แต่ก็ค่อนข้างมั่นใจว่ามันเป็นครั้งแรก) อาจจะมีบางเกมที่เป็นต้นแบบมาก่อนนะครับ หากตรงไหนพลาดก็สามารถท้วงได้ตามสบายเลยครับ

Command & Conquer - C&C (1995)
คนรุ่นใหม่ อาจจะงงนะครับ ว่าเกม C&C เนี้ย มันดีมันสนุกตรงไหน แค่ภาพสวยเฉยๆ ไม่เห็นจะมีอะไร ทำไมมันถึงดั้งดัง? สำหรับเกมนี้ในสมัยนั้นผมถือว่าเป็นจุดเปลี่ยนภาพลักษณ์ของเกม Strategy ครั้งใหญ่ทีเดียวครับ เนื่องจาก C&C ในภาคแรกนั้นได้บันดาลให้...รถ.. เลี้ยวได้ครับ!! (55+) แน่นอนครับสำหรับเกมในสมัยนั้น เกมประเภท Strategy เกือบทุกเกมนั้น ขึ้นอยู่กับตารางเป็นหลักครับ เวลารถหรือคนต่างๆในเกมเคลื่อนไหว ก็จะเดินไปตามช่อง เวลารถจะเลี้ยวที มันจะหยุดครับ แล้วก็ค่อยๆหมุนทีละ 45องศา เมื่อถึงมุมที่มันจะไปก็ค่อยเคลื่อนที่ไปข้างหน้าต่อครับ แน่นอนว่าในเกม C&C นี้เป็นครั้งแรกที่พยายามสร้างมุมโค้งในการเลี้ยวให้แก่รถ ซึ่งทำลายกฎเกณฑ์ตารางแบบเก่าๆที่เคยมีทั้งหมดครับ (ถึงแม้จะยังคงมีตารางอยู่ดีก็ตาม)


 

Quake (1996)
ต้นตำหรับความเป็นเจ้าพ่อแห่งวงการเกมก่อนจะมาเป็น Unreal หรือ UnrealEngine อันสุดยอดที่พวกเรารู้จักกันดีครับ สำหรับเกม Quake ถือเป็นเกม FPS เกมแรกที่สร้างด้วยรูปแบบ 3 มิติเต็มรูปแบบ ซึ่งเกมสมัยนั้นมักจะทำเกมออกมาในลักษณะ 2มิติ ผสมกับ 3มิติครับ (ตัวละครศัตรูจะแบน 2มิติ แต่เดินในฉากที่เป็น 3มิติ) เช่น Doom หรือ DukeNukem3D และไม่มีเกมใดเลยที่เป็น 3มิติ ล้วนๆเช่นนี้ครับ

 

 

Descent : Freespace (1998)
ครั้งแรกกับ Motion blur (ภาพติดตา) แน่นอนว่าสมัยนั้นการ์ด 3มิติ ยังไม่ได้เทพมากมายเท่าสมัยนี้ ไม่สามารถประมวลผล Motion blur ได้ครับ เพียงแต่เกมนี้ถือเป็นเกมแรกที่จำลองลักษณะของ motion blur เข้ามาในเกมครับ เวลาที่เราหมุนยาน หรือเคลื่อนที่ด้วยความเร็ว จะทำให้ดวงดาวที่รอบตัวมีแสงติดตาเห็นเป็นเส้นๆ ซึ่งสมัยนั้นถือว่าแปลกใหม่และเป็นเกมที่สวยงามสมจริงมากทีเดียวครับ

 

 

Nocturne (1999)
ครั้งแรกกับ Dynamic shadow หรือการพาดของเงาลงบนวัตถุต่างๆในเกมอย่างสมจริงครับ แน่นอนว่าสมัยนั้นเกมโดยทั่วไปนั้นจะสร้างเงาเป็นเพียงแค่วงกลมทึบๆ หรือหรูหน่อยก็เพียงแค่จำลองท่าทางของโมเดลมาบนเงาเท่านั้นครับ ซึ่งแน่นอนว่าเมื่อเงาในเกมเหล่านั้นกระทบกับฝาผนังจะไม่เกิดมุมหักใดๆเลย แต่สำหรับ Nocturne นี้ ไม่ใช่ครับ เมื่อเงากระทบกับฝาผนังก็จะหักทำมุม หรือมีขนาดใหญ่-เล็กตามระยะความห่างของแสง เข้ากับตัวเกมที่เป็นประเภท Horror อย่างเต็มรูปแบบ ซึ่งถือเป็นอะไรที่สุดยอดยอดมากๆในสมัยนั้นครับ

 

 

Soilder of Fortune (2000)
ครั้งแรกกับการแบ่งส่วนต่างๆของโมเดล เมื่อเหล่าร้ายถูกยิงตามจุดต่างๆของร่างกาย ชิ้นส่วนเหล่านั้นก็จะบาดเจ็บ โดยแบ่งเป็น หัว ลำตัว ไหล่ แขน มือ เป้า(- -*) ขา และเท้า ซึ่งถือเป็นจุดเริ่มต้นความคิดที่ทำให้เกม(ฮาดคอร์)ต่างๆ ในปัจจุบันเริ่มหันมาใช้การแบ่งส่วนเช่นเดียวกันครับ

 

 

ขอขอบคุณเวบไซต์ Wikipedia สำหรับรูปภาพและข้อมูลปีผลิต และ YouTube สำหรับคลิปวีดีโอ ไว้ที่นี้ด้วยครับ

[UDK] วิธีการทำ Material

posted on 20 Feb 2010 21:55 by ninete  in UDK-Tutorial

หลังจากคราวที่แล้วเราได้ทำ Normal mapping กันมาแล้วนะครับ

ทีนี้เราจะนำ Texture และ Normal map มารวมกันเป็น Material ใน UDK ครับ


ให้เราเข้าไปในโปรแกรม UDK กันก่อนครับ จากนั้นไปที่ Open the Content Browser

ให้กดที่ปุ่ม Import ด้านล่างซ้ายครับ



จากนั้นไปเลือกไฟล์ Texture ของเราครับ

จากนั้นจะมีหน้าต่างการ Import ขึ้นมา



ให้ใส่ Package ตามต้องการครับ

Group ผมใส่เป็น Material ครับ (ชื่ออื่นก็ได้ แล้วแต่สะดวก)

และ Name ผมตั้งเป็น ชื่อ_texture ครับ

ส่วนค่า Compression Settings ให้เปลี่ยนเป็น TC_Normalmap ครับ

(ในรูปผมยังไม่ได้ตั้ง Compression Setting นะครับ ขอบคุณคุณ  ^^ ที่ช่วยแนะนำจุดนี้เข้ามาด้วยครับ)

และค่าอื่นๆด้านล่างไม่ต้องสนใจก็ได้ครับ สามารถกด OK ได้เลย


จากนั้นทำ Import ซ้ำอีกครั้ง กับไฟล์ Normal Map ครับ

เมื่อเสร็จแล้วเราจะได้ Texture2D เพิ่มขึ้นมา 2 ช่องตามที่ทำไว้

คือ brick_normal และ brick_texture ครับ



จากนั้นคลิกเม้าส์ขวา ที่พื้นว่างๆ ในหน้าต่าง Content Browser (1)

และเลือก New Material ครับ (2)



จะมีหน้าต่างคล้ายๆการ Import ขึ้นมา

แต่ทีนี้ให้เราตั้งชื่อของตัว Material ครับ เสร็จแล้วกด OK ได้เลย

(ตามตัวอย่างผมตั้งเป็น Brick_Mat ครับ)


เมื่อกด OK จะพบกับหน้าต่าง Unreal Material Editor ขึ้นมาให้ครับ



Unreal Material Editor นั้นคือส่วนของการควบคุม Material นั่นเองครับ

โดยการทำงานของมันจะคล้ายกับ Kismat ที่ใช้การเชื่อมขั้วต่อ จากด้านนึงสู่อีกด้านนึงครับ



ยังไม่ต้องสนใจการทำงานมากครับ ให้ย่อหน้าต่างนี้ไปก่อนครับ

กลับไปที่ Content Browser

ให้คลิกเลือก ตัว Texture ไว้ครับ (ให้มีกรอบสีเหลืองที่ Texture)



จากนั้นกลับไปที่ Unreal Material Editor ครับ

ทีนี้ให้กดปุ่มคีย์บอร์ด T ค้างไว้ แล้วกดตรงที่ว่างตรงกลาง ตรงไหนก็ได้ครับ

(ถ้ากดแล้วไม่มีอะไรเกิดขึ้นให้ลองกด ย้ำอีกครั้งดูนะครับ)

การกด T ค้างไว้ เป็นการสั่งให้สร้าง Texture Sample จาก Texture ที่เราเลือกไว้ครับ

หากทำได้ถูกต้องจะมี Texture ที่เราเลือกไว้โผล่มาให้ครับ



จากนั้นย้อนวิธีเดิม กลับไปที่ Content Browser อีกครั้ง เลือกที่ตัว Normal map ครับ

แล้วนำมากดปุ่ม T ค้างไว้ + คลิกที่พื้นที่ว่าง เพื่อสร้าง Texture Sample อีกตัวครับ



เราจะได้ Texture Sample ที่เรา Import ไว้มาสองตัวครับ

จากนั้นก็ทำการเชื่อมขั้วมันได้เลย

วิธีการเชื่อมคือ คลิกเม้าส์ซ้ายค้างไว้ที่จุดหนึ่ง (กล่องสี่เหลี่ยมสีดำ) และลากไปปล่อยยังอีกจุดหนึ่งครับ

(เมื่อลากจะเห็นว่ามีเส้นยื่นออกมาให้)

ในกรณีของเรานั้นคือ.. Texture = Diffuse และ Normal mapping = Normal ครับ

ว่าแล้วก็ลากได้เลยครับ

<จุดสีแดง(red) จุดสีเขียว(green) จุดสีฟ้า(blue) ขาว(alpha) ยังไม่ต้องสนใจก็ได้ครับ>



เมื่อเสร็จแล้วกดปิด และตอบ Yes เพื่อ Save ได้เลยครับ

เราก็จะได้ Material มาแล้ว~

ทีนี้เมื่อเราสร้าง Material ใหม่ขึ้นมาแล้ว ต้องทำการ Save Package ด้วยครับ

ให้ไปที่ Packages ด้านซ้ายมือ ลองมองหา Package ที่มีสัญลักษณ์รูปดาว(*) อยู่ข้างหลังครับ

ให้คลิกที่ Package นั้นและกด Ctrl + S เพื่อทำการเซฟครับ

เมื่อ Save Package เสร็จแล้วเราถึงจะนำไปใส่วัตถุได้ครับ

ว่าแล้วก็ลองเอาไปใส่กับวัตถุในเกมดูเลย~



นี่คือผลลัพของแสงที่ได้ครับ

จริงๆ จะให้เห็นผลชัดเจนที่สุดจะต้องใช้แสงเคลื่อนที่ไปมาครับ

จากจุดนี้มองดูก็ยังคงไม่ชัดเจน

แต่การทำ Material ยังไม่จบเท่านี้ครับ นี่เป็นแค่พื้นฐานเท่านั้น

เดี๋ยวคราวหน้าผมจะต่อการทำ Detail ให้กับ Material นะครับ

[UDK] วิธีการทำ Normal mapping

posted on 20 Feb 2010 20:29 by ninete  in UDK-Tutorial

ก่อนอื่นเลย ต้องรู้จักกับคำว่า Normal mapping ก่อนครับ ตามหลักการมันคือการทำให้วัตถุ low polygon ให้มีความละเอียดเทียบเท่ากับกับ high polygon โดยใช้การสะท้อนของแสงเข้าช่วยครับ ผลที่ได้คือวัตถุดูมีความละเอียดมากขึ้น แต่มีจำนวน polygon ที่ใช้เท่าเดิมนั่นเองครับ


จากรูปโมเดลซ้ายมือ และโมเดลขวามือคือโมเดลตัวเดียวกันครับ และมีจำนวนโพลิกอนที่เท่ากัน แต่การทำ Normal map ให้กับมันทำให้ดูมีรายละเอียดที่เยอะขึ้นมากครับ



อาวุธของเราสำหรับการทำ Material นั้นก็คือโปรแกรม Photoshop นั้นเองครับ

แต่จะใช้แต่ Photoshop เพียวๆนั้นลำมากครับ เราจะต้องไปดาวโหลด Plug-in เสริมสำหรับการทำ Normal map โดยเฉพาะมาด้วยครับ เพื่อให้การทำงานรวดเร็วและง่ายขึ้นครับ



สามารถดาวโหลดได้จากเว็บ NVIDIA จากลิ้งด้านล่างนี้ครับ

http://developer.nvidia.com/object/photoshop_dds_plugins.html#downloads

ที่ด้านล่างสุดของเว็บจะมีเขียนว่า Available Downloads และก็มี Current Version(เวอชั่นใหม่ล่าสุด) กับ Legacy Version(เวอชั่นที่เสถียรที่สุด) นะครับ

อยากโหลดแบบไหนก็เลือกได้ตามใจชอบเลยครับ การทำงานก็จะคล้ายๆกัน

หลังจากดาวโหลดเสร็จแล้วก็จัดการ Install ให้เรียบร้อยได้เลยครับ

 

เมื่ออาวุธพร้อมแล้ว ก็จะเริ่มลงมือกันแล้วครับ

ก่อนอื่นเลยเราก็เตรียม Texture ที่โดนใจมาก่อนครับ


รูปตัวอย่างของผมจะเล็กมากนะครับ แนะนำว่าหา Texture ของตัวเองจะดีกว่าครับ

Note: ขนาดภาพ Texture ที่เหมาะสมนั้นจะอยู่ที่ไฟล์ขนาด 512x512 pixels และมีนามสกุลเป็น BMP ครับ

นำภาพเข้าโปรแกรม Photoshop ครับ จากนั้นกดไปที่ Filter / NVIDIA Tools (ด้านล่างๆ) / Normal Map Filter

(ถ้าหากว่าหาดีแล้ว แต่หายังไงก็ไม่เจอแสดงว่ามีการผิดพลาดตอนลง Plug-in นะครับ อาจจะต้องลองลงใหม่อีกครั้งครับ)



จะได้หน้าจอลักษณะนี้ครับ ให้ตั้งค่าตามรูปด้านบนได้เลย ยกเว้นส่วนของ Scale ครับ

ส่วนของ Scale นั้นจะขึ้นอยู่กับรูปที่เราใช้ครับ ว่ายากให้มันมีรอยขรุขระมากแค่ไหน

แต่ยิ่งค่านี้มีมากเท่าไหร่ตอนกดปุ่ม OK ไปนั้น ก็จะใช้เวลามากเท่านั้นครับ บางครั้งตั้งไว้สูงมากๆ ก็จะค้างได้เลยครับ

แนะนำว่าให้เป็นค่าประมาณ 1-5 ก็พอครับ ส่วนถ้าคิดว่ามันยังนูนหรือเว้าไม่พอ เดี๋ยวผมบอกวิธีจัดการให้ครับ

เมื่อตั้งค่าเสร็จแล้วสามารถกด 3D Preview เพื่อดูได้เลย



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

แต่เดี๋ยวเราจะทำให้มันนูนมากกว่านี้อีกทีภายหลังครับ ตอนนี้ตรวจสอบดูก่อนว่า มันถูกต้องแล้วหรือยัง

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


วิธีแก้ก็ง่ายๆครับ จากที่เราเห็นคือจาก นูนเป็นเว้า จากเว้าเป็นนูน นั่นก็คือการกลับด้านค่า Y นั่นเองครับ

ว่าแล้วก็กด Invert Y ได้เลยครับ (หาก Texture ของเพื่อนๆผิดรูปร่างในแนวอื่นก็กดที่ด้านอื่นตามแนวนะครับ)

พอ Invert เสร็จ ก็จะได้รอยเว้าที่ลงตัวครับ

จากนั้นกลับมาดูที่ Texture ของเราครับ จะเห็นว่ามันจะเปลี่ยนกลายเป็นสีฟ้า-แดง แปลกๆไปแล้ว

นั่นเป็นค่าความนูนที่จะนำไปใช้ประมวลผลเวลาเข้าไปอยู่ในงานสามมิติครับ



จริงๆ ถ้าใครขี้เกียจจะจบการทำ Normal map ตรงนี้ก็ได้ครับ แต่ผลที่จะออกมาคือ

เวลาไปใช้จริงจะไม่ค่อยเห็นผลเท่าไหร่นะครับ

 

 


วิธีต่อมาคือเราจะทำให้มันมีรอยบุ๋มที่มากขึ้นครับ ด้วยการทำการ Duplicate Layer ตัว Normal map อันนี้ขึ้นมาครับ

โดยการคลิกขวาที่ Layer Background ในหน้าต่าง Layer ครับ จากนั้นเลือก Duplicate Layer

จะมีหน้าต่างขึ้นมาให้ตั้งชื่อ เราสามารถกด OK ผ่านไปได้เลยครับ



ให้ตัว Select อยู่ที่ Layer ใหม่ที่เราสร้างไว้เมื่อกี้นะครับ จากนั้นไปที่ Filter / Blur / Gaussian Blur ครับ

ตั้งค่าให้ความเบลอพอประมาณ สัก 1-3 pixel(s) ก็พอครับ

 

(แว๊กก ผมลืมเซฟภาพช่วงที่ทำ  Gaussian Blur อ่าครับ

หวังว่าคงทำกันได้ แม้ไม่มีภาพประกอบนะครับ ขอโทษด้วยครับ )

 


จากนั้นคลิกขวาที่ Layer ใหม่นี้ แล้วเลือก Blending Option ครับ



จากนั้นเปลี่ยน Blend Mode ให้เป็น Overlay ครับ แล้วกดปุ่ม OK ได้เลย

เราจะได้รอยนูนที่ดูมีมิติมากขึ้นครับ จากนั้นให้คลิกขวา เลือกที่ Layer ใหม่อันเดิมอีกครั้ง

และ Duplicate Layer มันขึ้นมาใหม่อีกครั้งครับ คราวนี้เราจะไม่ต้องค่าอะไรอีกแล้ว

แค่ Duplicate ก็จะเห็นมีรอยนูนชัดขึ้นมาอีกระดับทันทีครับ

ให้ทำซ้ำๆ (หรือจะสลับกับใช้ Gaussian Blur ก็ได้) จนกว่าจะพอใจครับ



เมื่อเสร็จแล้วให้เราไปที่แถบด้านบนเลือก Layer Flatten Image ครับ

เพื่อรวมทุก Layer ที่ซ้อนกันอยู่นั้นให้รวมเป็นอันเดียวกันครับ

จากนั้นให้คลิกไปที่ Filter / NVIDIA Tools / Normal Map Filter อีกครั้งครับ

คราวนี้ให้เราเปลี่ยนจาก Average RGB เป็น Normalize only ครับ

แล้วลองกด 3D Preview ดู จะได้รอยนูนเว้าที่สวยงามทีเดียว



เสร็จแล้วให้ทำการ save เก็บไว้นะครับในนามสกุลไฟล์ BMP ครับ

ย้ำนะครับ Texture ที่เหมาะสมกับงานเกมนั้นจะอยู่ที่ไฟล์ขนาด 512x512 pixels และมีนามสกุลเป็น BMP ครับ

 เดี๋ยวครั้งต่อไปจะสอนว่านำมาใช้กับ UDK อย่างไรครับ