---
description: '#HelloGameDev #HelloErmine #HelloWorld2021'
---

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

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

&#x20;  **1.กดคลิกขวาที่ folder scenes --> New File**

![](https://lh4.googleusercontent.com/gEsinojYcP-H5XSKMl-DbGskQZsS9RzlqiHKMn6II3gR79c4G4cLTmKwO__QQ-ILv6UNA6donam6oSuDaqFqrgfHkbtAmlC7NewTFkYbH3WcQT0DHd0CTONHgDaLm1pjPMaCmvo)

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

![โดยตัวอย่างที่เราจะทำนั้นคือ Scene MainMenu.js](https://lh6.googleusercontent.com/hzLpAliIMKVIS8NwvEq51YovZP_7kyCbx7YPb8-RUoaZb_6RbuhtAtNH3MrzxRcfMLnfR0jXcIpNVNgz6FMlgwjFTsJYP7wYOLgjVWqYV-SK_jUwgr74Ax-9mS-nRiSl7luudX4)

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

* เปลี่ยนชื่อ class
* เปลี่ยน key ใน constructor ให้ไม่เหมือนใครเพื่อบอกถึง scene ของเรา
* เปลี่ยนค่าตรง export default

```javascript
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
```

{% hint style="info" %}
ให้น้อง ๆ เปลี่ยนชื่อ Class, Key เเละ export default ให้เป็นชื่อ Scene ที่น้อง ๆ สร้างได้เลย
{% endhint %}

{% hint style="warning" %}
ในตัวอย่างเป็นการสร้าง Scene ที่ชื่อว่า MainMenu เราจึงเปลี่ยนชื่อ Class, Key เเละ export default ให้เป็น MainMenu
{% endhint %}

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

&#x20;         **5.เพิ่ม scene ของเราใน scene**&#x20;

```javascript
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
    ],
```

{% hint style="danger" %}
ระวังลำดับการเขียนด้วย ต้องเขียนก่อนจะใช้ Scene นั้น
{% endhint %}

{% hint style="success" %}
เพียงแค่นี้เราก็สร้าง Scene ที่พร้อมใช้เสร็จเรียบร้อยยย :hugging:
{% endhint %}
