สร้างเกมส์ด้วย HTML5 ง่ายๆ (part1)
Jul 12th
ถ้าพูดถึงการสร้างเกมส์ คนที่ไม่มีพื้นฐานด้านโปรแกรมมิ่ง แทบไม่มีโอกาสได้ทำเกมส์ตามที่ตัวเองฝันไว้ ยิ่งเกมส์ที่สร้างจาก HTML5 ด้วยยิ่งเป็นเรื่องยาก และโหดร้ายมาก เพราะจะต้องฝ่าดง JQuery, JavaScript เขียนสคริปกันหัวฟู แต่เรามี Free Game Engine Tool มาแนะนำครับ
หากย้อนไปพูดถึง Flash Game ในยุคเฟื่องฟูก่อนที่ iPad, iPhone จะกลายเป็นที่นิยมของคนสมัยนี้ คงไม่มีใครค้านว่า Flash คือ Tool ที่ใช้สร้างเกมส์ได้อย่างเมามันส์ดีอยู่แล้ว แต่แล้ววันหนึ่งเมื่อ Steve Jobs ได้บอกว่า Flash มันคือ Junk Technology ที่ไม่อยากให้มาอยู่ในชายคาเดียวกัน ทำให้เกิดการเปลี่ยนแปลงครั้งใหญ่ เมื่อจู่ๆ ก็มี HTML เวอร์ชั่นใหม่ออกมามีนามว่า HTML5 ทำให้เหล่าบันดาสาวก Flash เจ็บจี๊ดๆ เพราะบางกระแสก็บอกว่า HTML5 นี่แหละ ที่จะมาฆ่า Flash โดยเฉพาะ ซึ่งเราต้องดูกันต่อไป แต่ก็มีความเป็นไปได้พอสมควร… ล่าสุด Adobe เองก็ประกาศยุติการพัฒนา Flash Player บน Android 4.1 (Jelly Bean) และเตรียมที่จะยุติการเปิดให้ดาวน์โหลดแอพ Flash Player จาก Google Play ตั้งแต่วันที่ 15 เดือนสิงหาคมเป็นต้นไป OMG!
เอาล่ะ กลับมาๆๆๆ
กลับมาพูดถึงเรื่องการสร้าง Game ใน HTML5 กันต่อ หลายคนถามผมว่า แค่เขียน HTML5 เพื่อใช้สร้างเว็บก็ยากพอแล้ว จะเขียนเกมส์ ไม่ตายกันไปข้างหรอกเหรอ… ผมบอกว่าไม่หรอกครับ ปัจจุบันมี Tool หลายตัวที่จะมาช่วยสร้างเกมส์ให้ โดยประหยัดสมองลงไปได้เยอะ และสิ่งที่ผมพบก็คือโปรแกรม Construct2 - HTML5 Game Engine ถามว่าตัวนี้เจ๋งแค่ไหน ผมจะมาแนะนำกันครับ
Introduction
โปรแกรม Construct2 ถูกสร้างขึ้นจาก 2 นักพัฒนาโปรแกรมชาวอังกฤษ 2 คน ที่ร่วมกันพัฒนาช่วงเรียนมหาวิทยาลัย และปล่อยโปรแกรมแรกออกมาชื่อว่า Construct Classic ซึ่งใช้ในการพัฒนาเกมส์ Direct X 9 แล้ว Export เป็น .exe เพื่อเล่นบน Desktop PC แต่เวลาผ่านไปไม่นาน ทั้งคู่เชื่อว่ากำลังจะเข้าสู่ยุคทองของ HTML5 จึงหยุดพัฒนา Construct Classic แล้วหันมาพัฒนาโปรแกรมใหม่ภายใต้ชื่อ Construct2 ที่ช่วยให้ผู้ต้องการสร้างเกมส์ สามารถใช้เป็น Tool สร้างสรรค์งานได้ โดยใช้คอนเซ็ปต์ที่ว่า “No programming required” หรือ “เขียนโปรแกรมไม่เป็น ก็สร้างเกมส์ได้” ประมาณนั้น
นักพัฒนาโปรแกรมผู้ให้กำเนิด Construct2 และ Construct Classic
1. Ashley Gullen
2. Thomas Gullen
Construct2 เป็นโปรแกรมสร้างเกมส์แบบ 2D แสดงผลแบบ WebGL ซึ่งหมายถึง เว็บที่ใช้ JavaScript ดึงศักยภาพของ Graphic Card มาช่วยประมวลผลให้การเคลื่อนที่ของเกมส์เร็วขึ้นไม่กระตุก ซึ่ง WebGL นี้ถูกพัฒนาขึ้นโดยทีม Firefox ร่วมกับ Chrome browser ทำให้การแสดงผลแบบ WebGL เริ่มนำมาใช้กับการแสดงผลเกมส์ในยุคปัจจุบัน มีเพียง Internet Explorer ที่ยังไม่ support การแสดงผลแบบ WebGL (แต่เริ่มมีความหวังกับ IE9 ครับ ^^)
เกริ่นกันไปพอสมควร เชื่อว่ามาถึงตอนนี้คุณผู้อ่านเริ่มสนใจขึ้นบ้างแล้วใช่ไหมครับ งั้นเรามาเริ่มต้นทำความเข้าใจการสร้างเกมส์ ด้วย Construct2 กันดีกว่าครับ
…….เริ่มกันเล้ยยย
Download&Install
ก่อนอื่น ต้องดาวน์โหลดโปรแกรม Construct2 กันก่อน ฟรีจร้า! เอามาทำเกมส์ง่ายๆก่อนได้เลย (แต่ถ้าจะเล่นของหนักระดับ Advance ในอนาคตก็ค่อยซื้อนะ)
คำเตือน : ลงได้เฉพาะ Window OS เท่านั้นก่อนนะครับ ในอนาคตอาจจะมีสำหรับ Mac OS ก็ได้ 555+
Download Link : Construct2 Free Edition
User interface
เมื่อติดตั้งแล้ว User interface ของโปรแกรมจะมีหน้าตาแบบนี้ครับ
แผงควบคุมการทำงานอยู่ตรงนี้ครับ จะมี 3 Tabs ที่ใช้บ่อยๆเลยครับ
Tabs 1 : Home
ใช้ควบคุม Object ต่าง บน Panel ก็จะมีพวก Copy, Paste, Undo, Delete, Select All, Select None พวกนี้ใช้ควบคุม Object ทั้งหมด ไม่ว่าจะเป็นภาพตัวละคร ในเกมส์ หรือข้อความที่ใช้บอกเหตุการณ์ต่างๆในเกมส์ จะมีบางส่วนที่เราไม่ต้องสนใจ นั่นคือ เรื่องของการ Config ครับ (Active configuration:none) กับ Displaying: ตรงนี้โปรแกรมสร้างเป็น HTML5 ให้อยู่แล้วครับ ไม่ต้องเปลี่ยนอะไรเลย ส่วนปุ่ม Run layout คือใช้เมื่อเราสร้างเกมส์ไปพอสมควร แล้วต้องการ Test run ก็คลิกปุ่มนี้ (ต้องสร้าง New project ก่อน ปุ่มถึงจะ Active นะครับ) ส่วน Export project ก็เป็นการสร้างไฟล์ HTML5 ขึ้นมา แล้วนำไปใช้ได้เลย (เกมส์เหล่านี้เล่นที่ Web browser หรือ Mobile browser แต่มี IE เจ้าปัญหา เกมส์ที่ใส่ Event เยอะๆ ก็อาจจะมี Bug ได้ เล่นใน Chrome หรือ Firefox ชัวร์สุดครับ)
Tabs 2 : View
ใช้ควบคุม User Interface ของโปรแกรมครับ โดย Default ของโปรแกรม จะมี ติ๊กถูกที่ Status Bar, Properties Bar, Project Bar, Layer Bar, Object Bar แต่ไม่ได้ติ๊กถูกที่ Configuration Bar ถ้าหากเป็น Free Edition จะไม่สามารถ Config ได้ครับ แต่จากภาพตัวอย่างของผม ผมซื้อไปแว้ว อิอิ
ทีนี้มาดูตำแหน่งต่างๆ ที่ติ๊กถูกไว้นั้น อยู่ตรงจุดไหนบ้าง ภาพนี้อาจจะเล็ก ให้คลิกที่ภาพจะเห็นภาพใหญ่ครับ แต่จุดต่างๆเหล่านี้ เราสามารถที่จะ Customize ได้เอง คือ จะสลับเอา Layer มาขวา หรือ เอา Project Bar มาไว้ด้นบนก็ทำได้หมด วิธีการคือ คลิกที่ชื่อ Bar แล้ว Drag Mouse ค้างไว้ แล้วลากออกมาเลยครับ จะวางตรงไหนก็แล้วแต่ ตามใจชอบครับ
Tabs 3 : Events
สำหรับ Tab สุดท้ายคือการสร้าง Events หรือเหตุการณ์ต่างๆให้กับสิ่งต่างๆในเกมส์ (Object) หรือตัวละครเกมส์ ยกตัวอย่างส่วนประกอบของเกมส์ Ghost Blaster ที่ต้องระบุ Events หรือเหตุการณ์กับสิ่งต่างๆดังนี้
- 1. ผู้เล่น(Player) ต้องกำหนดว่า ผู้เล่น จะเดินได้กี่ทิศทาง ซึ่ง Events ของ Player จะมีทั้ง 8 ทิศ, 4 ทิศ, หรือ 2 ทิศคือ ซ้าย-ขวา / บนล่าง (นึกถึงเกมส์มาริโอ้ครับ เดินไปซ้าย-ขวา เป็นต้น)
- 2. ปีศาจ(Monster) กำหนดการปรากฏตัว ว่าจะ Random ทิศทางหรือไม่ และถ้าหาก Monster เดินออกจากพิกัดของ ฉากเกมส์ เราต้องสั่งทำลายทิ้ง เพื่อไม่ให้เกมส์หนักครับ (นึกถึงขยะหน้าบ้าน ถ้าไม่มีรถขยะมาเก็บก็เหม็นเต็มบ้านล่ะครับ)
- 3. กระสุนสำหรับยิงให้โดนตัวปีศาจ (Bullet) กำหนดการเคลื่อนไหว แบบ Bullet เป็น Event ที่ใช้ได้กับหลายลักษณะ ไม่ว่าจะกระสุนก็ใช้ได้ หรือ พลังต่างๆที่ต้องการเคลื่อนที่ไปชน Monster ใช้ Bullet Event ได้หมดครับ
- 4. ฉาก (Scene) แล้วแต่ครับ อยากให้ขยับหรือไม่ แต่ส่วนใหญ่ก็จะ fix ครับ
ใน Part 1 นี้ ผมยังไม่พูดถึง Events ให้ปวดหัวครับ ยกไปเริ่มกันใน Part 2 ดีกว่าครับ ….ง่วง ^0^”
ชักอยากมีเกมส์เป็นของตัวเองซะแล้ว มาติดตามต่อ ตอน 2 ครับ
เนื้อหาน่าสนใจดีนะคะ น่าติดตามมากๆด้วย
ลุยเลยไม่ต้องรอค้าบ ^^
บทความอ่านแล้วสนุก คนเขียนอธิบายสนุกทำให้น่าคิดตาม
เริ่มตกหลุมรักการเป็น game แล้ว
ขอบคุณครับได้ความรู้เยอะเลย
ขอบคุณสำหรับเว็บไซดีๆๆแบบนี้นะค่ะ
อยากรูจังว่า โปรแกรมนี้ใช้เขียนเกมที่ใช้กล้องได้มั้ย ^^