》Sprite sheet
這次我們沒有要用 load.image() 來載入圖片，我們將使用 load.spritesheet 來載入一張精靈圖片，尺寸為 240 x 110，並用 keyboard 讓他動起來。

》素材

》Javascript 內容

scene.preload = function() {
    .....
    this.load.spritesheet('man', 'assets/man.png', {
        frameWidth: 80,				// 每幀圖片的寬 240 / 3
        frameHeight: 110			// 高度
    })
}

scene.create = function() {
    this.man = this.add.sprite(50, 255, 'man', 0)

    // 創建正面 anims
    this.anims.create({
        key: 'turn'
        frames: [{ key: 'man', frame: 0 }],
        frameRate: 10
    })

    // 創建像右走 anims
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('man', { start: 1, end: 2 }),
        frameRate: 10,
        repeat: -1
    })

    this.keyboard = this.input.keyboard.createCursorKeys()
}

鍵盤操作動畫

scene.update = function() {
    if (this.keyboard.right.isDown) {
        this.man.x += 2
        this.man.anims.play('right', true)
    } else {
        this.man.anims.play('turn')
    }
}

》結論
今日學到用 sprite sheet 載入多幀的圖片，大家可以試著做一張 sprite sheet 載入試試看。

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