Phaser3-project-template

Phaser 3 有提供 template 給大家使用 Phaser 3 Webpack Project Template

環境需先安裝 node，安裝後，在該資料夾 npm i 和 npm start 之後，就會看到以下畫面；今天我們會使用該 template 來練習。

Javascript 內容

preload() {
    // 載入昨天製作的 json 檔案
    this.load.tilemapTiledJSON('level', 'assets/level.json')
    this.load.spritesheet('RPGpack_sheet', 'assets/RPGpack_sheet.png', {
        frameWidth: 64,
        frameHeight: 64
    })
}

create() {
    this.map = this.make.tilemap({ key: 'level' })
    this.tiles = this.map.addTilesetImage('RPGpack_sheet')
    // 昨天使用 Tiled Map Editor 做的 Background 圖層
    this.backgroundLayer = this.map.createStaticLayer('Background', this.tiles, 0, 0)

    // 昨天使用 Tiled Map Editor 做的 Blocked 圖層
    this.blockedLayer = this.map.createStaticLayer('Blocked', this.tiles, 0, 0)
}

結論

今天我們使用到了 Phaser 3 提供一個 template，給開發者使用；並嘗試著把昨天製作出來的 json 檔案匯入到遊戲中。

今天就先到這裡，我們明天見。