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实现更新状态。代码如图：

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