最近在与其他自学 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于」,立志做一个每天都有正反馈的人!

UI 组件 | Button的更多相关文章

  1. Android经常使用UI组件 - Button

    button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...

  2. 安卓开发:UI组件-Button和EditText

    2.3Button Button继承自TextView,除了通过属性设置按钮样式,还可以通过绑定drawable文件的方式来实现不同样式. 2.3.1按钮样式 新建Activity:ButtonAct ...

  3. Android开发8:UI组件TextView,EditText,Button

    版本:Android4.3 API18 学习整理:liuxinming TextView 概述 TextView直接继承了View(EditText.Button两个UI组件类的父类) TextVie ...

  4. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  5. AngularJs的UI组件ui-Bootstrap分享(十)——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  6. AngularJs的UI组件ui-Bootstrap分享(九)——Alert

    alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...

  7. AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover

    tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: ( ...

  8. AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown

    在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...

  9. Android热身:通过网络获取资源并更新UI组件

    Android热身:通过网络获取资源并更新UI组件 目标 点击"发送请求"按钮,下载某网页的html源码,并显示在TextView控件上:点击"清空",清除Te ...

随机推荐

  1. Bzoj 3165 [Heoi2013]Segment题解

    3165: [Heoi2013]Segment Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 668  Solved: 276[Submit][Sta ...

  2. VC win32 static library静态链接库简单示例

    中午在宿舍闲来没事,看到网上一篇帖子,关于静态链接库的英文示例.它在.Net上开发,我将其移到VC上开发,因此对其代码做了相应修改.帖子内容如下:(代码我已修改).原帖见:http://msdn.mi ...

  3. [记录]NGINX配置HTTPS性能优化方案一则

    NGINX配置HTTPS性能优化方案一则: 1)HSTS的合理使用 2)会话恢复的合理使用 3)Ocsp stapling的合理使用 4)TLS协议的合理配置 5)False Start的合理使用 6 ...

  4. 从似然函数到EM算法(附代码实现)

    1. 什么是EM算法 最大期望算法(Expectation-maximization algorithm,又译为期望最大化算法),是在概率模型中寻找参数最大似然估计或者最大后验估计的算法,其中概率模型 ...

  5. 记一次愚蠢的经历--String不可变性

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 记录一次在写代码时愚蠢的操作,本文涉及到的知识点:S ...

  6. [小米OJ] 10. 爬楼梯

    dp 另: 小米oj上的测试样例是错的 ; ) function solution(line) { if (line == 0) return 0; if (line == 1) return 1; ...

  7. 六、SQL 多张表数据叠加到一个视图里面

    1 create view vABC as select * from a,b,c where a.id = b.aid and b.id = c.bid ---------------------- ...

  8. z-index不起作用

    摘录自 https://blog.csdn.net/apple_01150525/article/details/76546367 z-index无效的情况,一共有三种:1.父标签 position属 ...

  9. Angular JS 中的内置方法之filter

    通过过滤器可以实现很多数据格式化的功能 常用方法形如{{ data | uppercase}} 或者是{{ 123.456 | number:2 }} 也可以通过在控制器中注入$filter来实现功能 ...

  10. 【Intellij】Hot Swap Failed & class reloaded

    用 Intellij IDEA 编译程序时遇到了这个问题,如下图所示: 对结果貌似没什么影响,但暂时没找到出现这个情况的原因……