引擎: CocosCreator 3.8.0
环境: Mac
Gitee: oops-game-kit
注: 作者
dgflash
的oops-framework框架QQ群: 628575875
简介
在CocosCreator中,音频的播放主要通过组件: AudioSource 来管理音乐、音效的播放、暂停和停止等功能。
该组件的两个主要接口:
play()
用于播放音乐playOneShot()
用于播放音效
CocosCreator官方提供了对应的音频管理器,大致原理是:
- 在起始场景中,添加根节点,该节点下包含组件
AudioSource
- 该节点在场景脚本中,声明为常驻根节点
- 声音管理器为单例模式,在项目初始化中,该管理器会获取该组件,用于实现对音频的管理
import {
AudioSource, Component, game } from 'cc';
import {
audioManager} from 'manager/audioManager';
const {
ccclass, property } = _decorator;
@ccclass('GameRoot')
export class GameRoot extends Component {
@property(AudioSource)
_audioSource: AudioSource = null!;
onLoad () {
// 获取AudioSource组件,并添加到管理器中
const audioSource = this.node.getComponent(AudioSource)!;
audioManager.instance.init(audioSource);
// 声明常驻根节点,该节点不会在场景切换中被销毁
game.addPersistRootNode(this.node);
}
}
更多内容可参考博客: CocosCreator笔记 之 背景音乐
AudioManger
在oops-framework框架中,音频管理通过AudioManager
来实现的。
该类通过管理框架封装的AudioMusic
和 AudioEffect
来实现音乐和音效的播放、暂停和停止等。
他们的继承结构:
该管理类提供的主要接口有:
参数或接口 | 说明 |
---|---|
progressMusic | 设置/获取音乐的播放进度 |
volumeMusic | 设置/获取音乐的音量,范围在[0, 1]之间 |
switchMusic | 设置/获取音乐开关 |
volumeEffect | 设置/获取音效音量大小,范围在[0, 1]之间 |
switchEffect | 设置/获取音效开关 |
load() | 音乐音效的初始化加载,并设置音量大小等 |
save() | 本地存储音乐音效的音量、开关等配置数据 |
playMusic(url, callback?) | 播放音乐,可添加音乐播放完成回调 |
playerMusicLoop(url) | 循环播放音乐 |
setMusicComplete(callback) | 设置背景音乐播放完成回调 |
playEffect(url) | 播放音效 |
resumeAll() | 恢复当前暂停的音乐与音效播放 |
pauseAll() | 暂停当前音乐与音效的播放 |
stopAll() | 停止当前音乐与音效的播放 |
有几个关键的方法需要注意下:
load()
用于音乐音效的初始化
load() {
// 获取或添加AudioSource的组件,用于音乐和音效的管理
this.music = this.getComponent(AudioMusic) || this.addComponent(AudioMusic)!;
this.effect = this.getComponent(AudioEffect) || this.addComponent(AudioEffect)!;
// 获取本地存储数据,设置音乐音效的音量大小和开关
let data = oops.storage.get(LOCAL_STORE_KEY);
if (data) {
try {
this.local_data = JSON.parse(data);
this._volume_music = this.local_data.volume_music;
this._volume_effect = this.local_data.volume_effect;
this._switch_music = this.local_data.switch_music;
this._switch_effect = this.local_data.switch_effect;
}
catch (e) {
this.local_data = {
};
this._volume_music = 1;
this._volume_effect = 1;
this._switch_music = true;
this._switch_effect = true;
}
// 根据数据设置声音大小
if (this.music) this.music.volume = this._volume_music;
if (this.effect) this.effect.volume = this._volume_effect;
}
}
playMusic
播放音乐相关
// 播放音乐
playMusic(url: string, callback?: Function) {
if (this._switch_music) {
this.music.load(url, callback);
}
}
// AudioMusic.ts 加载音乐并播放
public load(url: string, callback?: Function) {
// 根据url进行动态加载
oops.res.load(url, AudioClip, (err: Error | null, data: AudioClip) => {
if (err) {
error(err);
}
// 检测音乐是否播放中,如果播放则停止
if (this.playing) {
this._isPlay = false;
this.stop();
}
if (this._url) {
oops.res.release(this._url);
}
// 设置要播放的音频
this.enabled = true;
this.clip = data;
// 注:事件定义在这里,是为了在播放前设置初始播放位置数据
callback && callback();
// 开始播放
this.play();
this._url = url;
});
}
注:这段代码主要是为了理解框架对音乐音效的封装,先后台加载,完成后才进行播放。
示例
在框架中使用音效管理,在Oops.ts
提供的入口主要是:
export class oops {
/** 游戏音乐管理 */
static audio: AudioManager;
}
在程序中使用的主要示例:
// 初始化
oops.audio.init();
// 设置音乐的播放
oops.audio.volumeMusic = 0.5;
oops.audio.playerMusicLoop("audio/bgm");
// 设置音效的播放
oops.audio.switchEffect = true;
oops.audio.playEffect("audio/click");
// 设置暂停
oops.audio.pauseAll();
注:如果设置页面关闭,注意音频的保存,记得调用
save()
接口即可。
感谢作者dgflash
的分享,作者CSDN博客: dgflash CSDN
最后,祝大家学习和生活愉快!