今天要來繼續完成角色的設定( •̀ .̫ •́ )✧

接下來要加入角色的架構，如下圖所示

• 檔案名稱的部分一樣可以自己設定，之後直接輸入該檔案名稱時即可套入此角色設定
• 黃框的部分為角色設定的部分，也就是角色的初始設定或特性

那麼就將角色架構寫入吧~(oﾟvﾟ)ノ
程式碼如下(因為這邊是角色設定，所以我檔案名稱設定為Player)

class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y) {
    }
  }

再來我們將角色設定分為兩部分，
分別是：

1. 初始設定
2. 物理特性

初始設定

簡單來說就是角色的初始位置、場景等，之後在各場景能填入相關設定之設定
先來看程式碼：

class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y) {
      super(scene, x, y, "player");
      this.scene = scene;
      scene.add.existing(this);
    }
  }

• super(scene, x, y, "player"); ：將這程式碼輸入後之後就能直接套入此設定做使用，"player"為我們之前在場景匯入圖片時設定的角色圖片名稱，需輸入角色才會顯現。
• this.scene = scene; ：設定場景，之後能夠輸入場景，使角色套入該場景。
• scene.add.existing(this); ：將角色匯入至場景中。
  (在文章的最後會套入設定置場景做舉例，讓大家比較好理解ヾ(•ω•')o)

物理特性

為角色的各項物理特性，本篇將介紹關於彈力與遊戲邊界的設定
程式碼：

      scene.physics.world.enable(this);
      this.setBounce(數值);
      this.setCollideWorldBounds(true or false);

• scene.physics.world.enable(this); ：設定角色會受物理設定影響。
• this.setBounce(數值); ：
  此為角色碰到障礙物時的彈跳設定，數值為0~1，可為小數。0為無彈力，隨著數值的上升彈力越強。除了"1"之外，若不動仍會逐漸停下來，1為絕對反彈。
• this.setCollideWorldBounds(true or false); ：
  角色邊界設定，設定是否角色能跑出遊戲框，設定true時能跑出，false則否。

這邊是加上邊界、彈力的範例畫面：

那來實作吧~(這邊我設定彈力數值為1，邊界設定為true)
這邊是角色設定的程式碼：

class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y) {
      super(scene, x, y, "player");
      this.scene = scene;
      scene.physics.world.enable(this);
      scene.add.existing(this);
      this.setBounce(1);
      this.setCollideWorldBounds(true);
    }
  }

最後一步，將角色加進場景中吧!!o((>ω< ))o

首先先回到場景檔案，然後在create()加入角色設定~
程式碼：

create(){
        this.player=new Player(this,x軸位置,y軸位置);

        this.add.image(  320,170  , 'heart').setScale(1);
        this.add.image(  270,170  , 'heart').setScale(0.5);
        this.add.image(  220,170  , 'heart').setScale(2);

    }

大家可以看到在create()多了一行this.player=new Player(this,x軸位置,y軸位置);
我們設定了this.player變數，將可將角色設定套入。
Player：為角色設定的檔案名稱
this:此場景
x軸位置,y軸位置：為角色出現在畫面中的位置

將程式輸入完畢後就能完成角色的建立了!( •̀ ω •́ )✧
程式碼：

class Scene extends Phaser.Scene{
    constructor(){
        super({ key: "Scene" });
    }
    
    preload(){
        this.load.audio('lose', 'music/lose.mp3');
        this.load.audio('pick', 'music/pick.mp3');

        this.load.image("platform",'assets/platform.png');
        this.load.image("heart",'assets/heart.png');
        this.load.image("lose",'assets/lose.png');
        this.load.image("enemy","assets/c.png");
        this.load.image("coin","assets/coin.png");

        this.load.spritesheet('player','assets/rabbit3 - doux.png',{frameWidth:72 ,frameHeight:72 });
    }
    create(){
        
        this.player=new Player(this,400,165);

        this.add.image(  320,170  , 'heart').setScale(1);
        this.add.image(  270,170  , 'heart').setScale(0.5);
        this.add.image(  220,170  , 'heart').setScale(2);

    }


    update(){

    }
}

完成後畫面如下圖

可以看到角色的出現了喔！也能看到角色因重力而移動與碰到邊界時的彈跳!!

這樣就完成了~
下一步就是來操控我們的角色~敬請期待(●ˇ∀ˇ●)