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

演示基于整合了phaser游戏框架的开发平台中音频的简单使用这里以制作一个风铃为例。事先需要准备一些资源风铃声音文件、风铃图片。创建游戏拖动“游戏容器”到界面中即可无需特别配置图1.添加游戏场景创建场景前需要先创建场景面板再往面板中拖入“游戏场景”组件。图2.添加场景属性配置真实物理环境能让我们减少很多物理监测代码所以这里启用真实物理支持为了视觉效果好一点主要是会显示物理连接线这里我们启用物理调试图3.配置场景预加载预加载是一个面板用来容纳预加载的资源这个组件对应phaser的scene的preload阶段图4.添加预加载面板加载风铃音频资源类型选择audio图5.加载音频在地址簿中写上音频文件所在地址(会存在跨域问题这里演示就加载同域名下的文件)图6.配置音频地址加载风铃图片加载类型选择spritesheet这里加载的是一张组合图然后写上图片地址图7.加载风铃图片这里点击配置填写配置信息图8.配置切图尺寸创建阶段事先创建一个变量这个边是一个长度为8的数组用来记录8个音频的状态图9.添加声音池绑定变量创建音频对象这里我们创建8个音频通过迭代的方式比较方便迭代器的数据源就绑定到上面的数组这样就能创建8个音频图10.创建声音池拖入音频到迭代器中图11.创建声音池元素声音资源选择之前预加载配置的声音文件图12.配置声音池元素资源配置声音资源播放监听绑定到上面数组中的play属性这样当play变化时就播放声音图13.配置播放监听配置播放完毕事件需要在音频播放完毕时修改play的值这个值用于判断当前音频是否处于播放中图14.配置事件配置代码如下即complete事件中设置playing为falsereturn { complete(phaser,game,scene,sound,scope) { scope[design-ui-phaser-sound-add-1781313144735].data.playing false } }图15.播放完毕重置状态创建图片栈拖动图栈物质组件到创建面板中图16.添加图栈设定具体属性这里我们创建8个元素即8列1行由于存在重力原因每个元素会垂下去又因为有拉扯看上去就和1列8行一样了。图17.配置图栈编辑创建后执行方法让元素接受事件图18.添加创建后执行的代码设定元素支持事件设定显示层级composite.bodies.forEach(c { c.gameObject.depth 1000 c.gameObject.setInteractive({ useHandCursor: true }) c.gameObject.on(pointerdown,() { console.log(c.id) }) })图19.让元素支持事件响应绑定物理body拖动一个绑定刚体组件到图栈物质组件里面目的时用于绑定图栈里面的一个元素图20.创建刚体这里我们绑定最后一个图21.绑定刚体配置碰撞事件配置事件让元素在碰撞的时候发出声音即风铃晃动时发声图22.编辑碰撞事件先找到没有播放的音频然后更改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 } }图23.碰撞播放音频效果当用鼠标拨动风铃的时候就会播放风铃的声音如果声音池中的8个音频都在播放中就不会产生新的声音这里需要添加支持matter鼠标指针约束图24.播放声音