Phaser3入門教程：第一個Phaser3遊戲（中文版）（五）
- 加入角色
有了這些可愛的平臺，怎麼能沒人在上面跑動呢？
在create函式中，新建一個player變數，程式碼參看part5.html：
|
player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); |
這段程式碼可分為兩個部分來看：
- 建立一個精靈體
- 建立該精靈的動畫效果
精靈體
第一部分建立精靈體的程式碼：
|
player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); |
這裡建立了一個叫player的精靈體，定位在螢幕下部(100,450)的位置。精靈通過建構函式（this.physics.add）建立，預設建立的是一個動體。
然後我們給精靈賦予一個較小的彈力值0.2。這樣精靈落地是會輕微彈起一點。接著我們設定精靈會和場景的邊沿碰撞，預設邊界就是遊戲場景的邊界，前面我們設定為了（800x600）大小，精靈將不會跑到這個邊界之外，如果跑到邊界它會停住，也不會跳出場景上部。
動畫
你是否還記得在preload函式中，’dude’是以精靈表的方式載入的，而不是圖片。因為它包含了動畫的每一幀影象，一個完整的精靈表看起來是這樣的：
表中總共有9幀畫面，4幀向左跑的，一幀正面的，4幀向右跑的。注：Phaser是支援翻轉幀畫面的，但在這個教程中，我們還是用比較呆板的方法。
我們定義了兩個動畫，分別叫‘left’和‘righr’。下面是向左跑的動畫：
|
this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); |
向左的動畫使用了第0,1,2和3幀，幀率是每秒10幀。‘repeat -1’的意思是迴圈播放動畫。
這是一個標準的動畫週期，它持續在一個方向上迴圈播放，當我們們按下‘右’鍵時會轉向。
補充知識：在Phaser 3中，動畫是貫穿全域性的。我們建立的是一個全域性的動畫物件。可以在任意時候管理動畫資料。你可以只建立一次動畫就可在整個程式中使用它，這一點是和Phaser 2有很大的不同的。