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

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

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于」，立志做一个每天都有正反馈的人！