PixiJS V5 教學 (39) - 音樂

前言

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

遊戲音樂

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

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

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

接下來就來實際應用吧!

加入到寶藏獵人中

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

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

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

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

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

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

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

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

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

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

參考文獻