GigGok Engine ::. Network for MMOG

Network engine ของ GigGok Engine นั้น เป็นระบบเน็ตเวอร์คแบบ Client/Server ที่รองรับการพัฒนาเกมแบบ Online Game โดยผมได้นำภาพโปรแกรมต้นแบบมาลงให้ดู โดยพื้นฐานของงานเน็ตเวอร์คนี้ มาจาก Winsock เวอร์ชัน 2 โดยใช้ความรู้เกี่ยวกับ IOCP มาจัดการกับ Message ปริมาณมากๆ

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

GigGok Engine ::. Parallax Mapping

Parallax Mapping เป็นการ mapping texture ให้กับวัตถุ เป็นจำนวน 3 ชั้นด้วยกัน โดยมี Texture ที่เรียกว่า Heightmap เพิ่มขั้นมาอีก 1 อย่าง (เป็นภาพ Grayscale) ซึ่งถามว่า ทำไมต้องมี Parallax mapping ด้วย แค่ Bumpmap กับ Normal map ยังไม่พออีกหรอครับ คำถามก็คือ ไม่พอครับ บางทีฉากบางฉาก เราต้องการที่จะแสดงความนูนของวัตถุออกมาให้นูนแบบสุดๆ ไปเลย ก็ต้องอาศัยเจ้าเอฟเฟ็กต์ตัวนี้ละครับ และตัวอย่างนี้ก็เช่นเดิมครับ ทั้งวัตถุ, texture และ .fx ก็เป็นการนำมาจากตัวอย่างของ Darkbasic Professional เช่นเดิม

GigGok Engine ::. Refraction

Refraction Effect คือ เอฟเฟ็กต์ที่ใช้สำหรับพวกกระจก หรือแผ่นน้ำ ที่มีการคำนวนเรื่องการหักเหของแสงเข้ามาเกี่ยวข้อง โดยจากตัวอย่างข้างบนนี้ ผมได้ไป จิ๊ก เอาเอฟเฟ็กต์ .FX และ Texture ของตัวอย่างใน Darkbasic มาทดลองใช้งานดู ปรากฏว่าผลลัพธ์ออกมา ก็เป็นดังรูปข้างบน Oh My God ไอมีที่เกาะแล้ว ต่อไปถ้า Darkbasic มีเอฟเฟ็กต์อะไรใหม่ๆ ผมก็จะจิ๊กต่อได้เลย

GigGok Engine ::. Old Movie Film

ภาพด้านบน เป็นภาพต้นฉบับ ที่มีการโหลด X file ยานอวกาศขึ้นมา เพื่อทำการเรนเดอร์ โดยยังไม่มีการใส่ Shader อะไรลงไป

ส่วนภาพนี้ เป็นการใส่ Shader ที่ชื่อว่า Old Movie Film ลงไป หรือแปลเป็นไทย ก็คือ การดูภาพยนต์เก่าๆ ที่มีการกระตุกของภาพ และ Noise รบกวนภาพ อยู่ตลอดเวลา เอฟเฟ็กต์นี้ก็ยังใช้การ Render to Texture อยู่เหมือนเดิม

GigGok Engine ::. Bumpmap&Reflection

BumpMap&Reflection คือ เอฟเฟ็กต์การใส่ Texture ไปทั้งหมด 3 Layer ด้วยกัน

1. โดย Layer แรกคือ Layer ของ Texture ผิวไม้
2. ส่วน Layer ที่ 2 เป็น Layer ของ Bumpmap
3. ส่วน Layer ที่ 3 เป็น Layer ของ Reflection

GigGok Engine ::. Rain Effect

Rain Effect คือ เอฟเฟ็กต์การสร้างฝนตกนั่นเองละครับ ลองเขียนตัวอย่างนี้เพื่อให้เข้ากับบรรยากาศฝนตก เรื่องของการสร้างฝนนั้น ก็เป็นเรื่องของการสร้าง Particle นั่นเอง โดย Particle แบ่งเป็น 2 ส่วน คือ ส่วนที่กำลังตกลงมาเป็นสาย กับส่วนที่ตกลงมาถึงพื้นแล้ว

GigGok Engine ::. Water [1]

Water Effect แบบที่ 1 นี้ เป็นเอฟเฟ็กต์แบบง่ายๆ อีกแบบหนึ่ง ใช้สำหรับการสร้างแผ่นน้ำ ไว้ตามสระว่ายน้ำ อาศัยเทคนิคการ Render to Normal map เข้ามาช่วย ก่อนที่จะ Draw texture ลงไปที่แผ่นน้ำอีกทีหนึ่ง

GigGok Engine ::. Lightmap with Gile[s]

Lightmap with Gile[s] หมายถึง การคำนวนเรื่องแสงกับวัตถุ ด้วยโปรแกรมยอดนิยมอย่าง โปรแกรม Gile[s] ซึ่งผมเองช้อบชอบโปรแกรมนี้เป็นอย่างยิ่ง เนื่องจากการคำนวน Lightmap ที่ค่อนข้างออกมาได้สวยงาม

เริ่มต้นขั้นตอนที่ 1 ด้วยการสร้างแผ่น Plan จำนวน 3 แผ่น ด้วยโปรแกรม 3D Studio MAX เพื่อจำลองเป็นห้องเปล่าๆ แล้วก็ทำการใส่ Texture ให้เรียบร้อย ก่อนที่จะ Export ไฟล์ออกมาเป็นไฟล์ชื่อ Room.x

ขั้นตอนที่ 2 เป็นขั้นตอนของโปรแกรม Gile[s] ผมก็จะ Open ไฟล์ Room.x ขึ้นมา แล้วทำการสร้างดวงไฟแบบ Omni ขึ้นมา 1 ดวง ต่อจากนั้นก็ปล่อยให้โปรแกรมคำนวนค่า Lightmap สุดท้ายก็เข้าสู่ขั้นตอนของการ Export ออกเป็นไฟล์ Room.x และ Room_lmap.x นั่นเอง

ขั้นตอนสุดท้าย ก็เป็นขั้นตอนของการเขียนโปรแกรม เพื่อที่จะโหลดโมเดล, Texture และ Lightmap Textureขึ้นมาแสดงผล โดยการโหลดโมเดล Room.x และ Room_lmap.x ขึ้นมานั้น จะต้องอาศัยความรู้ในเรื่องของ Vertex สักหน่อย เพราะโมเดลลักษณะนี้ จะมี Texture อยู่ 2 ชั้นด้วยกัน โดยแต่ละชั้น จะมีค่า UV ที่แตกต่างกัน ดังนั้นจึงเป็นเรื่องที่ซับซ้อนพอสมควร

GigGok Engine ::. BoundingBox

BoundingBox คือ การเขียนโปรแกรมเพื่อหาขนาดของพี่เสือนะครับ ดูว่าพี่เสือมีกรอบหรือกล่องที่จะบรรจุพี่เสือได้พอดีตัวนั้น มีขนาดเท่าไหร่ ตัวอย่างนี้ไม่ยากครับ เป็นการ Lock vertex ไว้ แล้วใช้คำสั่ง D3DXComputeBoundingBox เพื่อหาค่า Min และ Max ก่อนที่จะนำไปสร้างกล่องมาครอบ

GigGok Engine ::. Mosaic Effect

Mosaic Effect เป็นอีก 1 เอฟเฟ็กต์ที่มีการใช้งานกันอย่างแพร่หลายในวงการเกมระดับโลก ลักษณะของเอฟเฟ็กต์นี้ จะเป็นภาพแบบแตกเป็นพิกเซลๆ และมีขนาดใหญ่ขึ้นเรื่อยๆ จนในที่สุด ก็จะเหลือเพียงพิกเซลเดียว อะไรประมาณนี้ละครับ

GigGok Engine ::. Blur and Blur

เอฟเฟ็กต์ Blur เป็นเอฟเฟ็กต์ที่เกิดจากการใช้การเรนเดอร์แบบ Render to Texture แล้วนำมาวางซ้อนทับกัน ด้วยค่า Alpha ตามความต้องการของเรา รวมถึงอาจจะมีการใส่ค่า Rotate ให้กับภาพอีกนิด ก็กำลังไปได้สวยเลยทีเดียวละครับ

GigGok Engine ::. Connect with GDI+

GDI Plus คือ API อีกตัวหนึ่งซึ่งได้รับความนิยมมากๆ ในการ Drawing งานกราฟิกต่างๆ บนระบบปฏิบัติการวินโดวส์ ดังนั้นในบางครั้งงานเกมของผม

GigGok Engine ::. Fade Color In/Out

เทคนิค Fade Color In/Out ใช้สำหรับในการคั่นสลับฉาก เปลี่ยนระหว่างฉากที่ 1 กับฉากที่ 2 หรือว่าฉากอื่นๆ โดยเราจะมีการ Fade สีลงไป ซึ่งเทคนิคการ Fade สีเป็นที่นิยมใช้กันอย่างแพร่หลาย ในเกือบทุกๆ เกมทั่วโลก

GigGok Engine ::. Reflection Effect

เอฟเฟ็กต์ Reflection เป็นเอฟเฟ็กต์สำหรับใช้ในการแสดงภาพสะท้อน 6 ทิศ ให้กับพี่เสือของเรา เอฟเฟ็กต์นี้เราจะเห็นบ่อยๆ ในเกมแข่งรถ ที่รถของเรามีการสะท้อนฉากอยู่ตลอดเวลา โดยเอฟเฟ็กต์นี้มีการกำหนดค่าการสะท้อนไว้ 2 ค่าด้วยกัน ก็เลยทำให้สะท้อนมากน้อยต่างกันนั่นเอง

GigGok Engine ::. Skybox

Skybox คือ กล่องสี่เหลี่ยมที่จะมาครอบฉากในเกมของเรา โดยในที่นี้ผมได้ทำการใช้ Skybox ที่มาจากตัวอย่างของ Microsoft DirectX SDK นั่นเอง

GigGok Engine ::. Swap Scene [2]

ต่อจากตัวอย่างที่แล้วนะครับ โดยคราวนี้เปลี่ยนจากวงรี มาเป็นภาพหัวใจแทน ซึ่งก็จะเก๋ไปอีกแบบสำหรับเกมแนวน่ารักๆ

GigGok Engine ::. Swap Scene [1]

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

GigGok Engine ::. ScanLine Effect

เทคนิค ScanLine เป็นเทคนิคสำหรับใช้ในการแสดงภาพแบบเป็นลายเส้น คล้ายๆ กับการที่เราดู TV นั่นละครับ มันจะช่วยให้บรรยากาศของฉากดูคลาสิคไปอีกแบบหนึ่ง

ภาพข้างบนทั้งสองภาพ แตกต่างกันตรงความหนาของเส้น ซึ่งภาพบนเส้นจะหนามากกว่าภาพล่าง

GigGok Engine ::. Sepia

เทคนิคภาพแบบ Sepia ก็คือ การแสดงภาพที่เราเรนเดอร์มาได้นั้น ให้มีรูปแบบสีแบบภาพเก่าเก็บ โดยก่อนที่จะเข้าสู่ Image processing เราก็ทำการเรนเดอร์ฉากของเราไว้ที่ Texture (RenderToTexture) หลังจากนั้น ก็ทำการส่ง Texture ดังกล่าว มาเข้าสู่กระบวนการแปลงภาพ โดยการแก้ไขค่าสีของ Color balance มันก็จะได้ผลดังภาพด้านบนนี่ละครับ

GigGok Engine ::. GrayScale

เทคนิคภาพขาวดำ ก็คือ การแสดงภาพที่เราเรนเดอร์มาได้นั้น ให้มีรูปแบบสีขาวดำ โดยก่อนที่จะเข้าสู่ Image processing เราก็ทำการเรนเดอร์ฉากของเราไว้ที่ Texture (RenderToTexture) หลังจากนั้น ก็ทำการส่ง Texture ดังกล่าว มาเข้าสู่กระบวนการแปลงภาพ ให้ผลเป็นภาพขาวดำนั่นเอง

GigGok Engine ::. Explosion Effect

เทคนิค Explose คือ การทำให้โมเดลที่เราต้องการ เกิดการระเบิดออกเป็นเสี่ยงๆ ตามภาพที่เห็นด้านบนนะครับ โดยเทคนิคนี้ใช้การเพิ่ม Scale ให้กับพี่เสือของเรา รวมถึงการตัดชิ้นส่วนของ Face ออกไปบางส่วน

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

GigGok Engine ::. Focus Line

เทคนิคการ Focus จะใช้ในตอนที่เรากำลังเพ่งเล็งความสนใจไปที่ออปเจ็กท์ใดอ็อปเจ็กท์หนึ่ง ซึ่งถ้าใครที่ชอบเล่นเกมแข่งรถ คงจะเห็นเอฟเฟ็กต์นี้อย่างแน่นอน ผมกำลังเล่น KartRider อยู่ พอดีเห็นเทคนิคนี้มา ก็เลยอยากทำ เอ๊ย อยากทำ

เส้น Focus จากตัวอย่างนี้มีทั้งหมดประมาณ 100 เส้นด้วยกัน โดยเรื่องของ Viewport เป็นสิ่งสำคัญในการสร้าง Polygon แบบนี้นะครับ

GigGok Engine ::. Gradient ToonShade

ToonShade แบบ มนๆ หน่อยสิ ไม่ชอบแบบขึ้นบันได ชอบแบบมนๆ แบบสีกลมกล่อมหน่อย ผมก็เลยลองเปลี่ยน Textuer ของ Toon เป็นแบบภาพด้านบน ซึ่งผลที่ได้ ก็เป็นดังรูปที่เห็นนั่นละครับ

GigGok Engine ::. Normal ToonShade

Toonshade คือ เงาขาวดำ ที่ซ้อนทับกับ Texture ของเสือนั่นเอง โดย ToonShade ของผมที่สร้าง Texture ไว้แบ่งเป็น 3 ระดับด้วยกัน แต่เนื่องจากว่า แสงมันแรงไปหน่อย ก็เลย Blend กันแบบอ่อนๆ นะครับ

Toonshade + OutLine สีดำ ตอนนี้ทำให้เสือของผม ใกล้ๆ จะได้บรรยากาศของเกมนารุโตะแล้วนะครับ สู้ต่อไปนะครับ เพื่อเสือตัวนี้จะใหญ่ในวันข้างหน้า

GigGok Engine ::. EdgeColor

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

จากภาพข้างบนทั้งสองภาพ แตกต่างกันแค่ตรงความหนาของเส้นขอบเท่านั้นเองละครับ โดยหลักในการคำนวนเรื่องเส้นขอบนั้น ก็จะมาจากเรื่องของ Normal ของวัตถุ โดยการวาดก็จะทำการ Flip แล้วแสดงด้วยสีแดงเท่านั้นเอง (กว่าจะทำเป็น ก็เกือบตาย)

GigGok Engine ::. Basic Shader

Shader (เฉด-เดอร์) นะครับ เป็นอะไรที่งงสุดๆ มันคืออะไรกันหว่า ทำไมมีแต่คนใช้ Shader กันทั้งนั้น ใน Game Engine รุ่นใหม่ๆ วันนี้ผมต้องพยายามหาคำตอบให้ได้เลยว่า จะโหลดไฟล์ Shader .fx ของ DirectX 9.0c เข้าไปในเกมได้ยังไง

Shader ในตัวอย่างนี้ ไม่มีอะไรมากเลยครับ แค่ทำการใส่ตัวแปร Matrix ของ WorldViewProjection ลงไป แล้วสุดท้ายก็ใส่แค่แสงลงไป ผลที่ได้ก็ไม่ได้ต่างอะไรจากตัวอย่างที่แล้วเลย แสดงว่าเขียนโปรแกรมมาถูกทางแล้วนั่นเอง

GigGok Engine ::. Lighting

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

อุปสรรคของการนำแสงเข้ามาในฉาก ก็คือ เรื่องของการคำนวนค่า Normal ของตัวเสือนั่นเอง ซึ่งการโหลดตัวเสือจากไฟล์ .x นั้น ได้มีการเพิ่มส่วนของการคำนวนค่า Normal เข้าไปด้วย ก็เลยทำให้เห็นภาพเนียนๆ ขึ้นมาได้

GigGok Engine ::. My startup project

GigGok Engine คือ ไลบรารีสำหรับใช้ในการพัฒนากราฟิกสองและสามมิติ อันมีพื้นฐานการพัฒนามาจาก DirectX9.0c

GigGok Engine ได้รับการพัฒนาขึ้นในโปรแกรม Microsoft Visual C++ 2003 ซึ่งแบ่งออกเป็น 2 ส่วน ได้แก่ ส่วนของ Library และส่วนของ Project game

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