点击音效系统

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,这样每个按钮都有了默认的点击音效
相关推荐
fruge2 小时前
Vue项目中的Electron桌面应用开发实践指南
前端·vue.js·electron
漂流瓶jz8 小时前
Webpack中各种devtool配置的含义与SourceMap生成逻辑
前端·javascript·webpack
前端架构师-老李8 小时前
React 中 useCallback 的基本使用和原理解析
前端·react.js·前端框架
木易 士心9 小时前
CSS 中 `data-status` 的使用详解
前端·css
明月与玄武9 小时前
前端缓存战争:回车与刷新按钮的终极对决!
前端·缓存·回车 vs 点击刷新
牧马少女9 小时前
css 画一个圆角渐变色边框
前端·css
zy happy9 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
小雨青年9 小时前
Cursor 项目实战:AI播客策划助手(二)—— 多轮交互打磨播客文案的技术实现与实践
前端·人工智能·状态模式·交互
小光学长10 小时前
基于Vue的儿童手工创意店管理系统as8celp7(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
meichaoWen10 小时前
【Vue】Vue框架的基础知识强化
前端·javascript·vue.js