一文帶你實現遊戲中的音樂、音效設定

遊戲開發小白變怪獸發表於2019-08-14
遊戲

在遊戲開發過程中，背景音樂和音效的設定總是繞不過的，今天就來帶大家實現一個簡單的背景音樂和音效的設定邏輯。

 

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於」，立志做一個每天都有正反饋的人！

相關文章