วันนี้ผมมาแนะนำวิธีการใช้งาน Phaser3 บน Ionic 5 ครับ
Ionic เป็น open-source framework สำหรับใช้พัฒนา mobile application ด้วยเทคโนโลยีเว็บซึ่งประกอบไปด้วย HTML, CSS, และ Javascript โดยสามารถที่จะ build และ deploy ข้ามหลายแพลตฟอร์ม (across multiple platforms) ได้ทั้ง iOS และ Android
Phaser คือ game framework สำหรับพัฒนาเกม 2D ด้วย HTML5 และ Javascript โดยสามารถแสดงผลได้บน Web Browser ต่างๆ
npm install -g ionic
สร้าง ionic โปรเจทใหม่ตั้งชื่อว่า ionic-phaser
ionic start ionic-phaser --type=angular blank
จากนั้น ตอบ y เพื่อติดตั้ง Capacitor
ต่อมาเข้าไปใน folder ionic-phaser และ รันเพื่อทดสอบโปรเจท
cd ionic-phaser; ionic serve
จะปรากฎหน้าจอบน Browser ดังต่อไปนี้
● คลิ๊กขวา > Inspect
● กดที่ Toggle device toolbar (อยู่ขวาบนอยู่ข้าง Element) > จากเลือก Device ที่ต้องการ เช่น IPhoneX
npm i phaser
ตั้งค่าเพิ่มเติมโดยแก้ไขที่ tsconfig.json ดังนี้
● เพิ่ม "scripthost" ที่ lib
● เพิ่ม "allowSyntheticDefaultImports": true
และแก้ไขไฟล์ src\index.html โดยเพิ่มคำสั่งในส่วนของ <head≷ดังนี้
ในตัวอย่างนี้ผมจะโหลดรูปจำนวน 3 รูป ประกอบด้วย
● รูป logo
https://it.rsu.ac.th/th/images/logoIT.png
● รูปพื้นหลัง
https://examples.phaser.io/assets/pics/lazur_skkaay3.png
● รูปซอมบี้
https://examples.phaser.io/assets/sprites/metalslug_mummy37x45.png
จากนั้น unzip นำรูปทั้ง 3 ไปวางไว้ที่ src\assets ดังนี้
แก้ไขส่วนแสดงผลท่ีไฟล์ src\app\home\home.page.html ดังนี้
แก้ไขคำสั่งท่ีไฟล์ src\app\home\home.page.ts ดังนี้
จากนั้นจะได้ผลลัพธ์ดังต่อไปนี้
กำหนดค่าเริ่มต้นของ app ด้วยคำสั่ง npx cap init [ชื่อapp] [bundle id] ดังนี้
npx cap init ionicphaser com.thannob.ionicphaser
build โปรเจค ดังนี้
ionic build
เพิ่ม Platform iOS และ Android ดังนี้
npx cap add ios
npx cap add android
จากนั้นเปิดโปรเจคด้วยคำสั่งต่อไปนี้
npx cap open ios
npx cap open android
จากนั้นเมื่อรันบน Xcode และ Android Studio จะได้ผลลัพธ์ดังต่อไปนี้
สามารถโหลด code ที่ gitlab นี้ได้ครับ https://gitlab.com/thannob/ionic-phaser
สุดท้ายนี้หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อยนะครับ
[Updated: 27/12/63] ถ้ามีคนสนใจมากๆ เดี๋ยวเขียนบทความทำเกมสั้นๆซักเกมดีไหมครับ? ^^
บทความโดย อ.ผศ.ดร.ธรรณพ อารีพรรค
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต