Creator 拓展展Button组件增加点击音效默缩放。点击间隔

最新推荐文章于 2024-06-28 12:22:13 发布

王清水

最新推荐文章于 2024-06-28 12:22:13 发布

阅读量915

点赞数

分类专栏： Creator 文章标签： Cteator

本文链接：https://blog.csdn.net/wangjianwanxiao/article/details/106995816

版权

Creator 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

扩展Creator Button组件

Creator 拓展展Button组件增加点击音效默缩放。点击间隔。往往游戏的按钮都会加上音效。而大部分通用的音效每次都代码添加是一件很繁琐的工作。按钮的点击缩放效果等，一般我们为了方便，提升开发效率会做成组件形式。

ButtonEx.js 这是对button组件业务层重写了一下。增加了点击音效

/**
 * 修改了缩放默认
 * Button 增加了音效
 * ZhuangZhuang
 */


const SOUND_TYPE = cc.Enum({
    NORMAL: 0,
    CLICK: 1, 
});

let ButtonEx = cc.Class({
    extends: cc.Button,   
   
    properties: { 
        Sound:{
            default:SOUND_TYPE.CLICK,
            type:cc.Enum(SOUND_TYPE)
        }, 
        zoomScale: {
            default: 0.9,
            tooltip: CC_DEV && 'i18n:COMPONENT.button.zoom_scale',
            override:true,
        }, //默认缩放比
        transition: {
            default: cc.Button.Transition.SCALE,
            tooltip: CC_DEV && 'i18n:COMPONENT.button.transition',
            type:  cc.Button.Transition,
            animatable: false,
            notify (oldValue) {
                this._updateTransition(oldValue);
            },
            formerlySerializedAs: 'transition', 
        },  
    },
    start(){
        this.node.on(cc.Node.EventType.TOUCH_START, this.onButtonTouched, this);  
    }, 
    onButtonTouched(){
        this._lockT = Date.now(); 
        if(this.Sound == SOUND_TYPE.NORMAL) return;
        //todo 自己实现的通过点击
        AudioMgr.ins.playClick();
    },
});
 
cc.Class.Attr.setClassAttr(ButtonEx, 'normalColor', 'visible', function() {
    return this.transition === cc.Button.Transition.COLOR;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'pressedColor', 'visible', function() {
    return this.transition === cc.Button.Transition.COLOR;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'hoverColor', 'visible', function() {
    return this.transition === cc.Button.Transition.COLOR;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'disabledColor', 'visible', function() {
    return this.transition  === cc.Button.Transition.COLOR;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'duration', 'visible', function() {
    return this.transition === cc.Button.Transition.COLOR || this.transition === cc.Button.Transition.SPRITE || this.transition ===cc.Button.Transition.SCALE;
}); 
cc.Class.Attr.setClassAttr(ButtonEx, 'normalSprite', 'visible', function() {
    return this.transition === cc.Button.Transition.SPRITE;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'pressedSprite', 'visible', function() {
    return this.transition === cc.Button.Transition.SPRITE;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'hoverSprite', 'visible', function() {
    return this.transition ===cc.Button.Transition.SPRITE;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'disabledSprite', 'visible', function() {
    return this.transition  === cc.Button.Transition.SPRITE;
}); 
cc.Class.Attr.setClassAttr(ButtonEx, 'zoomScale', 'visible', function() {  
    return this.transition  === cc.Button.Transition.SCALE;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'normalMaterial', 'visible', function() {
    return this.enableAutoGrayEffect === true;
});
cc.Class.Attr.setClassAttr(ButtonEx, 'grayMaterial', 'visible', function() {
    return this.enableAutoGrayEffect === true;
});

ButtonSafe.js 用于控制按钮点击间隔。很多业务我们不希望被一直触发比如几秒响应一次。

 
"use strict";
/**
 * 点击间隔时间
 */

cc.Class({
    extends: cc.Component,

    properties: {
        safeTime: {
            default: 0.5,
            tooltip: "按钮保护时间，指定间隔内只能点击一次."
        }
    }, 
    start(){
        let button = this.getComponent(cc.Button);
        if (!button){
            return;
        } 
        this.clickEvents = button.clickEvents; 
        this.node.on('click', ()=>{
            button.clickEvents = [];
            this.scheduleOnce((dt)=>{
                button.clickEvents = this.clickEvents;
            }, this.safeTime);
        }, this);
    }
});