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

在遊戲開發過程當中，背景音樂和音效的設置老是繞不過的，今天就來帶你們實現一個簡單的背景音樂和音效的設置邏輯。

 

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

原文出處：https://www.cnblogs.com/yu97271486/p/11354430.html