点击音效系统

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,这样每个按钮都有了默认的点击音效
相关推荐
聪明的墨菲特i23 分钟前
React与Vue:哪个框架更适合入门?
开发语言·前端·javascript·vue.js·react.js
时光少年24 分钟前
Android 副屏录制方案
android·前端
拉不动的猪31 分钟前
v2升级v3需要兼顾的几个方面
前端·javascript·面试
时光少年33 分钟前
Android 局域网NIO案例实践
android·前端
半兽先生1 小时前
VueDOMPurifyHTML 防止 XSS(跨站脚本攻击) 风险
前端·xss
冴羽1 小时前
SvelteKit 最新中文文档教程(20)—— 最佳实践之性能
前端·javascript·svelte
Jackson__1 小时前
面试官:谈一下在 ts 中你对 any 和 unknow 的理解
前端·typescript
zpjing~.~1 小时前
css 二维码始终显示在按钮的正下方,并且根据不同的屏幕分辨率自动调整位置
前端·javascript·html
红虾程序员1 小时前
Linux进阶命令
linux·服务器·前端
yinuo1 小时前
uniapp在微信小程序中实现 SSE 流式响应
前端