遊戲開發中如何使用CocosCreator進行音效處理

在遊戲開發中,我們經常需要使用音效來營造遊戲氛圍,因此本文給大傢總結下 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音效處理的資料請關註WalkonNet其它相關文章!

推薦閱讀:

    None Found