一文带你实现游戏中的音乐、音效设置
- 2019 年 10 月 3 日
- 筆記
在游戏开发过程中，背景音乐和音效的设置总是绕不过的，今天就来带大家实现一个简单的背景音乐和音效的设置逻辑。
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于」，立志做一个每天都有正反馈的人！
