拡張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);
    }
});