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

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

สร้าง Player Platform

ไม่น่าเชื่อว่าแค่ Player Platform เล่นซะ 3 ตอนเลยทีเดียว เพราะกลัวหน้าจะยาวเกินไป เราเน้นรูปซะด้วย 555 แต่หวังว่าจะช่วยให้ผู้สนใจทำเกมส์ เข้าใจได้เร็วขึ้น เอาหละ จากตอน 2 จบลงไม่สวยเท่าไหร่ เพราะเจ้า Player มันยังไม่เดิน โดยใช้ Animate ที่เราเซ็ตเอาไว้ใน Scene : Left, Right ทีนี้เรามาดูกันว่าเซ็ตอย่างไรครับ

ก่อนจะเข้าสู่การใส่เงื่อนไขการเคลื่อนที่ให้กับ Player มาลองทบทวนดูการแสดงผลของเกมส์ จากตอน 1-2 กันนะครับ View game

จะเห็นว่าเวลาเรากดลูกศรซ้าย-ขวา ที่คีย์บอร์ด มันไม่หันหน้าไปตามที่เรา Set Scene เอาไว้ใช่ไหมครับ ทีนี้มาดูวิธีการกันเลยดีกว่า

ขั้นตอนการ Set Event ให้ Player

Concept หลักของโปรแกรม จะประมาณว่า

If Event……. จะให้เกิดผลเป็น Then Action……..

เอาละครับ ทีนี้มาดูในภาพแต่ละ Frame ที่เราใช้

Animation : “Default” จะประกอบไปด้วย Frame : 0 ใช้เมื่อเวลาเริ่มเกมส์ ส่วนเวลาอื่นถ้าต้องการใช้ก็สามารถ Set ได้ครับ

Animation : “Left” จะประกอบไปด้วย Frame : 0, 1, 2 ใช้เมื่อเวลากด Keyboard : Left arrow (ลูกศรซ้าย)

Animation : “Right” จะประกอบไปด้วย Frame : 0, 1, 2 ใช้เมื่อเวลากด Keyboard : Right arrow (ลูกศรขวา)

ปล. ผมป่าวกระแดะเขียนเป็นภาษาอังกฤษ แต่เหตุผลคือ การ Set Event ให้กับนักแสดงนำ Player หรือ Object ต่างๆ จะมี Dialogue มาให้เราเลือกว่าจะกำหนดเป็นอะไรบ้าง โดยใช้คำศัพท์ ที่ผมเขียนตามข้างบนอ่ะ ดังนั้นประเด็นกระแดะ ถือว่าให้ผ่าน อิอิ

อ้อ ให้ Set Loop เป็น Yes ด้วยนะครับ เวลาเรากดค้าง Animation ก็จะวนๆให้เรา ถ้าลืม เวลาเรากดลูกศรซ้าย ขวา บังคับเดินค้าง มันจะกางขาค้างไว้ ไม่วิ่งให้เราโอเคนะครับ

ไม่มีไรมาก แค่กดตรง Animation : Left และ Right ทั้ง 2 ฝั่งให้เรียบร้อย แล้วก็ปิดหน้าต่าง Edit image ไปเป็นเสร็จครับ

กลับมาเข้าเรื่อง หลังจากทบทวนไปแล้วว่า เรามี Animation อะไรบ้าง ทีนี้เราจะมาควบคุมมัน ให้หันซ้าย หันขวา แล้วดึงแอนนิเมชั่นการวิ่งมาใช้ เริ่มกันเลย!!

เลือก Input : Keyboard > กด Insert

คลิกที่ Tab Event sheet1 : คลิก Add event

คลิกที่ Sprite (Player) เพื่อเป็นการกำหนด Event
*** ชื่อ Sprite6 เพราะผมทำ Sprite เข้าไปหลายตัว ตัวเลขไม่ตรงกัน ก็ไม่ต้องตกใจนะ ^^***

เลือกไปที่ Platform : Animation Trigger > On moved

คลิกที่ Add action

คลิกที่ Sprite(Player)อีกครั้ง แต่ครั้งนี้เป็นการ กำหนด Action เสร็จแล้ว กำหนดให้ Animation : Start (เริ่มต้น)

แล้วเลือกเป็นแบบ Current Frame แล้วกดปุ่ม Done

การ Set Platform จะแสดงผลตามภาพ ตอนนี้เราบอกโปรแกรมแล้วว่า เราจะใช้ Platform เมื่อเคลื่อนที่ ให้เริ่มที่ Frame ปัจจุบัน ลอง Run ดูนะครับ

ผลที่ได้คือ ก็ยังเหมือนเดิม อยู่ดี อิอิ อ่ะงั้นมาทำต่อครับ ยังไม่เสร็จ

ให้ Add Keyboard Event กันก่อน ที่ Tab Layout1 > ดับเบิ้ลคลิกที่พื้นที่ว่างๆ ตามภาพ

เลือก Input : Keyboard > กด Insert

คลิกที่ Tab Event sheet1 : คลิก Add event

คลิกที่ Add event : Keyboard

ดับเบิลคลิกที่ Add event : Key is down

กำหนด Parameters คลิกตามภาพ

กดลูกศรซ้าย 1 ครั้ง ให้โปรแกรมบันทึก Key ที่เราจะใช้ควบคุมการเคลื่อนที่ไปทางซ้าย แล้วคลิก Ok

คลิกที่ Add action > เลือกไปที่ Sprite(Player)

Set Animations ให้ Sprite(Player)

พิมพ์คำว่า Left ระหว่าง Double quote (ฟันหนู) เป็น “Left” (Left มาจากไหน มาจากชื่อ Animation ที่ผมตั้งไว้ Default, Left, Right ครับ)

เอาละครับ หลังจากนี้ ผมให้เป็นแบบฝึกหัด พยายามเซ็ตให้เหมือนกับภาพด้านล่างนี้ แล้วลอง Run เกมส์ดูครับ

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

ผมเชื่อว่าตอนนี้ ทุกคนจะสามารถควบคุม Player กันได้แล้วนะครับ ทั้งเดิน ซ้าย เดินขวา หรือกระโดด ใน Part ต่อไป เราจะลองทำ Monster มาเดินเพ่นพ่านกัน แล้วตามด้วยการยิงกระสุน Bullet ใส่ Monster พร้อมกับขึ้น Score ด้วยว่ายิงไปกี่ตัวกี่คะแนน 555+ นอนดีฝ่า =_=’

ขอให้สนุกกับการสร้างเกมส์ครับ

ตัวอย่าง การควบคุมทิศทาง player

Related Articles


About the author

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

Website : http://www.unicornmax.com

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

Twiter :


  1. August 18th, 2012 at 23:27 | #1

    รออ่านครับ ดีมากเลย

  1. No trackbacks yet.