游戲開發(fā)中如何使用Cocos Creator進(jìn)行音效處理，你知道嗎？
前言
關(guān)鍵詞：音效,背景音樂,游戲開發(fā),Cocos Creator,游戲音樂
在游戲開發(fā)中，我們經(jīng)常需要使用音效來營(yíng)造游戲氛圍，因此本文給大家總結(jié)下 Cocos Creator 游戲開發(fā)中音效組件的封裝和使用。
一、 Cocos Creator 中音頻播放基礎(chǔ)
1. 基礎(chǔ)知識(shí)
【1】AudioSource 組件官方文檔：http://docs.cocos.com/creator/manual/zh/audio/audio.html
【2】cc.audioEngine官方文檔：http://docs.cocos.com/creator/manual/zh/audio/audio.html
Cocos Creator 提供兩種音頻播放方式，AudioEngine 與 AudioSource 都能播放音頻，它 們的區(qū)別在于 AudioSource 是組件，可以添加到場(chǎng)景中，由編輯器設(shè)置。而 AudioEngine 是 引擎提供的純 API，只能在腳本中進(jìn)行調(diào)用。
共同點(diǎn)：本質(zhì)都是處理 AudioClip 音頻資源，需要在 Cocos Creator 編輯器中掛載組件。
個(gè)人建議使用這個(gè)來替換 AudioSource 組件播放聲音，接口齊全，測(cè)試有效，可以自己 封裝一個(gè)類似 AudioSource 組件的腳本來使用。
方式一：使用 AudioSource 組件播放
創(chuàng)建一個(gè)空節(jié)點(diǎn)，在這個(gè)空節(jié)點(diǎn)上，添加一個(gè) 其他組件 -> AudioSource
在腳本上預(yù)設(shè)好 AudioSource，并且根據(jù)實(shí)際需求，完善腳本的對(duì)外接口，如下：
1. ?`cc.Class({`
2. ?`properties: {`
3. ?`audioSource: {`
4. ?`type: cc.AudioSource, default: null`
5. ?`}, }, play() {`
6. ?`this.audioSource.play();`
7. ?`}, pause () {`
8. ?`this.audioSource.pause();`
9. ?`}, });`方式二：使用 AudioEngine 播放
在腳本內(nèi)定義一個(gè) audioClip 資源對(duì)象，如下示例中 properties 對(duì)象內(nèi)。
直接使用 cc.audioEngine.play(audio, loop, volume); 播放。如下示例中 onLoad 中。
1. ?`cc.Class({`
2. ?`properties: {`
3. ?`audio: {`
4. ?`default: null, type: cc.AudioClip`
5. ?`}`
6. ?`}, onLoad() {`
7. ?`this.current = cc.audioEngine.play(this.audio, false, 1);`
8. ?`}, onDestroy() {`
9. ?`cc.audioEngine.stop(this.current);`
10. ?`}`
11. ?`});`AudioEngine 播放的時(shí)候，需要注意這里的傳入的是一個(gè)完整的 AudioClip 對(duì)象（而不 是 url）。所以我們不建議在 play 接口內(nèi)直接填寫音頻的 url 地址，而是希望大家先定義 一個(gè) AudioClip，然后在編輯器內(nèi)將音頻拖拽過來。
2. 常用方法
【1】組件 AudioSource
1. ?`play ( ) 播放音頻剪輯。`
2. ?`stop ( ) 停止當(dāng)前音頻剪輯。`
3. ?`pause ( ) 暫停當(dāng)前音頻剪輯。`
4. ?`resume ( ) 恢復(fù)播放。`
5. ?`rewind ( ) 從頭開始播放。`【2】聲音系統(tǒng) cc.audioEngine
1. ?`// 背景音樂，循環(huán)`
2. ?`cc.audioEngine.playMusic(source);`
3. ?`cc.audioEngine.stopMusic(source);`
4. ?`// 短音效`
5. ?`cc.audioEngine.playEffect(source);`
6. ?`cc.audioEngine.stopEffect(source);`上面的第一種方法原生平臺(tái)有很多 Bug，所以我們的游戲都用的第二種方法播放聲音。
二、 Cocos Creator 音效管理組件封裝
創(chuàng)建音效管理類 SoundMgr.ts
1. ?`const{ccclass, property} = cc._decorator;`
2. ?`@ccclass`
3. ?`exportdefaultclassSoundMgr{`
4. ?`sound_path:string= 'res/sounds/';`
5. ?`// sound 中保存的是音樂的名稱和音頻對(duì)象的 key-value 鍵值對(duì)`
6. ?`sounds:{[key:string]:any} = {};`
7. ?`enabled:boolean= true;`
8. ?`music:string= '';`
9. ?`// 單例模式`
10. ?`protectedstatic instance:SoundMgr;`
11. ?`publicstatic getInstance():SoundMgr{`
12. ?`if(!this.instance){`
13. ?`this.instance = newSoundMgr();`
14. ?`}`
15. ?`returnthis.instance;`
16. ?`}`
17. ?`// 添加聲音資源`
18. ?`addSound(key:string, clip:cc.AudioClip){`
19. ?`this.sounds[key] = clip;`
20. ?`}`
21. ?`playFx(fxName:string){`
22. ?`if(!this.enabled) return;`
23. ?`cc.audioEngine.playEffect(this.sounds[fxName], false);`
24. ?`}`
25. ?`playMusic(musicName:string){`
26. ?`this.music = musicName;`
27. ?`if(!this.enabled) return;`
28. ?`cc.audioEngine.playMusic(this.sounds[musicName], true);`
29. ?`}`
30. ?`stopMusic(){`
31. ?`cc.audioEngine.stopMusic();`
32. ?`}`
33. ?`setEnabled(enabled:boolean){`
34. ?`this.enabled = enabled;`
35. ?`if(this.enabled){`
36. ?`this.playMusic(this.music);`
37. ?`}else{`
38. ?`cc.audioEngine.stopAll();`
39. ?`}`
40. ?`}`
41. ?`getEnable(){`
42. ?`returnthis.enabled;`
43. ?`}`
44. ?`}`由于我們整個(gè)游戲中只需要一個(gè)音效管理類，故在上述代碼中我們將營(yíng)銷管理類設(shè)計(jì)成 了單例模式。在 sounds 屬性中，保存著音效的名稱和音效資源對(duì)象的 key-value 鍵值對(duì)。播 放時(shí)可以通過音效文件的 key 值獲取到。
2. 在初始化的時(shí)候加載音頻資源
通過 Cocos Creator 可視化編輯工具，我們?cè)O(shè)置游戲場(chǎng)景和資源如下：
因?yàn)?sounds 我們是通過代碼動(dòng)態(tài)加載，故我們將保存所有聲音文件的 sounds 文件夾放 到 resources 文件夾內(nèi)（如上圖）。
然后，新建 GameMgr.ts，掛載到 Canvas 節(jié)點(diǎn)上。
1. ?`const{ccclass, property} = cc._decorator;`
2. ?`importSoundMgrfrom"SoundMgr";`
3. ?`@ccclass`
4. ?`exportdefaultclassGameMgrextends cc.Component{`
5. ?`loadSounds(){`
6. ?`// 注意通過代碼動(dòng)態(tài)加載的資源必須放到 resources 文件夾下`
7. ?`cc.loader.loadResDir('sounds', cc.AudioClip, function(err, clips){`
8. ?`console.log("load clips:",clips);`
9. ?`if(err){`
10. ?`console.log("err:",err);`
11. ?`}`
12. ?`for(let i=0; i<clips.length; i++){`
13. ?`SoundMgr.getInstance().addSound(clips[i].name, clips[i]);`
14. ?`}`
15. ?`});`
16. ?`}`
17. ?`onLoad () {`
18. ?`this.loadSounds();`
19. ?`console.log("sounds:",SoundMgr.getInstance().sounds);`
20. ?`}`
21. ?`onPlayClick(){`
22. ?`console.log("play");`
23. ?`SoundMgr.getInstance().playMusic('spring_music');`
24. ?`}`
25. ?`onPauseClick(){`
26. ?`console.log("pause");`
27. ?`SoundMgr.getInstance().stopMusic();`
28. ?`}`
29. ?`}`在 GameMgr 自定義組件的 onLoad 方法中，調(diào)用 loadSounds 加載游戲中所需要的所有 聲音資源。同時(shí)在 GameMgr.ts 中提供播放和暫停接口方法 onPlayClick 和 onPauseClick 方法。
供播放和暫停按鈕調(diào)用。
3. 播放和暫停調(diào)用
4. 運(yùn)行測(cè)試
聲音資源全部加載成功，并且點(diǎn)擊播放和暫停按鈕，都能測(cè)試通過。
三、 注意事項(xiàng)
注意：如果音頻播放相關(guān)的設(shè)置都完成后，在部分瀏覽器上預(yù)覽或者運(yùn)行時(shí)仍聽不到聲 音，那可能是由于瀏覽器兼容性導(dǎo)致的問題。例如：Chrome 禁用了 WebAudio 的自動(dòng)播放，而音頻默認(rèn)是使用 Web Audio 的方式加載并播放的，此時(shí)用戶就需要在 資源管理器中選中音頻資源，然后在 屬性檢查器 中將音頻的加載模式修改為 DOM Audio 才能在瀏覽器上正常播放。
最后
需要項(xiàng)目源碼的朋友，可以在評(píng)論區(qū)或公眾號(hào)留言聯(lián)系我們。
