PixiJS V5 教學 (39) - 音樂

前言

接下來這一篇來介紹開發一個遊戲非常重要的元素，也就是音樂。

遊戲音樂

Pixi 本身是有開發支援音樂的，叫做 Pixi-Sound，連結在這邊。

實際的使用方式也非常的簡單易懂，官方也有提供相關範例的文件可以查看，只需要使用以下程式碼以及一個音檔就可以播放

const sound = PIXI.sound.Sound.from('resources/boing.mp3');
sound.play();

接下來就來實際應用吧！

加入到寶藏獵人中

接下來我將會使用前面章節所製作的寶藏獵人遊戲來加入音樂

Pixi-Sound 要加入的方式很簡單可以直接掛載 CDN 即可

https://github.com/pixijs/pixi-sound/releases/download/v3.0.4/pixi-sound.js

基本上你可以透過這裡取得。

加入的方式也很簡單，這邊我就直接加入官方網站所提供的音樂檔案即可

function init() {
  const sound = PIXI.sound.add('music', 'https://raw.githubusercontent.com/pixijs/pixi-sound/master/examples/resources/musical.mp3');
  sound.play();
  ...
}

但是單純這樣子你會發現一個問題，音樂只會播放一次，但是通常來講音樂是 loop 的，所以要再稍微修改一下

const sound = PIXI.sound.add('music', 'https://raw.githubusercontent.com/pixijs/pixi-sound/master/examples/resources/musical.mp3');
sound.play({
  loop: true,
});

此時你應該會發現音樂就不會停止了，其他部分就不多作介紹，可以透過官方 API Doc 來了解唷~

以下這邊我就直接放上結果~

參考文獻

• [17- Pixi教學] 音樂音效設定
• Pixi Sound