การใช้ Phaser 3 บน Ionic 5 สำหรับการพัฒนาเกมบน IOS และ Android

วันนี้ผมมาแนะนำวิธีการใช้งาน Phaser3 บน Ionic 5 ครับ

Ionic

Ionic เป็น open-source framework สำหรับใช้พัฒนา mobile application ด้วยเทคโนโลยีเว็บซึ่งประกอบไปด้วย HTML, CSS, และ Javascript โดยสามารถที่จะ build และ deploy ข้ามหลายแพลตฟอร์ม (across multiple platforms) ได้ทั้ง iOS และ Android

Phaser

Phaser คือ game framework สำหรับพัฒนาเกม 2D ด้วย HTML5 และ Javascript โดยสามารถแสดงผลได้บน Web Browser ต่างๆ

ติดตั้ง ionic 5

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

ติดตั้ง Phaser 3

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

https://tinyurl.com/y783rd5p

จากนั้น unzip นำรูปทั้ง 3 ไปวางไว้ที่ src\assets ดังนี้

เริ่มใช้งาน Phaser

แก้ไขส่วนแสดงผลท่ีไฟล์ src\app\home\home.page.html ดังนี้

แก้ไขคำสั่งท่ีไฟล์ src\app\home\home.page.ts ดังนี้

จากนั้นจะได้ผลลัพธ์ดังต่อไปนี้

Build เป็น Platform iOS และ Android

กำหนดค่าเริ่มต้นของ 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] ถ้ามีคนสนใจมากๆ เดี๋ยวเขียนบทความทำเกมสั้นๆซักเกมดีไหมครับ? ^^

บทความโดย อ.ผศ.ดร.ธรรณพ อารีพรรค

วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต