昨天我們完成了我們的地圖，今天來加上我們的主角吧！

create 加入主角

我們的主角一樣要有物理碰撞的效果，所以一樣要透過 physics 來加入我們的主角，並讓他與場景內有物理碰撞的東西有碰撞的效果。

// 創建 player 物件
player = this.physics.add.sprite(100, 450, "dude");
// 給予 player 物件碰撞的反彈值為 0.2
player.setBounce(0.2);
// 讓 player 與場景的物理碰撞，會撞到邊上
player.setCollideWorldBounds(true);

來幫主角加上移動的偵聽，這裡會利用到先前載入的精靈圖來讓我們的主角走起來有動畫效果，再建立 player 物件之後，為主角加上需要的動畫。

我們可以看到我們的主角精靈圖，總共有 9 個 frame ，所以我們在為他加上動畫的時候，要告訴他我的動畫是從第幾個 frame 到第幾個 frame ，並且是否重複以及播放速度。

// 加上向右移動的動畫
this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),    // 從第 0 個 frame 到第 3 個 frame
    frameRate: 10,    // 每秒 10 個 frame
    repeat: -1    // 重複播放
});
// 加上轉身的動畫
this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],    // 第 4 個 frame
    frameRate: 20    // 每秒 20 個 frame
});
// 加上向左移動的動畫
this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),     // 從第 5 個 frame 到第 8 個 frame
    frameRate: 10,    // 每秒 10 個 frame
    repeat: -1    // 重複播放
});

加上之後你會看到你的主角有和場景的邊邊發生碰撞，但是沒有和你所設置的地形發生碰撞，他們重疊在一起了！！

這時候我們要利用 collider 來幫我們監聽這些物件是否有發生碰撞，要讓這些物件們有物理碰撞的效果，如下：

this.physics.add.collider(player, platforms);

這樣就會看到你的主角扎扎實實地站在地形上了 ：）

加上控制主角的事件

接下來我們來加上控制主角的事件吧！Phaser 裡面有有內建的鍵盤管理器讓我們來使用，我們只要先創建物件即可在 update 裡面來使用它。

cursors = this.input.keyboard.createCursorKeys();

之後在我們的 update 裡面加上他所偵聽的按鍵與執行的方式，即可對我們的主角做操作囉！

if (cursors.left.isDown)     // 向左移動的偵聽
{
    player.setVelocityX(-160); // 每秒 160px 向x負方向移動

    player.anims.play('left', true);    // 播放向左動畫
}
else if (cursors.right.isDown)     // 向右移動的偵聽
{
    player.setVelocityX(160); // 每秒 160px 向x正方向移動

    player.anims.play('right', true);    // 播放向右動畫
}
else     // 不移動的時候轉向正面 
{
    player.setVelocityX(0);

    player.anims.play('turn');    // 播放正面動畫
}

if (cursors.up.isDown && player.body.touching.down)    // 向上跳躍的偵聽
{
    player.setVelocityY(-330); // 每秒 330px 向y負方向移動
}

可惜之處

裡面包裝好的 createCursorKeys 物件裡面只有簡單的按鍵設定，只有 up、down、right、left、shift跟space，其他的按鍵設定要自己設定了，或是使用其他物件來偵聽。

總結

現在我們可以自由移動我們的主角，可以任意地在地形間肆意地奔跑了～開心開心～明天我們會為他加上得分機制與障礙！第一個遊戲範例要結束了 ：）

tags: Phaser Game 2020鐵人賽