一文带你实现游戏中的音乐、音效设置

在游戏开发过程当中，背景音乐和音效的设置老是绕不过的，今天就来带你们实现一个简单的背景音乐和音效的设置逻辑。

 

1.首先将音乐资源和图片资源都导入到工程中（公众号后台回复「AudioTest」可得到完整工程，图片和音乐资源来自关东升老师《Cocos2d-x实战》，侵删。）：

 

2.建立 MainScene，添加三个 Button 组件并摆放到合适位置：

 

3.建立 SettingScene，添加两个 Toggle 组件和一个 Button 组件并摆放到合适位置（背景音乐和音效开关为 Toggle 组件，返回按钮为 Button 组件）：

 

4.场景建立完后就能够编辑脚本了，MainScene.js 和 SettingScene.js 脚本分别以下：

 1 // MainScene.js
 2 ​  3 cc.Class({  4  extends: cc.Component,  5 ​  6  properties: {  7  music: {  8             default: null,  9  type: cc.AudioClip 10  }, 11 ​ 12  sound: { 13             default: null, 14  type: cc.AudioClip 15  } 16  }, 17 ​ 18     // LIFE-CYCLE CALLBACKS:
19 ​ 20  onLoad() { 21         this.initAudioState(); 22         this.playMusic(); 23 ​ 24         // 设置按钮回调函数
25         this.node.getChildByName("bt_startGame").on(cc.Node.EventType.TOUCH_START, this.cb_startGame, this); 26         this.node.getChildByName("bt_setting").on(cc.Node.EventType.TOUCH_START, this.cb_setting, this); 27         this.node.getChildByName("bt_help").on(cc.Node.EventType.TOUCH_START, this.cb_help, this); 28  }, 29 ​ 30  start() { 31 ​ 32  }, 33 ​ 34     // update (dt) {},
35 ​ 36     // 开始游戏 CallBack
37  cb_startGame(button) { 38         this.playSound(); 39         console.log("startGame"); 40  }, 41 ​ 42     // 帮助 CallBack
43  cb_help() { 44         this.playSound(); 45         console.log("help"); 46  }, 47 ​ 48     // 设置 CallBack
49  cb_setting() { 50         this.playSound(); 51         cc.director.loadScene("SettingScene"); 52  }, 53 ​ 54     // 初始化音乐、音效状态
55  initAudioState(){ 56         if (!(cc.sys.localStorage.getItem("IS_SOUND"))) { 57             cc.sys.localStorage.setItem("IS_SOUND", false); 58  } 59 ​ 60         if (!(cc.sys.localStorage.getItem("IS_MUSIC"))) { 61             cc.sys.localStorage.setItem("IS_MUSIC", false); 62  } 63  }, 64 ​ 65     // 播放音效
66  playSound() { 67         if (cc.sys.localStorage.getItem("IS_SOUND") == "true") { 68             var sound = cc.audioEngine.playEffect(this.sound, false); 69  } 70  }, 71 ​ 72     // 播放音乐
73  playMusic() { 74         if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") { 75             var music = cc.audioEngine.playMusic(this.music, false); 76  } 77  }, 78 });

 

 1 // SettingScene.js
 2 ​  3 cc.Class({  4  extends: cc.Component,  5 ​  6  properties: {  7         isPlayMusic: true,    // 是否播放音乐
 8         isPlaySound: true,    // 是否播放音效
 9 ​  10  music: {  11             default: null,  12  type: cc.AudioClip  13  },  14 ​  15  sound: {  16             default: null,  17  type: cc.AudioClip  18  }  19  },  20 ​  21     // LIFE-CYCLE CALLBACKS:
 22 ​  23  onLoad() {  24         var soundNode = this.node.getChildByName("toggle_sound");  25         var musicNode = this.node.getChildByName("toggle_music");  26         var OKNode = this.node.getChildByName("bt_OK");  27 ​  28         // 设置音乐、音效状态
 29         this.isPlaySound = cc.sys.localStorage.getItem("IS_SOUND");  30         this.isPlayMusic = cc.sys.localStorage.getItem("IS_MUSIC");  31 ​  32         soundNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlaySound);  33         musicNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlayMusic);  34 ​  35         // 设置按钮回调函数
 36         soundNode.on('toggle', this.cb_sound, this);  37         musicNode.on('toggle', this.cb_music, this);  38         OKNode.on(cc.Node.EventType.TOUCH_START, this.cb_ok, this);  39  },  40 ​  41  start() {  42 ​  43  },  44 ​  45     // 音效 callback
 46  cb_sound(toggle) {  47         console.log("cb_sound");  48 ​  49         this.playSound();  50 ​  51         if (toggle.isChecked) {  52             cc.sys.localStorage.setItem("IS_SOUND", true);  53 ​  54         } else {  55             cc.sys.localStorage.setItem("IS_SOUND", false);  56  }  57  },  58 ​  59     // 音乐 callback
 60  cb_music(toggle) {  61         console.log("cb_music");  62 ​  63         this.playSound();  64 ​  65         if (toggle.isChecked) {  66             cc.sys.localStorage.setItem("IS_MUSIC", true);  67             var music = cc.audioEngine.playMusic(this.music, false);  68 ​  69         } else {  70             cc.sys.localStorage.setItem("IS_MUSIC", false);  71  cc.audioEngine.stopMusic();  72  }  73  },  74 ​  75 ​  76     // 返回 callback
 77  cb_ok() {  78         this.playSound();  79 ​  80         cc.director.loadScene("MainScene");  81  },  82 ​  83     // 播放音效
 84  playSound() {  85         if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {  86             var sound = cc.audioEngine.playEffect(this.sound, false);  87  }  88  },  89 ​  90     // 播放音乐
 91  playMusic() {  92         if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {  93             var music = cc.audioEngine.playMusic(this.music, false);  94  }  95  },  96 ​  97     // 将字符长转化为 bool 型
 98  stringToBoolean(str) {  99         switch (str.toLowerCase()) { 100             case "true": case "yes": case "1": return true; 101             case "false": case "no": case "0": case null: return false; 102             default: return Boolean(str); 103  } 104  } 105 ​ 106     // update (dt) {},
107 });

 

5.编辑好脚本后，分别将对应脚本挂载到对应场景的 Canvas 节点上，并将对应的音乐资源拖到对应位置：

 

 

6.资源挂载好后就能够进行预览了，能够发现经过设置已经能够控制背景音乐和音效的开关了，感兴趣的小伙伴赶快公众号后台回复「AudioTest」获取资源试试吧！

 

---

 

我是「Super于」，立志作一个天天都有正反馈的人！

原文出处：https://www.cnblogs.com/yu97271486/p/11354430.html