PixiJS V5 教學 (39) - 音樂

發表於 2020-11-02 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

遊戲音樂

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

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

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

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 來了解唷~

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

前言

遊戲音樂

加入到寶藏獵人中

參考文獻