在游戏开发过程中，背景音乐和音效的设置总是绕不过的，今天就来带大家实现一个简单的背景音乐和音效的设置逻辑。
1.首先将音乐资源和图片资源都导入到工程中（公众号后台回复「AudioTest」可获得完整工程，图片和音乐资源来自关东升老师《Cocos2d-x实战》，侵删。）：
2.创建 MainScene，添加三个 Button 组件并摆放到合适位置：
3.创建 SettingScene，添加两个 Toggle 组件和一个 Button 组件并摆放到合适位置（背景音乐和音效开关为 Toggle 组件，返回按钮为 Button 组件）：
4.场景创建完后就可以编辑脚本了，MainScene.js 和 SettingScene.js 脚本分别如下：
// MainScene.js
cc.Class({
extends: cc.Component,
properties: {
music: {
default: null,
type: cc.AudioClip
},
sound: {
default: null,
type: cc.AudioClip
}
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
this.initAudioState();
this.playMusic();
// 设置按钮回调函数
this.node.getChildByName("bt_startGame").on(cc.Node.EventType.TOUCH_START, this.cb_startGame, this);
this.node.getChildByName("bt_setting").on(cc.Node.EventType.TOUCH_START, this.cb_setting, this);
this.node.getChildByName("bt_help").on(cc.Node.EventType.TOUCH_START, this.cb_help, this);
},
start() {
},
// update (dt) {},
// 开始游戏 CallBack
cb_startGame(button) {
this.playSound();
console.log("startGame");
},
// 帮助 CallBack
cb_help() {
this.playSound();
console.log("help");
},
// 设置 CallBack
cb_setting() {
this.playSound();
cc.director.loadScene("SettingScene");
},
// 初始化音乐、音效状态
initAudioState(){
if (!(cc.sys.localStorage.getItem("IS_SOUND"))) {
cc.sys.localStorage.setItem("IS_SOUND", false);
}
if (!(cc.sys.localStorage.getItem("IS_MUSIC"))) {
cc.sys.localStorage.setItem("IS_MUSIC", false);
}
},
// 播放音效
playSound() {
if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
var sound = cc.audioEngine.playEffect(this.sound, false);
}
},
// 播放音乐
playMusic() {
if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {
var music = cc.audioEngine.playMusic(this.music, false);
}
},
});
// SettingScene.js
cc.Class({
extends: cc.Component,
properties: {
isPlayMusic: true, // 是否播放音乐
isPlaySound: true, // 是否播放音效
music: {
default: null,
type: cc.AudioClip
},
sound: {
default: null,
type: cc.AudioClip
}
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
var soundNode = this.node.getChildByName("toggle_sound");
var musicNode = this.node.getChildByName("toggle_music");
var OKNode = this.node.getChildByName("bt_OK");
// 设置音乐、音效状态
this.isPlaySound = cc.sys.localStorage.getItem("IS_SOUND");
this.isPlayMusic = cc.sys.localStorage.getItem("IS_MUSIC");
soundNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlaySound);
musicNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlayMusic);
// 设置按钮回调函数
soundNode.on('toggle', this.cb_sound, this);
musicNode.on('toggle', this.cb_music, this);
OKNode.on(cc.Node.EventType.TOUCH_START, this.cb_ok, this);
},
start() {
},
// 音效 callback
cb_sound(toggle) {
console.log("cb_sound");
this.playSound();
if (toggle.isChecked) {
cc.sys.localStorage.setItem("IS_SOUND", true);
} else {
cc.sys.localStorage.setItem("IS_SOUND", false);
}
},
// 音乐 callback
cb_music(toggle) {
console.log("cb_music");
this.playSound();
if (toggle.isChecked) {
cc.sys.localStorage.setItem("IS_MUSIC", true);
var music = cc.audioEngine.playMusic(this.music, false);
} else {
cc.sys.localStorage.setItem("IS_MUSIC", false);
cc.audioEngine.stopMusic();
}
},
// 返回 callback
cb_ok() {
this.playSound();
cc.director.loadScene("MainScene");
},
// 播放音效
playSound() {
if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
var sound = cc.audioEngine.playEffect(this.sound, false);
}
},
// 播放音乐
playMusic() {
if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {
var music = cc.audioEngine.playMusic(this.music, false);
}
},
// 将字符长转化为 bool 型
stringToBoolean(str) {
switch (str.toLowerCase()) {
case "true": case "yes": case "1": return true;
case "false": case "no": case "0": case null: return false;
default: return Boolean(str);
}
}
// update (dt) {},
});
5.编辑好脚本后，分别将对应脚本挂载到对应场景的 Canvas 节点上，并将对应的音乐资源拖到对应位置：
6.资源挂载好后就可以进行预览了，可以发现通过设置已经可以控制背景音乐和音效的开关了，感兴趣的小伙伴赶快公众号后台回复「AudioTest」获取资源试试吧！
我是「Super于」，立志做一个每天都有正反馈的人！
网友评论