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 游戏背景音乐处理(音乐循环淡入淡出等) 的相关文章

  • Qt Creator报错无法引用某个库函数的问题

    target link libraries detector nvinfer nvinfer plugin nvparsers OpenCV LIBS 34 stdc 43 43 fs 34 今天编译一个开源库 xff0c 用cmake构建
  • Cocos 随写

    auto listenter 61 EventListenerTouchOneByOne create 设置单点触摸 listenter gt onTouchBegan 61 Touch pTouch Event event gt bool
  • Ubuntu下不能切换中文,qt creator无法输入中文,sogo输入法(详细步骤)

    目录 xff1a 1 解决ubuntu 不支持切换中文 xff0c 并安装sogo输入法步骤 xff1b 2 解决Qt Creator不支持中文输入 xff1a 详细步骤 xff1a 一 解决ubuntu 不支持切换中文 xff0c 并安装
  • Gym render_modes = env_creator.metadata[“render_modes“]KeyError: ‘render_modes‘ 解决方案

    问题描述 今天在运行一行代码时 xff1a FLAGS env是我自己定义的环境 env 61 gym make FLAGS env 出现了这种错误 xff1a env 61 gym make FLAGS env File 34 lib p
  • cocos creator 游戏背景音乐处理(音乐循环淡入淡出等)

    在处理游戏背景音乐中遇到的问题 xff0c 策划对于音乐播放提出新的想法 但由于目前周围没有人尝试过 xff0c 所以自己摸索的来 需求 在同一场景音乐处理 一般同一场景是同一首背景音乐 现需求在同一场景 xff08 时代 xff09 内播
  • Qt Creator中添加菜单栏实例

    Qt Creator中添加菜单栏 nbsp 实例是本文介绍的内容 内容不多 很丰富的实现 先来看内容 Qt中的菜单栏添加相对VC比较简单 今天找了一天的槽函数如何添加 到了下午的时候终于有些眉目 现在我们来看一下在Qt中如何添加菜单栏 1
  • docker里面安装Qt Creator

    sudo apt get install qt5 default qtcreator
  • 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 不会影响
  • 【Cocos\杂谈】Windows下Cocos2d-x 3.14环境搭建

    哈哈 我又回来啦 消失了几个月了 不知道各位观众老爷是否想念我了 经过了考研和期考双重洗礼 放假了终于能够重新回到学习开发的阵地上来了 近期呢 我这边做毕业设计 关于SpringMvc Spring Hibernate的SSH框架毕业设计
  • CocosCreator3.8研究笔记(一)windows环境安装配置

    一 安装Cocos 编辑器 1 下载Cocos Dashboard安装文件 Cocos 官方网站Cocos Dashboard下载地址 https www cocos com creator download9 下载完成后会得到CocosD
  • Cocos Creator 华容道

    环境 cocos creator 2 0 10 Mac环境 TypeScript 文末附源码链接 本文提供了游戏玩法的逻辑 支持关卡配置 可以自由配置关卡 先看一下效果 首先 我们看一下我们要处理的问题 1 区域划分 2 角色摆放 即 关卡
  • CocosCreator3.8研究笔记(十四)CocosCreator 资源管理Asset Manager

    在游戏的开发过程中 需要使用到大量的图片 音频等资源来 从而带来管理上的困难 Asset Manager 资源管理模块具备加载资源 查找资源 销毁资源 缓存资源 Asset Bundle 等功能 帮助开发者管理其资源的使用 一 资源的加载
  • vscode保存以后或者切换文件以后卡顿,代码提示卡顿

    主要原因 可能是因为你们装了这个扩展 导致vscode会对所有文件进行格式化 一般是开启了vscode保存快捷键格式化以后才会出现这个问题 解决方案 把这个快捷键改一下就好 一般问题是显示什么 正在启动格式化程序 然后每切换一个页面都要改一
  • Rot.js 随机地牢,迷宫地图生成

    js 插件随机地牢 迷宫地图生成 插件git https github com ondras rot js tree master dist 使用 1 我们的游戏是在网页内进行的 一个基本的 HTML 文件就足够了
  • cocos2dx中的内存加载PLIST

    今天 加载图片时有问题 myButtonPList loadTextures jineng 02103 png jineng 02103 light png jineng 03101 png UI TEX TYPE PLIST myButt
  • 从零开始实现自己的Kalimba——Cocos Creator新手教程系列(零)前言

    由于作者也是第一次摸索 在趟雷无数后终于艰难地实现了自己的第一个小程序 废话不多说 从接下来的系列中我们会尝试使用Cocos Creator创建一个游戏流程完善的 基于Tiledmap瓦片地图的Kalimba游戏 游戏介绍 Kalimba是
  • 各大知名游戏引擎分析报告

    游戏引擎之争就像编程语言之争一样 在游戏开发圈永远是一个火爆的话题 目前市面上主流的一些游戏引擎 我们来给他们做一些比较 了解他们的历史 特点 为了严谨 备注一下写这个文章的时间编写时间是2021年4月20日 目前国内主流在用的游戏引擎有
  • CocosCreator 长地图相机渲染不全

    记录一下 浏览器运行的时候用default是没有问题的 一旦给换成其他型号的屏幕尺寸 相机就加载不全 地图宛如断开了一样 但是地图里面的刚体什么的都还在 只是不显示 类似这个样子 搜索了一大圈 大概有这么多的可能 1 地图的图层是否有问题
  • Cocos2d-x 3.x部署

    这是我第一次写技术文章 这里只是分享一下我的部署经验 请各位参考 谢谢 我简单的写写我的部署步骤 只参考了官方的readme 环境 win7 64位 1 打开控制台cmd 2 进入到cocos2d x引擎目录 键入setup py 键入的前
  • cocos学习笔记---Node 支持的事件类型

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

随机推荐