我們來給我們「打磚塊」加一些音效讓他玩起來更舒服吧！！

Photo by bruce mars on Unsplash

聲音設定

跟物理引擎一樣，我們要在 config 裡面設定聲音的引擎。

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  audio: {
    disableWebAudio: true,
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: {},
      debug: false,
    },
  },
  scene: [menu]
};

載入聲音檔

一樣我們要在有戲裡使用的素材都要載進來，讓我們之後可以調用。

    // 載入音樂素材
    this.load.audio("blockBounce", "./assets/sound/blockBounce.ogg");
    this.load.audio("fall", "./assets/sound/fall.ogg");
    this.load.audio("getProp", "./assets/sound/getProp.ogg");
    this.load.audio("mission", "./assets/sound/mission.ogg");

創建物件

我們一樣要將它創建在我們場景內，跟佈置物件一樣，把他建立進去。

    // 各種音效
    blockBounceSound = this.sound.add("blockBounce");
    fallSound = this.sound.add("fall");
    getPropSound = this.sound.add("getProp");
    // 設定讓他可以循環播放
    missionSound = this.sound.add("mission", { loop: true });

播放音效

接下來我們只要在想播放的地方，執行 play() 的函數，就可以聽到聲音囉！

    // 背景音樂
    missionSound.play();
    ...
    
    
    if (ball.body.y > 600 && !isGameOver) {
      // 球掉落音效
      fallSound.play();
      ...
      
     }


function blockBounce(ball, block) {
  // 打到磚塊的音效
  blockBounceSound.play();
  ...
  
}

function getProp(board, prop) {
  // 獲得道具的音效
  getPropSound.play();
  ...
}

總結

現在我們的遊戲更加豐富了，但是每次輸了都要刷新頁面才能重新來過，最後一個流程設計了，讓我們明天來完成它！

tags: Phaser Game 2020鐵人賽