登录/注册

游戏开发中如何使用CocosCreator进行音效处理

2021-05-01 21:05:41 | 浏览:20
蜘蛛娘 [UserCard-框架]
b'
\n

在游戏开发中,我们经常需要使用音效来营造游戏氛围,因此本文给大家总结下 Cocos Creator 游戏开发中音效组件的封装和使用。

\n

一、 Cocos Creator 中音频播放基础

\n

1. 基础知识

\n

\n

【1】AudioSource 组件官方文档:http://docs.cocos.com/creator/manual/zh/audio/audio.html

\n

【2】cc.audioEngine官方文档:http://docs.cocos.com/creator/manual/zh/audio/audio.html

\n

Cocos Creator 提供两种音频播放方式,AudioEngine 与 AudioSource 都能播放音频,它 们的区别在于 AudioSource 是组件,可以添加到场景中,由编辑器设置。而 AudioEngine 是 引擎提供的纯 API,只能在脚本中进行调用。

\n

共同点:本质都是处理 AudioClip 音频资源,需要在 Cocos Creator 编辑器中挂载组件。

\n
\n

个人建议使用这个来替换 AudioSource 组件播放声音,接口齐全,测试有效,可以自己 封装一个类似 AudioSource 组件的脚本来使用。

\n
\n

方式一:使用 AudioSource 组件播放

\n

创建一个空节点,在这个空节点上,添加一个 其他组件 -> AudioSource

\n

在脚本上预设好 AudioSource,并且根据实际需求,完善脚本的对外接口,如下

\n
\n

\ncc.Class({
\n
\n\tproperties: {
\n
\n\t\taudioSource: {
\n
\n\t\t\ttype: cc.AudioSource,
\n\t\t\tdefault: null
\n
\n\t\t},
\n\t},
\n\tplay() {
\n
\n\t\tthis.audioSource.play();
\n
\n\t},
\n\tpause() {
\n
\n\t\tthis.audioSource.pause();
\n
\n\t},
\n});
\n
\n

方式二:使用 AudioEngine 播放

\n

在脚本内定义一个 audioClip 资源对象,如下示例中 properties 对象内。

\n

直接使用 cc.audioEngine.play(audio, loop, volume); 播放。如下示例中 onLoad 中。

\n
\n

\ncc.Class({
\n
\n\tproperties: {
\n
\n\t\taudio: {
\n
\n\t\t\tdefault: null,
\n\t\t\ttype: cc.AudioClip
\n
\n\t\t}
\n
\n\t},
\n\tonLoad() {
\n
\n\t\tthis.current = cc.audioEngine.play(this.audio, false, 1);
\n
\n\t},
\n\tonDestroy() {
\n
\n\t\tcc.audioEngine.stop(this.current);
\n
\n\t}
\n
\n});
\n
\n

AudioEngine 播放的时候,需要注意这里的传入的是一个完整的 AudioClip 对象(而不 是 url)。所以我们不建议在 play 接口内直接填写音频的 url 地址,而是希望大家先定义 一个 AudioClip,然后在编辑器内将音频拖拽过来。

\n

2. 常用方法

\n

【1】组件 AudioSource

\n

play ( ) 播放音频剪辑。

\n

stop ( ) 停止当前音频剪辑。

\n

pause ( ) 暂停当前音频剪辑。

\n

resume ( ) 恢复播放。

\n

【2】声音系统 cc.audioEngine

\n

// 背景音乐,循环

\n

cc.audioEngine.playMusic(source);

\n

cc.audioEngine.stopMusic(source);

\n

// 短音效

\n

cc.audioEngine.playEffect(source);

\n

cc.audioEngine.stopEffect(source);

\n

上面的第一种方法原生平台有很多 Bug,所以我们的游戏都用的第二种方法播放声音。

\n

二、 Cocos Creator 音效管理组件封装

\n

1.创建音效管理类 SoundMgr.ts

\n
\n

\nconst {
\n\tccclass,
\n\tproperty
\n} = cc._decorator;
\n
\n@ccclass
\n
\nexportdefaultclassSoundMgr {
\n
\n\tsound_path: string = \'res/sounds/\';
\n
\n\t// sound 中保存的是音乐的名称和音频对象的 key-value 键值对
\n
\n\tsounds: {
\n\t\t[key: string]: any
\n\t} = {};
\n
\n\tenabled: boolean = true;
\n
\n\tmusic: string = \'\';
\n
\n\t// 单例模式
\n
\n\tprotectedstatic instance: SoundMgr;
\n
\n\tpublicstatic getInstance(): SoundMgr {
\n
\n\t\tif (!this.instance) {
\n
\n\t\t\tthis.instance = newSoundMgr();
\n
\n\t\t}
\n
\n\t\treturnthis.instance;
\n
\n\t}
\n
\n\t// 添加声音资源
\n
\n\taddSound(key: string, clip: cc.AudioClip) {
\n
\n\t\tthis.sounds[key] = clip;
\n
\n\t}
\n
\n\tplayFx(fxName: string) {
\n
\n\t\tif (!this.enabled) return;
\n
\n\t\tcc.audioEngine.playEffect(this.sounds[fxName], false);
\n
\n\t}
\n
\n\tplayMusic(musicName: string) {
\n
\n\t\tthis.music = musicName;
\n
\n\t\tif (!this.enabled) return;
\n
\n\t\tcc.audioEngine.playMusic(this.sounds[musicName], true);
\n
\n\t}
\n
\n\tstopMusic() {
\n
\n\t\tcc.audioEngine.stopMusic();
\n
\n\t}
\n
\n\tsetEnabled(enabled: boolean) {
\n
\n\t\tthis.enabled = enabled;
\n
\n\t\tif (this.enabled) {
\n
\n\t\t\tthis.playMusic(this.music);
\n
\n\t\t} else {
\n
\n\t\t\tcc.audioEngine.stopAll();
\n
\n\t\t}
\n
\n\t}
\n
\n\tgetEnable() {
\n
\n\t\treturnthis.enabled;
\n
\n\t}
\n
\n}
\n
\n

2. 在初始化的时候加载音频资源

\n

通过 Cocos Creator 可视化编辑工具,我们设置游戏场景和资源如下:

\n

\n

因为 sounds 我们是通过代码动态加载,故我们将保存所有声音文件的 sounds 文件夹放 到 resources 文件夹内(如上图)。

\n

然后,新建 GameMgr.ts,挂载到 Canvas 节点上。

\n

\n
\n

\nonst {
\n\tccclass,
\n\tproperty
\n} = cc._decorator;
\n
\nimportSoundMgrfrom "SoundMgr";
\n
\n@ccclass
\n
\nexportdefaultclassGameMgrextends cc.Component {
\n
\n\tloadSounds() {
\n
\n\t\t// 注意通过代码动态加载的资源必须放到 resources 文件夹下
\n
\n\t\tcc.loader.loadResDir(\'sounds\', cc.AudioClip, function(err, clips) {
\n
\n\t\t\tconsole.log("load clips:", clips);
\n
\n\t\t\tif (err) {
\n
\n\t\t\t\tconsole.log("err:", err);
\n
\n\t\t\t}
\n
\n\t\t\tfor (let i = 0; i
\n
\n\t\t\t\tSoundMgr.getInstance().addSound(clips[i].name, clips[i]);
\n
\n\t\t\t}
\n
\n\t\t});
\n
\n\t}
\n
\n\tonLoad() {
\n
\n\t\tthis.loadSounds();
\n
\n\t\tconsole.log("sounds:", SoundMgr.getInstance().sounds);
\n
\n\t}
\n
\n\tonPlayClick() {
\n
\n\t\tconsole.log("play");
\n
\n\t\tSoundMgr.getInstance().playMusic(\'spring_music\');
\n
\n\t}
\n
\n\tonPauseClick() {
\n
\n\t\tconsole.log("pause");
\n
\n\t\tSoundMgr.getInstance().stopMusic();
\n
\n\t}
\n
\n}
\n
\n

在 GameMgr 自定义组件的 onLoad 方法中,调用 loadSounds 加载游戏中所需要的所有 声音资源。同时在 GameMgr.ts 中提供播放和暂停接口方法 onPlayClick 和 onPauseClick 方法。

\n

供播放和暂停按钮调用。

\n

3. 播放和暂停调用

\n

\n

4. 运行测试

\n

\n

声音资源全部加载成功,并且点击播放和暂停按钮,都能测试通过。

\n

\n

三、 注意事项

\n
\n

注意:如果音频播放相关的设置都完成后,在部分浏览器上预览或者运行时仍听不到声 音,那可能是由于浏览器兼容性导致的问题。例如:Chrome 禁用了 WebAudio 的自动播放,而音频默认是使用 Web Audio 的方式加载并播放的,此时用户就需要在 资源管理器中选中音频资源,然后在 属性检查器 中将音频的加载模式修改为 DOM Audio 才能在浏览器上正常播放。

\n
\n

\n

以上就是游戏开发中如何使用CocosCreator进行音效处理的详细内容,更多关于CocosCreator音效处理的资料请关注脚本之家其它相关文章!

\n \n \n \n
\n '
 更新时间:2021年04月14日 16:32:24   作者:weixin_39745013  

评论


[COMMENT-框架]
[AD-框架]