点击音效系统

SoundCtr.ts 复制代码
import { ResLoader } from "../../../cclib/resourcesManager/ResLoader";
import { LoginUser } from "../../global/bridge/LoginUser";
import { PromiseCatcher } from "../../global/errHandler/PromiseCatcher";

class CSoundCtr {
    private _playEffect(url: string) {
        const volume = LoginUser.getVolume();
        if (volume <= 0) {
            return;
        }

        cc.audioEngine.setEffectsVolume(volume / 100);

        const clip = ResLoader.get(url, false) as cc.AudioClip;
        if (clip) {
            cc.audioEngine.playEffect(clip, false);
            return;
        }

        ResLoader.load(url, cc.AudioClip)
            .then(clip => {
                cc.audioEngine.playEffect(clip, false);
            })
            .catch(PromiseCatcher);
    }

    playOpenGEgg() {
        this._playEffect('sounds/goldsmash');
    }

    playOpenDEgg() {
        this._playEffect('sounds/gamsmash');
    }

    playReward() {
        this._playEffect('sounds/reward');
    }

    playClick() {
        this._playEffect('sounds/click');
    }   
}

export const SoundCtr = new CSoundCtr();
  • _playEffect方法load音效并播放,同时根据系统声音设置来调节音量
  • 然后下面不同方法来配置不同的音效
SoundButtonClick.ts 复制代码
import { IKV } from "../../../libs/interface/IKV";
import { SoundCtr } from "./SoundCtr";

const {ccclass, property, menu, executionOrder} = cc._decorator;

export enum ESoundButtonClickType {
    Common = 0,
    None = 1,
    Back = 2,
    Close = 3,
    FirstPay = 4,
    Claim = 5,
}

@ccclass
@menu('GaGa/Com/SoundButtonClick')
@executionOrder(1)
export default class SoundButtonClick extends cc.Component {
    @property({type: cc.Enum(ESoundButtonClickType), tooltip: CC_DEV && '按钮点击声音类型'})
    soundType: ESoundButtonClickType = ESoundButtonClickType.Common;

    owner?: string;

    onLoad() {
        const button = this.getComponent(cc.Button);
        if (!button) {
            return;
        }

        const handler = new cc.Component.EventHandler();
        handler.target = this.node;
        handler.component = 'SoundButtonClick';
        handler.handler = 'play';
        button.clickEvents.push(handler);
    }

    protected onDisable(): void {
    }

    static setClickParam(target: cc.Node, param: IKV) {
        const bc = target?.getComponent(SoundButtonClick);
    }

    /** 播放点击按钮的声音 */
    play() {
        switch(this.soundType) {
            case ESoundButtonClickType.None:
                return;

            case ESoundButtonClickType.Common:
                SoundCtr.playClick();
                break;


        }
    }
}
  • 配置音效类型ESoundButtonClickType,提供给cocos编辑器,直接在编辑器上选择对应种类的音效
  • onLoad里给button添加上方法,使得按钮被点击了就会触发对应的音效
SoundButtonClickManager.ts 复制代码
import SoundButtonClick from "./SoundButtonClick";

const {ccclass, property, menu} = cc._decorator;

@ccclass
@menu('GaGa/Com/SoundButtonClickManager')
export default class SoundButtonClickManager extends cc.Component {
    onLoad() {
        const name = this.node.name;
        const buttons = this.getComponentsInChildren(cc.Button);
        buttons.forEach(button => {
            const comp = button.getComponent(SoundButtonClick) || button.addComponent(SoundButtonClick);
            comp.owner = comp.owner || name;
        });
    }

}
  • 这个方法挂载到canvas下,监控所有的button,这样每个按钮都有了默认的点击音效
相关推荐
liangshanbo12152 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15884 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_5 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15886 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫6 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo6 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li7 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊8 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz9 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom9 小时前
iframe实战:跨域通信与安全隔离
前端·安全