Home > HTML5 > สร้างเกมส์ด้วย HTML5 ง่ายๆ (part1)

สร้างเกมส์ด้วย HTML5 ง่ายๆ (part1)

ถ้าพูดถึงการสร้างเกมส์ คนที่ไม่มีพื้นฐานด้านโปรแกรมมิ่ง แทบไม่มีโอกาสได้ทำเกมส์ตามที่ตัวเองฝันไว้ ยิ่งเกมส์ที่สร้างจาก 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^”

Related Articles


About the author

นาย ณัฐพงศ์ พันธุศิลป์ (กอล์ฟ) Website Manager Unicorn Max Co.,Ltd.

Website : http://www.unicornmax.com

Facebook : http://www.facebook.com/unicornmax

Twiter :


  1. July 12th, 2012 at 13:54 | #1

    ชักอยากมีเกมส์เป็นของตัวเองซะแล้ว มาติดตามต่อ ตอน 2 ครับ

  2. July 16th, 2012 at 16:54 | #2

    เนื้อหาน่าสนใจดีนะคะ น่าติดตามมากๆด้วย

  3. July 16th, 2012 at 21:25 | #3

    ลุยเลยไม่ต้องรอค้าบ ^^

  4. iam
    August 8th, 2012 at 15:22 | #4

    บทความอ่านแล้วสนุก คนเขียนอธิบายสนุกทำให้น่าคิดตาม
    เริ่มตกหลุมรักการเป็น game แล้ว

  5. Ruth
    August 23rd, 2012 at 21:04 | #5

    ขอบคุณครับได้ความรู้เยอะเลย

  6. Nu”I
    September 13th, 2012 at 14:30 | #6

    ขอบคุณสำหรับเว็บไซดีๆๆแบบนี้นะค่ะ

  7. wiew
    October 29th, 2012 at 12:52 | #7

    อยากรูจังว่า โปรแกรมนี้ใช้เขียนเกมที่ใช้กล้องได้มั้ย ^^

  1. No trackbacks yet.