Phaser3-project-template

我們調整一下之前 「Tiled Map Editor」所做出來的畫面，並匯出 json 檔。接著對 player 加上之前我們在 Tiled Map Editor Blocked 碰撞的事件。

我們這邊先分一下檔案 ~~~

// config.js phaser 基本設定
import 'phaser'
export default {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 640,
    height: 640,
    pixelArt: true,
    roundPixels: true,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
            gravity: { y: 0 }
        }
    }
}

// index.js

import 'phaser'
import config from ‘./config'     // 載入 config 設定
import GameScene from ‘./Scenes/Game’。 // 載入 game
import LoadingScene from ‘./Scenes/Loading'  // 載入 loading
class Game extends Phaser.Game {
  constructor() {
    super(config)
    this.scene.add('Loading', LoadingScene)
    this.scene.add('Game', GameScene)
    this.scene.start('Loading')
  }
}
window.game = new Game()

// loading.js

import 'phaser'
export default class BootScene extends Phaser.Scene {
    constructor(key) {
        super(key)
    }

    preload() {
    .....
    // 載入 player
        this.load.spritesheet('player', 'assets/player.png', {
            frameWidth: 48,
            frameHeight: 48
        })
    }

    create() {
        this.scene.start('Game')
    }
}

// game.js

import 'phaser'
import Player from '../Sprites/Player'
export default class GameScene extends Phaser.Scene {
    constructor(key) {
        super(key)
    }

    create() {
        this.createMap()
        this.createPlayer()
        this.cursors = this.input.keyboard.createCursorKeys()
        this.addCollisions()    // 碰撞
    }

    update() {
        this.player.update(this.cursors)
    }

    addCollisions() {
        // player 與在 Tiled Map Editor 製作 Blocked 圖層，增加觸碰
        this.physics.add.collider(this.player, this.blockedLayer)
    }

    createPlayer() {
        this.map.findObject('Player', obj => {
            if (obj.type === 'StartingPosition') {
                this.player = new Player(this, obj.x, obj.y)
            }
        })
    }

    createMap() {
        // create the tilemap
        this.map = this.make.tilemap({ key: 'level' })
        // add tileset image
        this.tiles = this.map.addTilesetImage('RPGpack_sheet')
        // create our layers
        this.backgroundLayer = this.map.createStaticLayer(
        'Background',this.tiles, 0, 0)
        this.blockedLayer = this.map.createStaticLayer('Blocked', this.tiles, 0, 0)
        this.blockedLayer.setCollisionByExclusion([-1])
    }
}

// player.js

import 'phaser'
export default class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'player', 0)
        this.scene = scene
        this.scene.physics.world.enable(this)
        this.scene.add.existing(this)

        // player 操作動畫
        this.scene.anims.create({
            key: 'walking',
            frames: this.scene.anims.generateFrameNames('player', {
            frames: [1, 2]}),
            frameRate: 10,
            yoyo: true,
            repeat: -1
        })
    }

    update(cursors) {
        this.body.setVelocity(0)
        if (cursors.up.isDown) {
            this.body.setVelocityY(-100)
            if (!this.anims.isPlaying) {
                this.anims.play('walking')
            }
        } else if (cursors.down.isDown) {
            this.body.setVelocityY(100)
            if (!this.anims.isPlaying) {
                this.anims.play('walking')
            }
        } else if (cursors.left.isDown) {
            this.body.setVelocityX(-100)
            this.flipX = true
            if (!this.anims.isPlaying) {
                this.anims.play('walking')
            }
        } else if (cursors.right.isDown) {
            this.body.setVelocityX(100)
            this.flipX = false
            if (!this.anims.isPlaying) {
                this.anims.play('walking')
            }
        } else {
            this.body.setVelocity(0)
            this.anims.stop('walking')
            this.setFrame(0)
        }
    }
}

結論

今天 player 加上在 Tiled Map Editor Blocked 所新增的物件，做碰撞的對應。也加入之前所練習過的 player 操作動畫 ~~

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