当前位置：首页 > news >正文

可视化游戏开发平台的实现-音频的简单使用

news 2026/7/29 2:36:28

演示基于整合了phaser游戏框架的开发平台中音频的简单使用，这里以制作一个风铃为例。事先需要准备一些资源：风铃声音文件、风铃图片。

创建游戏

拖动“游戏容器”到界面中即可，无需特别配置

场景

创建场景前，需要先创建场景面板，再往面板中拖入“游戏场景”组件。

属性配置

真实物理环境能让我们减少很多物理监测代码，所以这里启用真实物理支持，为了视觉效果好一点（主要是会显示物理连接线），这里我们启用物理调试

预加载

预加载是一个面板，用来容纳预加载的资源，这个组件对应phaser的scene的preload阶段

加载风铃音频

资源类型选择audio

在地址簿中写上音频文件所在地址(会存在跨域问题，这里演示就加载同域名下的文件)

加载风铃图片

加载类型选择spritesheet，这里加载的是一张组合图，然后写上图片地址

这里点击配置填写配置信息

创建阶段

事先创建一个变量，这个边是一个长度为8的数组，用来记录8个音频的状态

创建音频对象

这里我们创建8个音频，通过迭代的方式比较方便，迭代器的数据源就绑定到上面的数组，这样就能创建8个音频

拖入音频到迭代器中

声音资源选择之前预加载配置的声音文件

配置声音资源

播放监听绑定到上面数组中的play属性，这样，当play变化时就播放声音

配置播放完毕事件

需要在音频播放完毕时修改play的值，这个值用于判断当前音频是否处于播放中

配置代码如下，即complete事件中设置playing为false

return { complete(phaser,game,scene,sound,scope) { scope['design-ui-phaser-sound-add-1781313144735'].data.playing = false } }

创建图片栈

拖动图栈物质组件到创建面板中

设定具体属性，这里我们创建8个元素，即8列1行，由于存在重力原因，每个元素会垂下去，又因为有拉扯，看上去就和1列8行一样了。

编辑创建后执行方法，让元素接受事件

设定元素支持事件，设定显示层级

composite.bodies.forEach(c => { c.gameObject.depth = 1000 c.gameObject.setInteractive({ useHandCursor: true }) c.gameObject.on('pointerdown',() =>{ console.log(c.id) }) })

绑定物理body

拖动一个绑定刚体组件到图栈物质组件里面，目的时用于绑定图栈里面的一个元素

这里，我们绑定最后一个

配置碰撞事件

配置事件，让元素在碰撞的时候发出声音，即风铃晃动时发声

先找到没有播放的音频，然后更改play的值并设定为播放状态

for(let i = 0;i < $__fengSoundPool__.length;i++) { if(!$__fengSoundPool__[i].playing) { $__fengSoundPool__[i].play = Math.random() $__fengSoundPool__[i].playing = true console.log('播放第' + i + '个音频') return } }