在游戏开发中,我们经常需要使用音效来营造游戏氛围,因此本文给大家总结下 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音效处理的资料请关注程序员的世界其它相关文章!

游戏开发中如何使用CocosCreator进行音效处理的更多相关文章

  1. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力。本实例旨在帮助js计算能力有待提高的读者,通过自己一步一步开发完成计算器功能,熟悉js数字处理方法。计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运......

  2. Swiper.js插件超简单实现轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说,直接上教程1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN......

  3. 帮你理解PReact10.5.13源码

    React源码看过几次,每次都没有坚持下来,索性学习一下PReact部分,网上讲解源码的不少,但是基本已经过时,所以自己来梳理下render.js部分import { EMPTY_OBJ, EMPTY_ARR } from './constants';import { commitRoot, dif......

  4. 细数JS中实用且强大的操作符&运算符

    1,前言博主收录了一些在实际开发过程中,很实用且方便的JS操作符,熟练掌握的话,不仅代码看上去高大上(实为装逼),而且简洁大方。2,代码+应用2.1,短路运算符 ||从左往右1,只要有一个条件为true时,结果就为true。2,当两个条件都为false时,结果才为false。3,当一个条件为true......

  5. js简单粗暴的发布订阅示例代码

    什么是发布/订阅?我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家......

  6. jquery表格插件Datatables使用、快速上手

    Datatables使用一、简介官网:https://datatables.net/ 中文官网:http://datatables.club/Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。操作DOM的分页,即时搜索和排序,几乎支持任......

  7. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。*/$("#inputid").change(function(){ console.log($(this).val());});/** * 只要文本类容发生改变,就会触发该事件 */$("#inp......

  8. JavaScript 如何禁止用户保存图片

    场景 在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。 思路 添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包) 将之转换为 canvas(让浏览器认为不是图片以此禁止用户对之进行图片的操作,但无法阻止抓包) 禁止用户使用控......

  9. 如何利用JS检查元素是否在视口内

    前言分享两个监测元素是否在视口内的方法1. 位置计算使用 Element.getBoundingClientRect() 方法返回元素相对于视口的位置const isElementVisible = (el) => {const rect = el.getBoundingClientRect(......

  10. js中this指向的问题与联系深入探究

    前言JavaScript 中最大的一个安全问题,也是最令人困惑的一个问题,就是在某些情况下this的值是如何确定的。有js基础的同学面对这个问题基本可以想到:this的指向和函数调用的方式相关。这当然是正确的,然而,这几种方式有什么联系吗?这是我接下来要说明的问题。this从哪里来this 是js的......

随机推荐

  1. C#9.0:Init相关总结

    背景在以前的C#版本里面,如果需要定义一个不可修改的的类型的做法一般是:声明为readonly,并设置为只包含get访问器,不包含set访问器。如下:public class PersonInfo{/// /// 身份编号/// public string UserCode { get; }/// ......

  2. Java压缩集合的三种方法

    前言这个问题算是开发当中偶尔会遇到的一个小问题,比如如何将两个集合压缩成为一个逻辑集合。如果你不理解,我们可以看一个简单的例子,去说明什么是压缩集合。本文文章不长,但是还算是比较实用的小技巧。主要内容来源于国外小哥Baeldung的博客:下面给出个地址https://www.baeldung.com......

  3. 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误。JavaScript 是 Web 开发领域的“常青树”。无论是 JavaScript 框架(如 Node.js、React、Angular、Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础。......

  4. 翻译 - ASP.NET Core 托管和部署 - 在 Linux 上使用 Nginx 托管 ASP.NET Core 网站

    翻译自 https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-5.0本文介绍了在 Ubuntu 16.04 服务器上设置生产环境可用的 ASP.NET Core 环境。这里......

  5. python求列表对应元素的乘积和

    那天偶尔看到看到一个小问题:两个不等长列表a=[1,2,3],b=[4,5,6,7],求它们对应元素的乘积的和。我一开始想到的方法就是选择更小数组作为循环长度然后相乘求和:a = [1,2,3]b = [4,5,6,7]sum = 0for i in range(0,min(len(a),len(b......

  6. C#扫盲篇(四):.NET Core 的异步编程-只讲干货(async,await,Task)

    关于async,await,task的用法和解释最精简的说明关于async,await,task的用法和解释这里就不要说明了,网上一查一大堆。至于为啥还要写这篇文章,主要是其他文章水分太多,不适合新手学习和理解。以下内容纯属个人理解,如果有误,请高手指正。本文只对以下这段代码包含的异步编程写法作说明......

  7. pycharm 如何跳出服务器证书不受信任的提示

    出现这个问题解决方法:点击File > Settings > Tools > Server Certificates > Accept non-trusted certificates automatically勾上就好啦~补充:pycharm启动出现Server's cer......

  8. pandas merge报错的解决方案

    pandas 做merge的时候报这个错:df22 = pd.merge(df1,df2,left_on='company_name',right_on = 'name',how='left') Process finished with exit code 137查了一下原因是:两个表太大了,可能......

  9. Java注解与反射机制

    前言Java注解和反射是很基础的Java知识了,为何还要讲它呢?因为我在面试应聘者的过程中,发现不少面试者很少使用过注解和反射,甚至有人只能说出@Override这一个注解。我建议大家还是尽量能在开发中使用注解和反射,有时候使用它们能让你事半功倍,简化代码提高编码的效率。很多优秀的框架都基本使用了注......

  10. Java程序员都要懂得知识点:反射

    摘要:Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于......