[Phaser 3]ลองทำ Joystick แบบ ROV กันเถอะ 🤖🕹

อยากทำ joystick เหมือน rov อะ เขาทำยังไงกันนะ

สำหรับคนมีเวลาอ่านน้อย ⏱

บทความนี้จะพาทำ Virtual Joystick แบบเกม ROV โดยมีเครื่องมือดังนี้

• ใช้ Phaser Version 3 ในการพัฒนา
• ใช้ Phaser 3 ES6 Starter Template จาก https://github.com/yandeu/phaser-project-template-es6
• ใช้​ Plugin ชื่อว่า rexvirtualjoystickplugin ในการทำ

กด 🔖 (Bookmark) ไว้อ่านทีหลังกันได้ถ้าไม่มีเวลา
ใครอยากเข้าใจมากขึ้นเริ่มอ่านบทความนี้ได้เลย 👇🏻

หลายคนที่หลงเข้ามาในบล็อกนี้คงจะเป็นคนที่สนใจเกี่ยวกับเกม การทำเกม หรือชอบเล่นเกมกัน เจ้าของบล็อกก็เป็นคนหนึ่งที่ชอบเล่นเกมเหมือนกันค่ะ ซึ่งเกมที่เจ้าของบล็อกกำลังติดและเลิกเล่นไม่ได้ในตอนนี้ก็คือ ROV เคยสงสัยกันไหมคะว่า JoyStick แบบ ROV เนี่ยเขาทำอย่างไรกันนะ วันนี้เราจะพาทุกคนไปดูกันค่ะ (อาจจะไม่ใช่เป๊ะ ๆ แต่ก็ไอเดียแนวเดียวกันน้าาาาา)

แนะนำเครื่องมือที่ใช้ 🛠

Phaser คืออะไรกันนะ 🤔

Phaser คือ Framework ตัวหนึ่งที่ใช้การสร้างเกมที่สามารถเล่นได้ทั้ง Desktop และ Mobile เพราะมันคือ HTML5 ที่แสดงผลผ่าน Web Browser นั่นเอง

สิ่งที่ต้องเตรียมก่อนลงมือทำ 👩🏻‍💻

• Basic JavaScript
• Visual Studio Code

โจทย์สำหรับวันนี้ก็คือออ 👀✨

อยากจะทำ joystick แบบ rov แบบนี้จังเลย 👇🏻 มันทำอย่างไรกันนะ

มาลงมือทำกันเถอะ 😇

1. Clone Template จากลิงก์ด้านล่าง

git clone https://github.com/yandeu/phaser-project-template-es6.git phaser3-game

2. หลังจาก Clone Project ให้เปิดโปรเจกต์ติดตั้ง Package ต่าง ๆ ด้วยคำสั่ง

npm install

3. Run Project ด้วยคำสั่ง

npm start

4. จะได้ผลลัพธ์ดังนี้

5. แนะนำ Folder ใน Source

Src

• assets — สำหรับเก็บรูปภาพ icon ต่าง ๆ
• script — สำหรับเก็บคำสั่งที่ใช้การสร้างเกม
• object — ไว้สำหรับสร้าง object class สำหรับ sprite ขึ้นมา
• scene — สำหรับเขียน logic เกม
• game.js — เป็นไฟล์ config ของเกม
• index.html — ใช้ในการแสดงผลเกม

6. แก้ไขไฟล์ config ของเกมเพื่อให้รองรับกับหน้าจอแนวนอน

7. อธิบายส่วนประกอบของการสร้างเกม

• preload ซึ่งเป็นฟังก์ชันที่จะถูกเรียกทำงานก่อนทุกฟังก์ชัน ซึ่งจะในในการ Load Assets ต่าง ๆ ที่ใช้ในการทำเกมไว้ก่อน เช่น

• create ฟังก์ชัน create ที่อยู่ในไฟล์นี้ จะทำงานหลังจาก preload ทำงานเสร็จ มีไว้เพื่อเรียก assets ที่เราโหลดทิ้งไว้ใน preload ขึ้นมาแสดงทางหน้าจอ เช่น

• update ฟังก์ชันนี้จะทำงานตลอดเวลา เพื่อรอรับการเปลี่ยนแปลงต่าง ๆ ของเกมเรา เช่น การรอรับอินพุตของผู้ใช้เวลาเคลื่อนที่ คลิกเมาส์ เป็นต้น

8. เตรียม assets สำหรับการทำ joystick

Download Assets ไว้เลยค่ะ 😄

หน้าตาของ joystick ของเราเมื่อประกอบกันแล้ว

แบ่ง Assets ของ Joystick ดังนี้

• controller.png — สำหรับเป็นตัวควบคุมการเดินตรงกลาง เพื่อให้ขยับตอนควบคุมผู้เล่น

• base.png — เป็น Base ของ Controller

• player.png — เป็นตัวผู้เล่นที่เราจะให้เคลื่อนที่

9. เตรียมโหลด Assets ใน preload เพื่อไปไว้ใช้แสดงผลออกทางหน้าจอกัน

10. เรียกใช้ Assets ที่เราโหลดไว้ใน preload() มาแสดงผลผ่านทางหน้าจอด้วยฟังก์ชัน create() แบบนี้

จะได้ผลลัพธ์ดังนี้

11. เริ่มทำ Virtual Joystick

ด้วยการ Download Plugin ที่มีชื่อว่า phaser3-rex-plugins ด้วยคำสั่ง

npm i phaser3-rex-plugins

12. เรียกใช้ที่ plugin ที่ไฟล์ game.js แบบนี้

13. เรียกใช้ joystickPlugin ที่ไฟล์ mainScene.js

เรียกใช้ joystickPlugin ที่ไฟล์ mainScene.js ในฟังก์ชัน renderJoyStick

14. ทำให้ Player เคลื่อนไหวตอนที่เรา move controller

ซึ่งขั้นตอนนี้เราจะเขียนไว้ที่ฟังก์ชัน update() เพราะเป็นฟังก์ชันสำหรับรอรับ Input ของผู้ใช้ แบบนี้

15. ผลลัพธ์ที่ได้

จะเห็นว่าตอนนี้ Player ของเราได้บินออกจาก Game World ใน Physics แบบ Arcade สามารถเพิ่มใส่โค้ดอีกนิดนึงก็จัดการในส่วนนี้ได้แล้ว นั่นคือการเพิ่มคำสั่งให้กับ player แบบนี้

this.player.setCollideWorldBounds(true)

เพียงเท่านี้เราก็สามารถทำให้ Player ไม่วิ่งออกจากหน้าจอของเราแล้วค่ะ

มาดูผลลัพธ์อีกครั้งกัน

ตัวอย่างโค้ด 🤯

Jiidapa/try-virtual-joystick

สรุป 😉

Framework สำหรับการทำเกมก็มีให้เลือกลองเล่นหลายตัวเลยค่ะ ส่วนตัวที่เลือกลองเขียน Phaser นั่นเพราะว่ามีพื้นฐาน JavaScript มาอยู่แล้วคิดว่าน่าจะเรียนรู้ได้ง่าย และก็เจ้าของบล็อกเป็นมือใหม่ในการทำเกมค่ะ หากผิดพลาดตรงไหนไป แนะนำได้นะคะ 😊 หวังว่าทุกคนจะสนุกได้ลองทำตามและเอาไปต่อยอดทำเกมเพิ่มเติมได้นะคะ

อย่าลืม 👏 (Claps) และ 🔖 (Bookmark) บทความนี้ไว้อ่านทีหลังด้วยนะ

References 📚

Phaser — A fast, fun and free open source HTML5 game framework

yandeu/phaser-project-template-es6

Devahoy | สอนสร้างเกม HTML5 ด้วย Phaser Framework

https://codepen.io/samme/pen/xxwvVmz