点击音效系统

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,这样每个按钮都有了默认的点击音效
相关推荐
ai小鬼头3 分钟前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 分钟前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子6 分钟前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边6 分钟前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8889 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家9 分钟前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试