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



PixiJS Sound

PixiJS本身有開發可供使用的PIXI.sound

並且官網上有很詳細的使用範例以及API手冊:PixiJS Sound

PixiJS Sound最大的優點是它可以與pixi的素材共用同一個Loader,下載mp3的資源檔案。並支援相當多種的音樂格式,也可以將多個音效壓縮在一個mp3內,再根據要開始與結束的秒數去切成多個聲音資源。在一般的狀況下,PixiJS Sound應為搭配PixiJS首選可使用的音樂函式庫

PixiJS Sound於TypeScript

不過很可惜的,PixiJS Sound現在在typescript上的支援度尚不是那麼的好。PixiJS Sound並沒有推出針對type script專案的函式庫,在開發上會帶給使用typescript的人帶來一些困擾。因此我選擇了另一款很受歡迎的聲音函式庫howler

下面是howler.js一些簡單的使用範例



在連連看專案內使用Howler

ResourcesList.ts裡新增要下載的mp3檔案

新增SoundMgr.ts內容如下:

Main.ts加入

並呼叫load()來下載音檔

需要注意的是,因為howler的loader與pixi本身的是兩個不同的loader,所以像這樣的寫法,很有可能剛進遊戲音效會還沒有載入完成,等到載完後才會播放聲音。如果希望一定要剛進遊戲就有聲音,那就需要把拿掉loading page的判斷另外加上音效是否載入完成的判斷。

今日成果

專案下載:ironman20181101
線上demo:http://claire-chang.com/ironman2018/1101/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *