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.编写回调函数脚本:

 1 // button.js
 2 ​
 3 cc.Class({
 4     extends: cc.Component,
 5 ​
 6     properties: {
 7     },
 8 ​
 9     // LIFE-CYCLE CALLBACKS:
10 ​
11     // onLoad () {},
12 ​
13     start () {
14 ​
15     },
16 ​
17     // update (dt) {},
18 ​
19     // button 回调函数
20     cb_button(event, customEventData){
21         console.log("Hello," + customEventData + "!");
22     }
23 });

2.编写好后将 button.js 挂在到 Button 节点下:

3.设置 Click Events 为 1,并将 Button 节点拖到带有 cc.node 的编辑框,后面分别选择对应的脚本和方法,CustomEventData 处输入要打印的字符串:

4.预览游戏,点击 Button 按钮发现控制台正常打印出刚才输入的字符串,说明成功调用回调函数:

通过脚本添加回调

通过脚本添加回调有以下两种方式:

方法一:

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,都是通过 Button 组件实现。首先需要构造一个 cc.Component.EventHandler 对象,然后设置好对应的 target、component、handler 和 customEventData 参数。

1.编写脚本如下:

 1 // button.js
 2 ​
 3 cc.Class({
 4     extends: cc.Component,
 5 ​
 6     properties: {
 7     },
 8 ​
 9     // LIFE-CYCLE CALLBACKS:
10 ​
11     onLoad() {
12         var clickEventHandler = new cc.Component.EventHandler();
13         clickEventHandler.target = this.node;    // 这个 node 节点是你的事件处理代码组件所属的节点
14         clickEventHandler.component = "button";    // 这个是代码文件名
15         clickEventHandler.handler = "cb_button";
16         clickEventHandler.customEventData = "小明";
17 ​
18         var button = this.node.getComponent(cc.Button);
19         button.clickEvents.push(clickEventHandler);
20     },
21 ​
22     start() {
23 ​
24     },
25 ​
26     // update (dt) {},
27 ​
28     // button 回调函数
29     cb_button(event, customEventData) {
30         // 这里 event 是一个 Event 对象,你可以通过 event.target 取到事件的发送节点
31         var node = event.target;
32         var button = this.node.getComponent(cc.Button);
33         // 这里的 customEventData 参数就等于你之前设置的 "foobar"
34         console.log("Hello," + customEventData + "!");
35     }
36 });

2.编写好后将 button.js 挂在到 Button 节点下,预览游戏,点击 Button 按钮发现控制台正常打印出刚才输入的字符串,说明成功调用回调函数:

方法二:

通过 button.node.on('click', ...) 的方式来添加,这是一种非常简便的方式,但是该方式有一定的局限性, 在事件回调里面无法获得当前点击按钮的屏幕坐标点,也无法传递 customEventData

1.编写脚本如下:

 1 // button.js
 2 ​
 3 cc.Class({
 4     extends: cc.Component,
 5 ​
 6     properties: {
 7     },
 8 ​
 9     // LIFE-CYCLE CALLBACKS:
10 ​
11     onLoad() {
12         this.node.on('click', this.cb_button, this);
13     },
14 ​
15     start() {
16 ​
17     },
18 ​
19     // update (dt) {},
20 ​
21     // button 回调函数
22     cb_button(button) {
23         console.log("Hello,小明!");
24     }
25 });

2.编写好后将 button.js 挂在到 Button 节点下,预览游戏,点击 Button 按钮发现控制台正常打印出刚才输入的字符串,说明成功调用回调函数:

拓展:

动态修改 Button 图片

1.新建 Button 组件,并设置初始默认图片:

2.编写脚本如下:

 1 // button.js
 2 ​
 3 cc.Class({
 4     extends: cc.Component,
 5 ​
 6     properties: {
 7         buttonBool:true,
 8     },
 9 ​
10     // LIFE-CYCLE CALLBACKS:
11 ​
12     onLoad() {
13         this.node.on('click', this.cb_button, this);
14     },
15 ​
16     start() {
17 ​
18     },
19 ​
20     // update (dt) {},
21 ​
22     // button 回调函数
23     cb_button(button) {
24         console.log("Hello,小明!");
25 ​
26         var button = this.node.getComponent(cc.Button);
27         if(this.buttonBool == true){
28             cc.loader.loadRes("off", cc.SpriteFrame, function (err, spriteFrame) {
29                 button.normalSprite = spriteFrame;
30                 button.pressedSprite = spriteFrame;
31                 button.hoverSprite = spriteFrame;
32             });
33 ​
34             this.buttonBool = false;         
35         }else{            
36             cc.loader.loadRes("on", cc.SpriteFrame, function (err, spriteFrame) {
37                 button.normalSprite = spriteFrame;
38                 button.pressedSprite = spriteFrame;
39                 button.hoverSprite = spriteFrame;
40             });
41 ​
42             this.buttonBool = true;        
43         }        
44     }
45 });

3.将脚本挂载到 Button 组件上并运行,可以看到点击按钮时可以改变按钮的贴图:

我是「Super于」,立志做一个每天都有正反馈的人!

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章