UI 組件 | Button

 

最近在與其他自學 Cocos Creator 的小伙伴們交流過程中，發現許多小伙伴對基礎組件的應用並不是特別了解，自己在編寫游戲的過程中也經常對某個屬性或者方法的用法所困擾，而網上也沒有比較清晰的用法講解，所以准備對常用的 UI 組件常用用法進行一個總結，方便自己和其他小伙伴們查看，下面正文開始（注：屬性介紹部分大部分內容我會取自官方文檔）。

 

---

 

Button（按鈕）組件

 

Button 組件可以響應用戶的點擊操作，當用戶點擊 Button 時，Button 自身會有狀態變化。另外，Button 還可以讓用戶在完成點擊操作后響應一個自定義的行為。

 

創建 Button 組件

層級管理器右擊->創建節點->創建 UI 節點->Button 即可創建 Button 組件。

 

屬性介紹

創建成功后，屬性面板可以看到 Button 組件特有的屬性，下面對這些屬性一一介紹：

屬性	功能說明
Target	Node 類型，當 Button 發生 Transition 的時候，會相應地修改 Target 節點的 SpriteFrame，顏色或者 Scale。
interactable	布爾類型，設為 false 時，則 Button 組件進入禁用狀態。
Transition	枚舉類型，包括 NONE, COLOR，SPRITE 和 SCALE。每種類型對應不同的 Transition 設置。詳情見下方的 Button Transition 部分。
Click Event	列表類型，默認為空，用戶添加的每一個事件由節點引用，組件名稱和一個響應函數組成。詳情見下方的 Button 事件 部分。

 

Button Transition 部分

Button 的 Transition 用來指定當用戶點擊 Button 時的狀態表現。目前主要有 NONE，COLOR，SPRITE 和 SCALE。

 

Color Transition

屬性	功能說明
Normal	Button 在 Normal 狀態下的顏色。
Pressed	Button 在 Pressed 狀態下的顏色。
Hover	Button 在 Hover 狀態下的顏色。
Disabled	Button 在 Disabled 狀態下的顏色。
Duration	Button 狀態切換需要的時間間隔。

 

Sprite Transition

屬性	功能說明
Normal	Button 在 Normal 狀態下的 SpriteFrame。
Pressed	Button 在 Pressed 狀態下的 SpriteFrame。
Hover	Button 在 Hover 狀態下的 SpriteFrame。
Disabled	Button 在 Disabled 狀態下的 SpriteFrame。

 

Scale Transition

屬性	功能
Duration	Button 狀態切換需要的時間間隔。
ZoomScale	當用戶點擊按鈕后，按鈕會縮放到一個值，這個值等於 Button 原始 scale * zoomScale, zoomScale 可以為負數

 

Button 點擊事件

Button 可以額外添加 Click 事件，用於響應玩家的點擊操作。有以下兩種方法。

 

通過屬性檢查器添加回調

序號	屬性	功能說明
1	Target	帶有腳本組件的節點。
2	Component	腳本組件名稱。
3	Handler	指定一個回調函數，當用戶點擊 Button 時會觸發此函數。
4	CustomEventData	用戶指定任意的字符串作為事件回調的最后一個參數傳入。

 

1.編寫回調函數腳本：

// button.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    // onLoad () {},
​
    start () {
​
    },
​
    // update (dt) {},
​
    // button 回調函數
    cb_button(event, customEventData){
        console.log("Hello," + customEventData + "!");
    }
});

 

2.編寫好后將 button.js 掛在到 Button 節點下：

 

3.設置 Click Events 為 1，並將 Button 節點拖到帶有 cc.node 的編輯框，后面分別選擇對應的腳本和方法，CustomEventData 處輸入要打印的字符串：

 

4.預覽游戲，點擊 Button 按鈕發現控制台正常打印出剛才輸入的字符串，說明成功調用回調函數：

 

通過腳本添加回調

通過腳本添加回調有以下兩種方式：

方法一：

這種方法添加的事件回調和使用編輯器添加的事件回調是一樣的，都是通過 Button 組件實現。首先需要構造一個 cc.Component.EventHandler 對象，然后設置好對應的 target、component、handler 和 customEventData 參數。

1.編寫腳本如下：

// button.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    onLoad() {
        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = this.node;    // 這個 node 節點是你的事件處理代碼組件所屬的節點
        clickEventHandler.component = "button";    // 這個是代碼文件名
        clickEventHandler.handler = "cb_button";
        clickEventHandler.customEventData = "小明";
​
        var button = this.node.getComponent(cc.Button);
        button.clickEvents.push(clickEventHandler);
    },
​
    start() {
​
    },
​
    // update (dt) {},
​
    // button 回調函數
    cb_button(event, customEventData) {
        // 這里 event 是一個 Event 對象，你可以通過 event.target 取到事件的發送節點
        var node = event.target;
        var button = this.node.getComponent(cc.Button);
        // 這里的 customEventData 參數就等於你之前設置的 "foobar"
        console.log("Hello," + customEventData + "!");
    }
});

 

2.編寫好后將 button.js 掛在到 Button 節點下，預覽游戲，點擊 Button 按鈕發現控制台正常打印出剛才輸入的字符串，說明成功調用回調函數：

 

方法二：

通過 button.node.on('click', ...) 的方式來添加，這是一種非常簡便的方式，但是該方式有一定的局限性，在事件回調里面無法獲得當前點擊按鈕的屏幕坐標點，也無法傳遞 customEventData。

1.編寫腳本如下：

// button.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    onLoad() {
        this.node.on('click', this.cb_button, this);
    },
​
    start() {
​
    },
​
    // update (dt) {},
​
    // button 回調函數
    cb_button(button) {
        console.log("Hello,小明！");
    }
});

 

2.編寫好后將 button.js 掛在到 Button 節點下，預覽游戲，點擊 Button 按鈕發現控制台正常打印出剛才輸入的字符串，說明成功調用回調函數：

 

拓展：

動態修改 Button 圖片

1.新建 Button 組件，並設置初始默認圖片：

 

2.編寫腳本如下：

// button.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
        buttonBool:true,
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    onLoad() {
        this.node.on('click', this.cb_button, this);
    },
​
    start() {
​
    },
​
    // update (dt) {},
​
    // button 回調函數
    cb_button(button) {
        console.log("Hello,小明！");
​
        var button = this.node.getComponent(cc.Button);
        if(this.buttonBool == true){
            cc.loader.loadRes("off", cc.SpriteFrame, function (err, spriteFrame) {
                button.normalSprite = spriteFrame;
                button.pressedSprite = spriteFrame;
                button.hoverSprite = spriteFrame;
            });
​
            this.buttonBool = false;         
        }else{            
            cc.loader.loadRes("on", cc.SpriteFrame, function (err, spriteFrame) {
                button.normalSprite = spriteFrame;
                button.pressedSprite = spriteFrame;
                button.hoverSprite = spriteFrame;
            });
​
            this.buttonBool = true;        
        }        
    }
});

 

3.將腳本掛載到 Button 組件上並運行，可以看到點擊按鈕時可以改變按鈕的貼圖：

 

---

 

我是「Super於」，立志做一個每天都有正反饋的人！

​