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

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) {},
​// 开始游戏 CallBackcb_startGame(button) {this.playSound();console.log("startGame");},
​// 帮助 CallBackcb_help() {this.playSound();console.log("help");},
​// 设置 CallBackcb_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() {
​},
​// 音效 callbackcb_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);}},
​// 音乐 callbackcb_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();}},
​
​// 返回 callbackcb_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于」,立志做一个每天都有正反馈的人!

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

  1. CocosCreator 在游戏中播放音乐音效 (第十六篇)

    前面一篇讲解了怎么播放Animation动画,这里讲一下怎么播放Audio音频,其实操作很简单,和前面的差不了多少,主要就是通过在节点上挂载对应的组件,然后再通过脚本代码来控制播放. 一.AudioS ...

  2. 一文带你理解Java中Lock的实现原理

    转载自   一文带你理解Java中Lock的实现原理 当多个线程需要访问某个公共资源的时候,我们知道需要通过加锁来保证资源的访问不会出问题.java提供了两种方式来加锁,一种是关键字:synchron ...

  3. [libgdx游戏开发教程]使用Libgdx进行游戏开发(10)-音乐音效不求人,程序员也可以DIY

    本章音效文件都来自于公共许可:  http://files.cnblogs.com/mignet/sounds.zip 在游戏中,播放背景音乐和音效是基本的功能. Libgdx提供了跨平台的声音播放功 ...

  4. 微信公众号文章中的音乐怎么设置自动播放

    1.搜微信公众号登录,点网"微信公众号官网". 微信公众号文章中的音乐怎么设置自动播放? 2.点新建群发. 微信公众号文章中的音乐怎么设置自动播放? 3.进入新建群发,在正文里输入 ...

  5. 抖音计算机音乐怎么设置,抖音短视频中的音乐怎么设置成铃声 超级简单

    原标题: 抖音短视频中的音乐怎么设置成铃声 超级简单 抖音短视频中的音乐怎么设置成铃声 超级简单 抖音短视频设置手机铃声教程 如今抖音短视频app平台,用户量非常庞大,我们经常能在刷抖音的时候听到一些 ...

  6. 一文带你领略JS中原型链的精妙设计!

    对于很多前端初学者来说,JavaScript中的原型链理解是一个很难的过程,有工作了好几年还无法理解原型链设计的大有人在,今天小千就来通过例子给大家介绍这个js原型链. 我们想要理解原型链,首先我们先 ...

  7. 一文带你领略JS中原型链的精妙设计

    对于很多前端初学者来说,JavaScript中的原型链理解是一个很难的过程,有工作了好几年还无法理解原型链设计的大有人在,今天小千就来通过例子给大家介绍这个js原型链. 我们想要理解原型链,首先我们先 ...

  8. 游戏中常用音乐风格分析

    不同的游戏有不同的玩法,每种不同的玩法都是不同的风格,每款游戏都配备了不同场景的音乐,根据音乐的场景不同,以及游戏风格的不同,游戏音乐风格也多种多样,今天我们来聊聊游戏音乐常用的风格有哪些? (一)按 ...

  9. 音乐与动漫及游戏的关系--游戏动漫音乐音效制作 分贝块

    良好音乐音效在动漫游戏中是相当重要的, 让音乐来增加动画的表达效果而不是仅仅辅助动画,在公众的眼里,新的.富有表现性的音乐应该和动画造型一起出现在我们的电影中并不断为气氛.地点和场景提供支持和节奏. ...

  10. 独家|一文带你理解机器学习中的“归纳偏好”真正含义!

    ↑ 点击上方[计算机视觉联盟]关注我们 举例子: 三种属性:{白色.黄色.黑色}+{眼睛颜色蓝色.眼睛颜色不一样}+{有铃铛.没铃铛}   判断是不是"猫" 通过机器学习,现在给了 ...

最新文章

  1. WIN7 x64 32位的IE8 打开就崩溃,停止工作
  2. python语法详解大全_笔记:Python 语法要点汇总
  3. Android生成缩略图-使用Android 2.2新特性完成
  4. 一些琐碎+分不清的知识点
  5. CDH6.3.2之YARN生产环境调优(yarn 生产必做优化项)
  6. Redis(案例四:购物车实现案例-Hash数据)
  7. 大数据摄取:Flume,Kafka和NiFi
  8. python 定义函数为什么有个长线_关于格式化:如何在Python中打破这条长线?
  9. 面试题5,接口和抽象类的区别
  10. C#算法设计排序篇之07-希尔排序(附带动画演示程序)
  11. canvas滚动 vue_vue 移动端 canvas 触摸板
  12. express 设置header解决跨域问题
  13. 读书笔记之《史记》读后感心得体会
  14. C语言求1到1000素数之和,C语言实现1-1000中所有素数的和
  15. pos收银系统 php,POS收银系统
  16. php网站的难点,PHP开发有哪些难点
  17. 易基因|m5C RNA甲基化测序技术---从mRNA到全转录组(mRNA+lncRNA+tRNA)m5C单碱基分辨检测|技术解读
  18. PS在导出图片时提示无法加载扩展,未经正确签署
  19. 笔记之零基础入门金融风控-贷款违约预测
  20. HDOJ 5620-KK's Steel【斐波那契数列】

热门文章

  1. 【高数学习笔记】2.一元函数微分学
  2. 股票量化交易有哪些潜在的风险?如何去避免?
  3. 物联网技术是怎么分类的,物联网主要面临哪些难题?
  4. C++ Primer Plus学习:第十三章
  5. orderBy排序用法
  6. Unity商店插件/工具收藏篇
  7. ARM汇编之合法立即数的快速判断方法
  8. 鹏业安装算量常见安装问题处理
  9. PEP 635 – Structural Pattern Matching: Motivation and Rationale
  10. java弹幕爬取,手把手教你爬取B站弹幕(超详细)!