Last-Modified: {docsify-updated}

phaser3

當前已使用到了 phaser v3.55.2 版本

暫時未更新文檔內容，有問題可以直接問我

以下文檔是我在 phaser v3.16 以前整理的: (可能很多已不堪使用了)

中國官網鏡像: http://api100.net/phaser3/

學習 phaser3

2018/06/19 更新: 官方文檔已更新許多…所以這邊暫時不繼續寫

step1 創建遊戲

// 看了官方的教學文檔: https://phaser.io/tutorials/making-your-first-phaser-3-game
// 文檔似乎不完整!? 看不懂 >"<
// 這裡直接貼 code 說明

// 創建遊戲
// https://github.com/photonstorm/phaser/blob/master/src/boot/Config.js
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        // 一個場景的生命週期
        preload: function () {
            // 預加載
        },
        create: function () {
            // 建立時
        },
        update: function () {
            // 每次更新時 執行
        }
    }
};
// 補充說明 scene: array<Scene> or Scene
// 如果是 array, 第一個將當作預設 Scene

// https://github.com/photonstorm/phaser/blob/master/src/boot/Game.js
var game = new Phaser.Game(config);

// 如果不在 config 裡 添加 scene, 可以使用場景管理器
// game.scene = Phaser.Scenes.SceneManager (可以從 Game.js 看出來)
// api: https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.SceneManager.html#methods
game.scene.add('init', InitScene, true)

step2 場景

// 以 InitScene 為例
// https://github.com/photonstorm/phaser/blob/master/src/scene/Scene.js
import Phaser from 'phaser'
import { ajax } from '@/helper'

import Text from '../component/Text.js'

export default class InitScene extends Phaser.Scene {
  constructor (config) {
    // https://github.com/photonstorm/phaser/blob/master/src/scene/Settings.js
    super(config)
  }

  preload () {
    // 要加載的資源
    // this.load = Phaser.Loader.LoaderPlugin
    // https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html#methods
    this.load.image('key', 'path/to/xxx')
  }

  create () {
    let config = this.cache.game.config

    // this.add = Phaser.GameObjects.GameObjectFactory
    // https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#methods
    let cover = this.add.image(0, 0, 'key')
    let text = this.add.text(0, 0, '遊戲開始', {})

    // 將 cover 以遊戲畫布，置中
    // https://github.com/photonstorm/phaser/blob/master/src/display/align/in/Center.js
    Phaser.Display.Align.In.Center(cover, this.add.zone(config.width / 2, config.height / 2, config.width, config.height))

    // 將 text 放在 cover 的上方 - 中間，並且 偏移 y 值 -985...
    Phaser.Display.Align.In.TopCenter(text, cover, 0, -985)

    // next scene
    this.scene.start('ready')
  }
}

step3 官方 examples https://github.com/photonstorm/phaser3-examples

看完 step1 & step2 以後就會發現…直接看 source code 可能會詳細一些

ease map: https://github.com/photonstorm/phaser/blob/master/src/math/easing/EaseMap.js

known-issues