基本介紹

我們可以利用 Phaser 的 Game 物件來創造場景，並且給他config參數來設定它。

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 800,
    scene: {
        init,
        preload,
        create,
        update
    }
}

var game = new Phaser.Game(config);

config 裡面可以給予一些參數：

1. type：設定你渲染的context，可以設定為Phaser.CANVAS、Phaser.WEBGL或Phaser.AUTO，建議使用Phsaer.AUTO，他會自動嘗試 WebGL，但是如果瀏覽器不支持 WebGL，則他會轉換成 canvas。
2. width：設定 canvas 的寬度。
3. hieght：設定 canvas 的高度。
4. scene：一個物件，可以給予init、preload、create、update 對應的 function ，用來控制 canvas 。
5. physics：設定場景內的重量變化。

生命週期 init 函數

可以在這裡定義一些自定義的東西，如果沒有什麼要自己加上去的話可以不給沒關係唷～

function init() {
    console.log('init')
}

生命週期 preload 函數

可以在這裡預先載入我們所會用到的圖片、音檔，並且給予他對應的 key 值，這樣就就可以在控制的時候調用他們囉！

function preload() {
    this.load.image('bg','assets/bg.png')
    this.load.audio('bgMusic','assets/bgMusic.mp3')
}

生命週期 create 函數

可以在這裡佈置我們的場景、人物、以及一些物品，可以將他們設定在場景內。

function create() {
    this.add.image(400,300,'bg')
    this.sound.play('bgMusic',{start: 1, duration: 2.0})
}

生命週期 update 函數

可以在這裡做控制處理以及場景的變換或是物件移動...等等，主要的控制都在這裡。

function update() {
    ...
}

總結

基本介紹都結束囉！相信大家都磨刀霍霍，準備好了吧！明天開始挑戰我們的第一個遊戲～

tags: Phaser Game 2020鐵人賽