สร้างเกมส์ด้วย HTML5 ง่ายๆ (part2-3)
Jul 26th
สร้าง 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
รออ่านครับ ดีมากเลย