這篇文章是 Phaser 系列的一部分。點擊這裡查看系列文章的第一篇。

在创建精靈後播放動畫:

function preload() {
 this.load.sprite('dog', 'dog.png')
}

function create() {
 this.add.sprite(400, 200, 'dog')
}

首先必須加載一個精靈表。

精靈表是包含在單個圖像中的不同精靈集合。

這裡使用一張圖像,告訴 Phaser 每個圖像的寬度和高度。在這個例子中是 20x20 像素:

this.load.spritesheet('dog', 'dog.png', {
 frameWidth: 20,
 frameHeight: 20
})

完成之後,可以使用 this.anims.create() 來生成一個動畫:

this.anims.create({
 key: 'animate_dog',
 frames: this.anims.generateFrameNames('dog'),
 frameRate: 20,
 repeat: -1
})

在這裡我們指定使用精靈表的圖像,以每秒 20 幀的速度播放,並且永遠循環。

要開始播放動畫,必須調用以下代碼:

this.ship1.play('ship1_anim')

這個動畫將始終循環播放。

還可以只執行一次動畫,並在動畫完成後隱藏精靈表,只要添加這些選項:

repeat: 0,
hideOnComplete: true

而不是遍歷精靈表中的所有圖像,還可以遍歷其中的一部分圖像:

frames: this.anims.generateFrameNames('dog', {
 start: 0,
 end: 2
})

這在擁有包含多個物件的大型精靈表時特別有用。