（转）CocosCreator零基础制作游戏《极限跳跃》九为游戏添加声音音效功能

Posted 2020-11-18 wodehao0808

CocosCreator零基础制作游戏《极限跳跃》九、为游戏添加声音音效功能

 

游戏的声音很重要，我们在这个游戏中需要加2个音效，一个背景音乐。。。第一个音效在玩家与障碍物碰撞的地方加碰撞音效，第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效。然后游戏开始的时候加载背景音乐。

 

我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关。。

首先修改guawileft.js脚本，添加音效资源，在onload设置声音大小。代码：

01	//guanwileft.js

02

03	properties: {

04

05

times: 0,

06

// 碰撞音效资源

07	pengAudio: {

08	default: null,

09	url: cc.AudioClip

10

},

11

},

12	// use this for initialization

13	onLoad: function () {

14

15	this.moveRight();

16	cc.audioEngine.setEffectsVolume ( 0.2 );//设置音效声音大小

17

18

19

},

同理在guaiwuright.js脚本也是这样添加。。

为障碍物的2个脚本添加好代码后，我们需要修改我们的两个障碍物预制体。绑定音效资源，这里以zhangaiwuleft预制体为例。双击zhangaiwuleft预制体，添加声音资源绑定。如图：

zhangaiwuright预制体同理也是这样添加声音。

碰撞音效加载好后，我们为游戏结束加个音效。打开GAME.js脚本。在 properties中添加属性。代码如下：

01

// 背景音乐资源

02	bgmusic: {

03	default: null,

04	type: cc.Node

05

},

06

// 游戏音乐资源

07	gameAudio: {

08	default: null,

09	url: cc.AudioClip

10

},

11	// 游戏结束音乐资源

12	gameOverAudio: {

13	default: null,

14	url: cc.AudioClip

15

},

添加好代码后，我们双击打开MainScene场景开始为属性绑定资源和节点。。如图：

可以跑起来测试下我们的声音有没有了。。这就完了吗？当然不是，我们的声音图标还没有用到啊！！

下面为我们的声音图标节点加一个脚本，新建脚本Audioscript.js。代码如下：

01	//AudioScript.js

02

03	cc.Class({

04	extends: cc.Component,

05	properties: {

06	//是否开启音乐  默认开启

07	isOpen: true,

08

// 游戏音乐资源

09	gameAudio: {

10	default: null,

11	url: cc.AudioClip

12

},

13

14

},

15	// use this for initialization

16	onLoad: function () {

17	this.isOpen = true;//开启音乐

18	cc.audioEngine.playMusic ( this.gameAudio, true );

19

20

},

21	//检查音乐开启状态

22	checkMusic:function(){

23

24	return isOpen;

25

},

26

//获取点击坐标

27	setCp:function(pos){

28

29	var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;

30

31

if(rec){

32	//检查音乐开启状态

33	//如果音乐开启了则关闭音乐和音效

34	if(this.isOpen){

35	//if (cc.audioEngine.isMusicPlaying()) {

36	cc.audioEngine.pauseMusic();//暂停正在播放音乐

37	cc.log("暂停正在播放音乐");

38	//this.node.addChild("Texture/menu_music_off.png");

39	this.isOpen = false;

40

}

41

else {

42	// cc.log("music is not playing");

43	cc.audioEngine.resumeMusic ();//恢复背景音乐

44	cc.log("恢复背景音乐");

45	this.isOpen = true;

46

}

47

48

}

49

},

50

51	// called every frame, uncomment this function to activate update callback

52	// update: function (dt) {

53

54

// },

55

});

代码里实现了一个音乐播放的状态，用来给我们判断是否播放了。播放了图标显示声音图标，没有播放显示静音图标。

1	var rec = cc.rectContainsPoint(this.node.getBoundingBoxToWorld(),pos) ;

此处用来判断声音图标的包围盒和点击坐标的比较，如果为true则表示声音图标被点击到了，如果声音图标被点击则判断当前声音播放状态，并改变状态。声音图标节点显示如图：

声音节点绑定好脚本后，我们继续修改GAME.js脚本中的代码，为AudioScript.js中的方法setCp:function(pos)传参数。

首先在顶部添加引用代码，然后在点击事件添加点击的检测方法，然后update实现更新状态。代码如图：

 

这里我就不贴代码了，大家手打下。。。到此我们的声音系统也添加完毕了。。。对了，还少一点，声音状态切换的时候声音图标也要改变啊。。。这里大家自己解决。。

 

原文地址：https://www.byjth.com/jixiantiaoyue/74.html