PixiJS V5 教學 (39) - 音樂
前言
接下來這一篇來介紹開發一個遊戲非常重要的元素,也就是音樂。
遊戲音樂
Pixi 本身是有開發支援音樂的,叫做 Pixi-Sound,連結在這邊。
實際的使用方式也非常的簡單易懂,官方也有提供相關範例的文件可以查看,只需要使用以下程式碼以及一個音檔就可以播放
1 | const sound = PIXI.sound.Sound.from('resources/boing.mp3'); |
接下來就來實際應用吧!
加入到寶藏獵人中
接下來我將會使用前面章節所製作的寶藏獵人遊戲來加入音樂
Pixi-Sound 要加入的方式很簡單可以直接掛載 CDN 即可
1 | https://github.com/pixijs/pixi-sound/releases/download/v3.0.4/pixi-sound.js |
基本上你可以透過這裡取得。
加入的方式也很簡單,這邊我就直接加入官方網站所提供的音樂檔案即可
1 | function init() { |
但是單純這樣子你會發現一個問題,音樂只會播放一次,但是通常來講音樂是 loop 的,所以要再稍微修改一下
1 | const sound = PIXI.sound.add('music', 'https://raw.githubusercontent.com/pixijs/pixi-sound/master/examples/resources/musical.mp3'); |
此時你應該會發現音樂就不會停止了,其他部分就不多作介紹,可以透過官方 API Doc 來了解唷~
以下這邊我就直接放上結果~