/

Phaser：動畫

Phaser：動畫

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

在创建精靈後播放動畫：

1
2
3
4
5
6
7
function preload() {
 this.load.sprite('dog', 'dog.png')
}

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

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

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

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

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

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

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

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

要開始播放動畫，必須調用以下代碼：

1
this.ship1.play('ship1_anim')

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

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

1
2
repeat: 0,
hideOnComplete: true

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

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

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