在遊戲開發過程中，背景音樂和音效的設定總是繞不過的，今天就來帶大家實作一個簡單的背景音樂和音效的設定邏輯。
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于」，立志做一個每天都有正回報的人！