在游戲開發中，我們經常需要使用音效來營造游戲氛圍，因此本文給大家總結下 Cocos Creator 游戲開發中音效組件的封裝和使用。
一、 Cocos Creator 中音頻播放基礎
1. 基礎知識
【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 都能播放音頻，它 們的區別在于 AudioSource 是組件，可以添加到場景中，由編輯器設置。而 AudioEngine 是 引擎提供的純 API，只能在腳本中進行調用。
共同點：本質都是處理 AudioClip 音頻資源，需要在 Cocos Creator 編輯器中掛載組件。
個人建議使用這個來替換 AudioSource 組件播放聲音，接口齊全，測試有效，可以自己 封裝一個類似 AudioSource 組件的腳本來使用。
方式一：使用 AudioSource 組件播放
創建一個空節點，在這個空節點上，添加一個 其他組件 -> AudioSource
在腳本上預設好 AudioSource，并且根據實際需求，完善腳本的對外接口，如下
cc.Class({
properties: {
audioSource: {
type: cc.AudioSource,
default: null
},
},
play() {
this.audioSource.play();
},
pause() {
this.audioSource.pause();
},
});
方式二：使用 AudioEngine 播放
在腳本內定義一個 audioClip 資源對象，如下示例中 properties 對象內。
直接使用 cc.audioEngine.play(audio, loop, volume); 播放。如下示例中 onLoad 中。
cc.Class({
properties: {
audio: {
default: null,
type: cc.AudioClip
}
},
onLoad() {
this.current = cc.audioEngine.play(this.audio, false, 1);
},
onDestroy() {
cc.audioEngine.stop(this.current);
}
});
AudioEngine 播放的時候，需要注意這里的傳入的是一個完整的 AudioClip 對象(而不 是 url)。所以我們不建議在 play 接口內直接填寫音頻的 url 地址，而是希望大家先定義 一個 AudioClip，然后在編輯器內將音頻拖拽過來。
2. 常用方法
【1】組件 AudioSource
play ( ) 播放音頻剪輯。
stop ( ) 停止當前音頻剪輯。
pause ( ) 暫停當前音頻剪輯。
resume ( ) 恢復播放。
【2】聲音系統 cc.audioEngine
// 背景音樂，循環
cc.audioEngine.playMusic(source);
cc.audioEngine.stopMusic(source);
// 短音效
cc.audioEngine.playEffect(source);
cc.audioEngine.stopEffect(source);
上面的第一種方法原生平臺有很多 Bug，所以我們的游戲都用的第二種方法播放聲音。
二、 Cocos Creator 音效管理組件封裝
1.創建音效管理類 SoundMgr.ts
const {
ccclass,
property
} = cc._decorator;
@ccclass
exportdefaultclassSoundMgr {
sound_path: string = "res/sounds/";
// sound 中保存的是音樂的名稱和音頻對象的 key-value 鍵值對
sounds: {
[key: string]: any
} = {};
enabled: boolean = true;
music: string = "";
// 單例模式
protectedstatic instance: SoundMgr;
publicstatic getInstance(): SoundMgr {
if (!this.instance) {
this.instance = newSoundMgr();
}
returnthis.instance;
}
// 添加聲音資源
addSound(key: string, clip: cc.AudioClip) {
this.sounds[key] = clip;
}
playFx(fxName: string) {
if (!this.enabled) return;
cc.audioEngine.playEffect(this.sounds[fxName], false);
}
playMusic(musicName: string) {
this.music = musicName;
if (!this.enabled) return;
cc.audioEngine.playMusic(this.sounds[musicName], true);
}
stopMusic() {
cc.audioEngine.stopMusic();
}
setEnabled(enabled: boolean) {
this.enabled = enabled;
if (this.enabled) {
this.playMusic(this.music);
} else {
cc.audioEngine.stopAll();
}
}
getEnable() {
returnthis.enabled;
}
}
2. 在初始化的時候加載音頻資源
通過 Cocos Creator 可視化編輯工具，我們設置游戲場景和資源如下：
因為 sounds 我們是通過代碼動態加載，故我們將保存所有聲音文件的 sounds 文件夾放 到 resources 文件夾內(如上圖)。
然后，新建 GameMgr.ts，掛載到 Canvas 節點上。
onst {
ccclass,
property
} = cc._decorator;
importSoundMgrfrom "SoundMgr";
@ccclass
exportdefaultclassGameMgrextends cc.Component {
loadSounds() {
// 注意通過代碼動態加載的資源必須放到 resources 文件夾下
cc.loader.loadResDir("sounds", cc.AudioClip, function(err, clips) {
console.log("load clips:", clips);
if (err) {
console.log("err:", err);
}
for (let i = 0; i
SoundMgr.getInstance().addSound(clips[i].name, clips[i]);
}
});
}
onLoad() {
this.loadSounds();
console.log("sounds:", SoundMgr.getInstance().sounds);
}
onPlayClick() {
console.log("play");
SoundMgr.getInstance().playMusic("spring_music");
}
onPauseClick() {
console.log("pause");
SoundMgr.getInstance().stopMusic();
}
}
在 GameMgr 自定義組件的 onLoad 方法中，調用 loadSounds 加載游戲中所需要的所有 聲音資源。同時在 GameMgr.ts 中提供播放和暫停接口方法 onPlayClick 和 onPauseClick 方法。
供播放和暫停按鈕調用。
3. 播放和暫停調用
4. 運行測試
聲音資源全部加載成功，并且點擊播放和暫停按鈕，都能測試通過。
三、 注意事項
注意：如果音頻播放相關的設置都完成后，在部分瀏覽器上預覽或者運行時仍聽不到聲 音，那可能是由于瀏覽器兼容性導致的問題。例如：Chrome 禁用了 WebAudio 的自動播放，而音頻默認是使用 Web Audio 的方式加載并播放的，此時用戶就需要在 資源管理器中選中音頻資源，然后在 屬性檢查器 中將音頻的加載模式修改為 DOM Audio 才能在瀏覽器上正常播放。
以上就是游戲開發中如何使用CocosCreator進行音效處理的詳細內容，更多關于CocosCreator音效處理的資料請關注服務器之家其它相關文章！
原文鏈接：https://blog.csdn.net/weixin_39745013/article/details/112118478
