การสร้างหน้า Scene

#HelloGameDev #HelloErmine #HelloWorld2021

การสร้างหน้า Scene มีลำดับขั้นตอน ดังนี้

1.กดคลิกขวาที่ folder scenes --> New File

2.ตั้งชื่อไฟล์ให้สอดคล้องกับ scene ที่เรากำลังจะสร้างขึ้นมา เช่น MainMenu, Stage1 และตั้งนามสกุลไฟล์เป็น .js

โดยตัวอย่างที่เราจะทำนั้นคือ Scene MainMenu.js

3.จากนั้นวางโครงสร้างของ Phaser เปลี่ยน element ในโค้ดของเรา (แนะนำให้เปลี่ยนให้เหมือนชื่อไฟล์เพื่อความไม่สับสนเวลาเรียกใช้) โดยที่

• เปลี่ยนชื่อ class

• เปลี่ยน key ใน constructor ให้ไม่เหมือนใครเพื่อบอกถึง scene ของเรา

• เปลี่ยนค่าตรง export default

import Phaser from "phaser";
class MainMenu extends Phaser.Scene {  //เปลี่ยนชื่อ Class เป็น MainMenu
    constructor(test) {
        super({
            key: 'MainMenu'  //กำหนด Key ใน Constructor ให้เป็น MainMenu
        });
    }

    preload() {
        
    }

    create() {
        
    }
    
    
    update() {
        
    }
}

export default MainMenu;  //เปลี่ยนค่าตรง export default ให้เป็น MainMenu

ให้น้อง ๆ เปลี่ยนชื่อ Class, Key เเละ export default ให้เป็นชื่อ Scene ที่น้อง ๆ สร้างได้เลย

ในตัวอย่างเป็นการสร้าง Scene ที่ชื่อว่า MainMenu เราจึงเปลี่ยนชื่อ Class, Key เเละ export default ให้เป็น MainMenu

4.ไปที่ไฟล์ main.js และ import ไฟล์ scene ที่เราเพิ่งสร้างใหม่เข้ามา

5.เพิ่ม scene ของเราใน scene

import 'phaser';
import Phaser from 'phaser';
import GameOver from './scenes/GameOver';
import MainMenu from './scenes/MainMenu';  //import ไฟล์ scene ที่เราเพิ่งสร้างใหม่เข้ามา
import GameScene from './scenes/GameScene';
import Tutorial from './scenes/Tutorial';

const config = {

    type: Phaser.WEBGL,
    pixelArt: true,
    roundpixels: true,
    parent: 'content',
    width: 1280,
    height: 720,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
                //gravity: {y:300}
        }
    },            
    scene: [
        MainMenu,  //เพิ่ม scene ที่เราเพิ่งสร้างใหม่
        Tutorial,
        GameScene,
        GameOver
    ],

ระวังลำดับการเขียนด้วย ต้องเขียนก่อนจะใช้ Scene นั้น

เพียงแค่นี้เราก็สร้าง Scene ที่พร้อมใช้เสร็จเรียบร้อยยย 🤗