เขียนเกมส์ มือใหม่เขียนเกมส์ ต้องทำอะไรบ้าง [เขียนเกมส์ด้วย HTML5 Part 1]

ทุกๆ วันนี้การเล่นเกมส์บนสมาร์ทโฟนถือว่ายอดฮิตมาก ๆ เพราะเดียวนี้ทุกคนมักจะมีสมาร์ทโฟนติดตัวกันอยู่ทั้งนั้น มองไปทางไหนก็ สมาร์ทโฟน นั่นสิไม่ว่าจะเป็น Application หรือ Game แล้วถ้าเราอยาก ทำเกมส์บ้างล่ะ เราต้องมีพื้นฐานทางด้านโปรแกรมเมอร

Thaiware

แชร์

11 กุมภาพันธ์ 2558 19,091

4 (5 โหวต)

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

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

บทความเกี่ยวกับ HTML5 อื่นๆ

มาดูวิธีการทำให้ตัวละครในเกมส์เคลื่อนไหวพร้อมกับการยิงกระสุน [เขียนเกมส์ด้วย HTML5 Part 2]

html5

แต่เดิมนั้นภาษาที่ใช้เขียนเกมนั้นมีมากมาย ไม่ว่าจะเป็น C/C++ หรือ VB แต่ภาษาที่เขียนแล้วสามารถรองรับอุปกรณ์แบบ Cross-Platform ได้ ก็คงหนีไม่พ้น HTML5 ที่สามารถทำงานได้ทั้ง Android ,iOS และบน Website ซึ่งนอกจากความยืดหยุ่นในการเขียนโปรแกรมให้สามารถใช้งานบนอุปกรณ์ต่างๆ แล้ว HTML5 ยังมีความเร็วในการดาวน์โหลด สามารถเพิ่มลูกเล่น Animation, Graphics 2D, 3D บนเว็บได้ หรือจะใช้งานร่วมกับร่วมกับ SVG, CSS3 และ JavaScript ก็ได้ ซึ่งก็ทำให้ HTML5 มีความเหมาะสมกับการนำมาเขียน Web Application เพื่อนำไปประยุกต์ใช้ได้กับ Mobile Apps ได้เลยอีกด้วย

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

ในบทแรกนี้ เราจะพูดถึงขั้นตอนการวางแผนในการสร้างเกมส์ก่อน ว่าเราควรจะเริ่มต้นอย่างไร

การวางแผนสร้างเกมส์หนึ่งๆ ขึ้นมานั้น สิ่งสำคัญที่เรากำหนดก่อนเลย คือ รูปแบบการเล่น, เนื้อเรื่อง และกราฟฟิค

เนื้อเรื่อง (Story) เป็นส่วนประกอบที่สำคัญที่สุดส่วนหนึ่ง กล่าวคือ เนื้อเรื่องเป็นการกำหนดขององค์ประกอบทั้งหมดในเกมส์เข้าด้วยกัน ดังนั้นเนื้อเรื่องที่ดีควรทำให้ผู้เล่นเกิดความรู้สึกร่วมกับตัวละคร โดยเราสามารถจินตนาการเนื้อเรื่่อง เสมือนกับว่าเรากำลังเขียนบทภาพยนตร์ ซึ่งเนื้อเรื่องที่ดีจะทำให้เกมส์มีความน่าสนใจมากขึ้น
UI (User Interface) ส่วนติดต่อผู้ใช้ เป็นส่วนในการนำเสนอรูปแบบหน้าตาของระบบเกมส์ให้กับผู้เล่น ไม่ว่าจะเป็นหน้าเมนูเกมส์ หน้าการควบคุมเกมส์ ซึ่ง UI ที่ดี จะต้องทำให้ผู้เล่นเข้าใจวิธีการเล่นได้ในทันทีและสามารถควบคุมได้ง่าย ระหว่างการถือเล่นบนสมาร์ทโฟนด้วย
รูปแบบการเล่น ไม่ว่าเนื้อเรื่องและภาพจะดีขนาดไหน หากเกมมีวิธีการเล่นที่น่าเบื่อและควบคุมยากเกินไป เกมนั้นก็จะหมดความสนุกไปในทันที

ทางไทยแวร์ได้ลองออกแบบเกมส์ที่มีชื่อว่า PigBee Adventure ขึ้นมา โดยที่เกมส์จะมีเนื้อหาประมาณไหนเราลองมาดูกันเลย

เนื้อเรื่อง

"ในป่าอันสงบสุข กลางหุบเขามีหมู่บ้านหมูผึ้งอาศัยอยู่กันอย่างมีความสุข อยู่มาวันหนึ่งมีฝูงต่อได้แอบมาดูความเคลื่อนไหวในหมู่บ้าน เพื่อที่จะหาทางขโมยเอาน้ำผึ้งอันศักดิ์สิทธิ์ของหมูผึ้งไป และแล้วฝูงต่อก็ได้แอบเข้ามาขโมยน้ำผึ้งอันศักดิ์สิทธิ์ไปได้ คนในหมู่บ้านหมูผึ้งจึงได้ปรึกษาหารือกัน เพื่อให้หมูผึ้งไปตามเอาน้ำผึ่งจากฝูงต่อกลับมา หมูผึ้งต้องออกไปผจญภัยในป่าลึกลับ ต้องฟันฝ่าอุปสรรคมากมายกว่าจะถึงรังของฝูงต่อ หมูผึ้งต้องไปเอาน้ำผึ้งอันศักดิ์สิทธิ์กลับมาจากฝูงต่อให้ได้"

หลังจากเราได้ธีมหลักของเกมมาแล้ว เราก็มาลองออกแบบรูปแบบการเล่นกัน

รูปแบบการเล่น

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

ส่วนของด่านต่างๆ ในเกมส์ PigBee Adventure นี้จะใช้แผนที่ที่มีลักษณะเป็นเกาะ แสดงตั้งแต่ด่านแรกไปจนถึงด่านสุดท้าย โดยผู้เล่นจะต้องเล่นไปทีละด่านจนถึงด่านสุดท้าย โดยเกมส์ PigBee Adventure จะมีทั้งหมด 9 ด่าน ด่านแรกจะเป็นแบบง่ายๆ ด่านที่ 2 จะเริ่มมีมินิบอส ด่านที่ 3 และ 4 จะเริ่มยากขึ้น มีสิ่งกีดขวางเพิ่มเข้ามา ด่าน ที่ 5 จะเป็นด่านโบนัสเก็บเหรียญไว้สำหรับซื้อของอัพเกรดตัวละคร ด่านที่ 6 จะยากกว่าด่านแรกๆ ที่ผ่านมา สิ่งกีดขวางเริ่มเยอะขึ้น ด่านที่ 7 จะเป็นถ้ำที่ผู้เล่นต้องระเบิดถ้ำเพื่อไปด่านที่ 8 ภายในถ้้ำจะมีสิ่งกีดขวางเป็นดอกไม้กินคน พอผ่านด่านที่ 8 จะเริ่มเข้าสู่ด่านสุดท้าย จะเจอกับฝูงต่อ มินิต่อ และบอส โดยที่ผู้เล่นจะต้องฆ่าบอสให้ตาย ถึงจะชนะแล้วจบเกมส์

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

นาฬิกา - ใช้ช่วยหยุดเวลาในขณะเล่น
คฑาสายฟ้า - จะปล่อยพลังสายฟ้าออกมา
ระเบิดหนาม - เวลาระเบิดหนามจะกระจายออกมา
น้ำเมา - เวลาใช้จะทำให้ฝูงต่อมีอาการมึนงง ร่วงมาตาย
ดาว - ทำให้ตัวละครตัวใหญ่ขึ้นและวิ่งเร็วขึ้น

User Interface (UI)

เราออกแบบโดยอิงแนวทางจากเนื้อเรื่อง การออกแบบตัวละคร ฉากหลังยูนิตต่างๆ โดยที่เกมส์ PigBee Adventure จะมีฉากตัวอย่าง ดังในรูปนี้

ส่วนของหน้าจอของเกมส์ PigBee Adventure จะประกอบไปด้วยปุ่ม Fly ปุ่ม Shoot ปุ่มเก็บไอเทม 5 ปุ่ม ที่อยู่รอบปุ่ม Shoot ด้านบนซ้ายจะเป็นแถบระยะทางที่หมูผึ้งต้องบินผ่านในแต่ละด่าน และจำนวนเงินที่เก็บได้ แถบด้านขวาบนก็จะเป็นจำนวนชีวิตของหมูผึ้ง

หน้าตาของตัวละครแต่ละตัวในเกมส์ PigBee Adventure

hero wasp mini

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

1. Aptana : โปรแกรมหลัก เป็นเครื่องมือที่เราจะเอาไว้เขียนโค้ดนั่นเอง

2. XAMPP : โปรแกรมจำลองเซิร์ฟเวอร์

3. PhaserJS : ตัว Framework สำเร็จรูปบน Javascript

การสร้างเกมส์ในทุกวันนี้สามารถทำได้ง่ายขึ้นด้วย Game Engine หรือ Framework ซึ่งเป็นรูปแบบเกมส์สำเร็จรูป ที่ไม่ต้องเขียนโค้ดใหม่ตั้งแต่เริ่มต้น ซึ่งสำหรับการเขียนเกมส์ครั้งนี้ ทางทีมงานไทยแวร์ได้เลือกใช้ PhaserJS ตัวนี้รองรับทั้ง HTML5 และ WebGL สามารถสร้างเกมส์แบบ Cross-Browser ได้ สามารถทำงานร่วมกับ Browser บนมือถือได้ (รองรับ Canvas) และ Browser บน Desktop ได้โดยที่ตัว PhaserJS เขียนด้วย Javascript ซึ่งจุดเด่นของ PhaserJS นั้นมี Module และ Features ให้เลือกใช้มากมาย ทำให้สะดวกในการสร้างเกมส์มากขึ้น

ขั้นตอนในการติดตั้งโปรแกรม Aptana

สำหรับใครที่ยังไม่มีโปรแกรมสามารถ ดาวน์โหลดโปรแกรม Aptana ได้ที่นี่ หากพร้อมแล้วก็มาเริ่มกันเลย ดับเบิ้ลคลิกไอคอนดังรูป

ให้เราเลือกพื้นที่จัดเก็บโปรแกรมตามต้องการ และติ๊ก I agree เพื่อยอมรับข้อตกลง จากนั้น กด INSTALL

ระหว่างนี้ก็รอให้โปรแกรม Aptana ติดตั้งเสร็จ

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

ขั้นตอนในการติดตั้ง โปรแกรม XAMPP

สำหรับใครที่ยังไม่มีโปรแกรมสามารถ ดาวน์โหลดโปรแกรม XAMPP ได้ที่นี่ หากพร้อมแล้วก็มาเริ่มกันเลย ดับเบิ้ลคลิกไอคอนดังรูป

กด Next เพื่อไปขั้นตอนต่อไป

หน้านี้จะเป็นหน้าตรวจสอบองค์ประกอบที่เราต้องการติดตั้งและจัดการองค์ประกอบที่เราไม่ต้องการที่จะติดตั้ง จากนั้นคลิก Next เพื่อไปขั้นตอนต่อไป

เลือกพื้นที่จัดเก็บสำหรับติดตั้งโปรแกรมตามต้องการเลย จากนัันคลิก Next

คลิกที่ Next เพื่อไปขั้นตอนต่อไป

จากนั้น คลิก Next เพื่อทำการติดตั้งโปรแกรม

ระหว่างนี้ก็รอให้โปรแกรม XAMPP ติดตั้งเสร็จ

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