cocos creator 游戏背景音乐处理(音乐循环淡入淡出等)

2023-05-16

在处理游戏背景音乐中遇到的问题,策划对于音乐播放提出新的想法。但由于目前周围没有人尝试过,所以自己摸索的来。

需求

image

在同一场景音乐处理

一般同一场景是同一首背景音乐。
  现需求在同一场景(时代)内播放不同的音乐,在音乐配表中,同一场景加入新的音乐,每个音乐都带有一个cd字段,这个字段代表这首音乐播放剩余cd秒时,播放下一首音乐。相应的音乐资源会做淡入淡出处理。
  解决:做一个一直存在的定时器,用一个变量curAudio存当前音乐的path,用一个变量lastAudio存上一首音乐的path,获取到音乐资源的时长,在定时器内检测是否到达cd时间段,如在play下一首,cd完stop上一首,同时curAudio存当前音乐。

id = cc.audioEngine.play(audio, loop, volume);    //参数为:音乐,循环,音量
curAudio = audio;
cc.audioEngine.getDuration(id);                   //获取音频时长
cc.audioEngine.stop(lastAudio);                   //参数为:指定音乐
lastAudio = curAudio;

在场景切换时音乐处理

一般在场景切换时上一首音乐立马结束,紧接着播放下一首音乐。

cc.audioEngine.stopAll();
cc.audioEngine.play(audio, loop, volume);

现需求在场景切换时,音乐也需要切换到这个场景对应的音乐,这时候要考虑到切换场景时音乐的衔接。
  问题1:两个场景切换时上一个音乐的刚开始播放,下一场景音乐如何出现。
  解决:上一场景音乐加入淡出效果(设有一个cd),下一场景音乐紧接着淡入进来(设有一个cd)。
  问题2:两个场景切换时上一个音乐的播放到末尾已经资源上淡出再加上淡出,体验上会不会奇怪。
  解决:暂时以增加手动淡出时长来维护。


获取表数据整理结构

  1. 首先把表以场景ID为key,每个场景的音乐表数据为value,取到整个表的数据
table = this[this.TABLE.AGEBGM];
    this[this.TABLE.AGEBGM + this.EXFLAG] = {};
    for(i = 0; i < table.length; i++) {
        item = table[i];
        this[this.TABLE.AGEBGM + this.EXFLAG][item.age] = item;
    }
  1. 通过场景的ID,从表数据中取出单个场景的数据,并通过遍历这条数据,按自己需要的结构存储数据(定义一个数组,数组首位存储场景ID以待后用,然后通过循环单个判断音乐名称("bgm_"+j)、次播放提前量("cd"+j)是否存在,存在则单个(以key-value形式存储bgm和cd)按顺序存储)。
jsonTables.getEpochBgmTable = function (tid ) {
        var item = this[this.TABLE.AGEBGM + this.EXFLAG][tid];
        var bgm = new Array();
        if (item != null) {
            bgm[0] = tid;
            for (var j = 1; item["bgm_" + j] != null && item["cd_" + j] != null; j++){
                var tmp = new Array();
                tmp["bgm"] = item["bgm_" + j];
                tmp["cd"] = item["cd_" + j];
                bgm[j] = tmp;
            }
        }

        if (bgm != null){
            return bgm; 
        }
        return "";
    };
  1. 有了上面2的数据,通过传进来参数(场景ID)来取到相应场景的音乐数据。
  jsonTables.getEpochBgm = function (tid) {
        if (this.epochBgm == null || this.epochBgm[0] !== tid){
            this.epochBgm = this.getEpochBgmTable(tid);
        }
        return this.epochBgm;
    };

单个场景内循环播放音乐

  1. 遵循需求场景内循环播放音乐,且上一个音乐在最后cd秒时开始播放下一段音乐。
  2. 一个音乐播放函数。通过传进来的音乐名去音乐路径下取到这个资源。再播放。
    playBgMusic:function(name,loop){
        var audio = this.audios[name];
        if(!audio) return;

        this.bgAudioID = cc.audioEngine.play(audio, loop, this.bgVolume);
    }
  1. 初始化调用背景音乐函数,其中有个定时器里面循环判断。
  initBgm:function(epochId) {
        cc.audioEngine.stopAll();
        this.bgmTable = jsonTables.getEpochBgm(epochId);
        this.lastBgmId = null;
        this.lastTime = null;
        this.bgmIndex = 1;
        this.lastCD = 0;

        this.schedule(function () {
            this.playBgm()
        }, 0.1)
    }
  1. 这个是定时器里面调用的函数,具体来判断是不是要播放音乐了。首先如果初始化状态下this.lastBgmId为null那么进入播放音乐函数;或者拿到的这个数据表有>=2个的数据时(因为0位存的是场景ID,如果数据大于2个说明有多个音乐需要循环播放),再次判断上个音乐是否已经满足只剩cd秒,如果满足进入音乐播放函数。
  playBgm:function() {
        if(this.lastBgmId == null){
            this.playBgmByIndex();
        }else if (this.bgmTable.length > 2) {
            var time = cc.audioEngine.getCurrentTime(this.lastBgmId);
            if ( this.lastTime - time <= this.lastCD){
                this.playBgmByIndex();
            }
        }
    }
  1. 这个函数根据bgmIndex来取相应的音乐名,然后调用1 playBgMusic函数来播放。同时lastBgmId和lastCD存所播放音乐的id和cd,bgmIndex++,lastTime存所播放的音乐的总时长。
 playBgmByIndex: function ( ) {
            if (this.bgmTable == null){return;}
            if(this.bgmIndex >= this.bgmTable.length){
                this.bgmIndex = 1;
            }

            if (this.bgmTable.length === 2) {
                this.playBgMusic(this.bgmTable[this.bgmIndex].bgm, true);
            }else if (this.bgmTable.length > 2) {
                this.playBgMusic(this.bgmTable[this.bgmIndex].bgm, false);
            }else{
                return;
            }

            this.lastBgmId = this.bgAudioID;
            this.lastCD = this.bgmTable[this.bgmIndex].cd;
            this.bgmIndex += 1;
            this.lastTime = cc.audioEngine.getDuration(this.lastBgmId);
        },

场景切换时音乐更新

  1. 场景变化时,需要满足在变化的同时上一个场景音乐淡出,新场景音乐淡入。
      首先对于新场景的音乐数据通过id进行更新,然后lastBgmIdTmp保存下上个音乐的id(this.lastBgmId),在将this.lastBgmId赋空,这个操作是为了在3步骤函数定时器的下一帧时,通过4步骤函数中if(this.lastBgmId == null)这个判断调用音乐播放函数来播放新的场景音乐。
      然后定义两个变量lastVolume,curVolume存上个场景和新场景音量,this.bgmIndex置为1播放时新场景去取第一个资源。
      设置一个定时器,每1秒执行一次,执行5次,0.1秒后执行(防止上面新音乐未播放(上面音乐播放定时器是每0.1秒执行一次))。通过判断两个音乐的播放状态来对两个音乐音量进行控制,已达到旧音乐淡出新音乐淡入效果。
 changEpoch: function (epochId) {
        this.bgmTable = jsonTables.getEpochBgm(epochId);
        var lastBgmIdTmp = this.lastBgmId
        var lastVolume = 1;
        var curVolume = 0;
        this.lastBgmId = null;
        this.bgmIndex = 1;

        this.schedule(function () {
            var lastBgmState = cc.audioEngine.getState(lastBgmIdTmp);
            var curBgmState = cc.audioEngine.getState(this.lastBgmId);
            if (lastBgmState && lastVolume >= 0) {
                lastVolume -= 0.2;
                cc.audioEngine.setVolume(lastBgmIdTmp, lastVolume);
            }
            if(curBgmState && curVolume <= 1){
                curVolume += 0.2;
                cc.audioEngine.setVolume(this.lastBgmId, curVolume);
            }
        }, 1, 5, 0.1)
    },

audioEngine API

最后发现creator audioEngine提供了所需要的基本的API。

点击查看audioEngine API

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

cocos creator 游戏背景音乐处理(音乐循环淡入淡出等) 的相关文章

  • 【Cocos creator】Cocos creator介绍和入门

    目录 一 工作流程二 安装和启动三 入门示例四 项目结构五 编辑器界面 Cocos Creator 是一个完整的游戏开发解决方案 xff0c 包含了 cocos2d x 引擎的 JavaScript 实现 xff0c 以及快速开发游戏所需求
  • Cocos 随写

    auto listenter 61 EventListenerTouchOneByOne create 设置单点触摸 listenter gt onTouchBegan 61 Touch pTouch Event event gt bool
  • Qt Creator中配置Opencascade

    Qt Creator中配置Opencascade 前言 xff1a 由于项目需要使用到STEP STP文件 xff0c 还需要三维建模 xff0c 于是就发现了一个工具 目前网上的资源 xff0c 专门分享这方面内容的是eryar大佬 xf
  • Qt Creator 与Python混合编程配置

    第一步 创建Qt工程 第二步 在项目 pro文件下添加python解释器安装路径 添加代码如下 xff0c 大家可复制后更改python版本以及安装路径 INCLUDEPATH 43 61 C Python include LIBS 43
  • Creator-配置MSVC调试器

    安装完QT后会看到Qt Creator中的MSVC构建组件带有黄色的感叹号 xff0c 那是因为没有调试器的原因 由于Qt MSVC版本套件没有默认安装调试器 需要我们自己手动下载安装 根据官方文档Setting Up Debugger Q
  • Qt Creator 无法编辑Qml界面,报错:“Qt Quick emulation layer crashed”

    今日在Qml界面编辑中 xff0c 突然无法使用设计师编辑器 xff0c 并报错如图 xff1a 代码定位也无法定位到错误的位置处 xff0c 通过注释代码的方式检查后 xff0c 发现错误产生原因是某个部件设置了两个状态State xff
  • CentOS6.5上安装qt-creator-opensource-linux-x86-3.1.2.run

    1 qt creator opensource linux x86 3 1 2 run的下载 wget http mirrors hustunique com qt official releases qtcreator 3 1 3 1 2
  • 【Cocos creator】Cocos creator介绍和入门

    目录 一 工作流程二 安装和启动三 入门示例四 项目结构五 编辑器界面 Cocos Creator 是一个完整的游戏开发解决方案 xff0c 包含了 cocos2d x 引擎的 JavaScript 实现 xff0c 以及快速开发游戏所需求
  • Qt Creator老是提示红色信息In included file:unknown type name ‘b‘,怎么解决?

    1 问题描述 如题 xff0c Qt Creator老是提示红色信息In included file unknown type name 39 b 39 xff0c 怎么解决 xff1f 2 解决方法 其实这些提示信息 xff0c 不会影响
  • Qt Creator使用CMake配置第三方库

    语法 include directories 添加第三方库头文件路径 这里的 include directories 直接向括号里加入第三方库的头文件路径即可 span class token function include direct
  • 链游

    一 前言 身为一名从事移动互联网App开发多年的从业人员 一直在关注前沿的技术方向 以免被时代的列车遗落 从18年底开始关注DApp技术的发展 COCOS发起的COCOS BCX以区块链为底层技术 专注区块链游戏领域的DApp游戏开发框架自
  • 【Cocos谁学谁会】定制属于自己的脚本模板

    版权申明 本文原创首发于以下网站 您可以自由转载 但必须加入完整的版权声明 博客园 https www cnblogs com MogooStudio csdn博客 https blog csdn net nmjkl001 知乎 https
  • vscode保存以后或者切换文件以后卡顿,代码提示卡顿

    主要原因 可能是因为你们装了这个扩展 导致vscode会对所有文件进行格式化 一般是开启了vscode保存快捷键格式化以后才会出现这个问题 解决方案 把这个快捷键改一下就好 一般问题是显示什么 正在启动格式化程序 然后每切换一个页面都要改一
  • cocos笔记——如何读取json表

    创建json表 1 将所需数据录入excel表格 或其他可转换为json表的文档 2 复制表中需要的文字 用在线json表转换工具 如 在线json校验格式化工具 中的Excel转json功能 将表格转化为json表的格式 3 复制转化好的
  • cocos creator 中读取Excel表格中的数据

    一 使用相应工具将Excel文件转化成JSON文件导入到cocos creator资源文件 二 在VS中对Excel文本中的数据进行转换 Excel文本中各项数据的名称对应代码中的data export default class Task
  • 解决window平台下cocos creator 构建发布面板打开后无法显示问题

    项目场景 creator构建发布界面 问题描述 window平台下cocos creator 构建发布面板打开后无法显示 原因分析 项目的配置文件目录setting和local目录内容混乱可能会导致该问题 这时候后重装creator也是没用
  • Cocos2d-x 3.x部署

    这是我第一次写技术文章 这里只是分享一下我的部署经验 请各位参考 谢谢 我简单的写写我的部署步骤 只参考了官方的readme 环境 win7 64位 1 打开控制台cmd 2 进入到cocos2d x引擎目录 键入setup py 键入的前
  • [Cocos Creator] Cocos Creator 下拉框(Dropdown)组件的实现

    模仿Unity写了一个Dropdown的组件 使用方法可以见工程 链接见底下 https github com ETRick CocosCreator Dropdown tree master Dropdown
  • cocos学习笔记---Node 支持的事件类型

    Node 支持的事件类型主要有 export enum EventType 触摸事件 TOUCH START 0 当手指触点落在目标节点区域内时 TOUCH MOVE 0 当手指在屏幕上目标节点区域内移动时 TOUCH END 0 当手指在
  • CocosCreator TypeScript使用protobuf

    开发环境 Mac环境 CocosCreator TypeScript 使用protobuf 准备工作 1 CocosCreator 2 WebStorm VSCode 3 安装node js 4 下载protobufjs6 8 6 命令行安

随机推荐