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于」,立志做一个每天都有正反馈的人!
UI 组件 | Button的更多相关文章
- Android经常使用UI组件 - Button
button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...
- 安卓开发:UI组件-Button和EditText
2.3Button Button继承自TextView,除了通过属性设置按钮样式,还可以通过绑定drawable文件的方式来实现不同样式. 2.3.1按钮样式 新建Activity:ButtonAct ...
- Android开发8:UI组件TextView,EditText,Button
版本:Android4.3 API18 学习整理:liuxinming TextView 概述 TextView直接继承了View(EditText.Button两个UI组件类的父类) TextVie ...
- iOS之UI组件整理
作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...
- AngularJs的UI组件ui-Bootstrap分享(十)——Model
Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...
- AngularJs的UI组件ui-Bootstrap分享(九)——Alert
alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...
- AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover
tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: ( ...
- AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...
- Android热身:通过网络获取资源并更新UI组件
Android热身:通过网络获取资源并更新UI组件 目标 点击"发送请求"按钮,下载某网页的html源码,并显示在TextView控件上:点击"清空",清除Te ...
随机推荐
- Bzoj 3165 [Heoi2013]Segment题解
3165: [Heoi2013]Segment Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 668 Solved: 276[Submit][Sta ...
- VC win32 static library静态链接库简单示例
中午在宿舍闲来没事,看到网上一篇帖子,关于静态链接库的英文示例.它在.Net上开发,我将其移到VC上开发,因此对其代码做了相应修改.帖子内容如下:(代码我已修改).原帖见:http://msdn.mi ...
- [记录]NGINX配置HTTPS性能优化方案一则
NGINX配置HTTPS性能优化方案一则: 1)HSTS的合理使用 2)会话恢复的合理使用 3)Ocsp stapling的合理使用 4)TLS协议的合理配置 5)False Start的合理使用 6 ...
- 从似然函数到EM算法(附代码实现)
1. 什么是EM算法 最大期望算法(Expectation-maximization algorithm,又译为期望最大化算法),是在概率模型中寻找参数最大似然估计或者最大后验估计的算法,其中概率模型 ...
- 记一次愚蠢的经历--String不可变性
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 记录一次在写代码时愚蠢的操作,本文涉及到的知识点:S ...
- [小米OJ] 10. 爬楼梯
dp 另: 小米oj上的测试样例是错的 ; ) function solution(line) { if (line == 0) return 0; if (line == 1) return 1; ...
- 六、SQL 多张表数据叠加到一个视图里面
1 create view vABC as select * from a,b,c where a.id = b.aid and b.id = c.bid ---------------------- ...
- z-index不起作用
摘录自 https://blog.csdn.net/apple_01150525/article/details/76546367 z-index无效的情况,一共有三种:1.父标签 position属 ...
- Angular JS 中的内置方法之filter
通过过滤器可以实现很多数据格式化的功能 常用方法形如{{ data | uppercase}} 或者是{{ 123.456 | number:2 }} 也可以通过在控制器中注入$filter来实现功能 ...
- 【Intellij】Hot Swap Failed & class reloaded
用 Intellij IDEA 编译程序时遇到了这个问题,如下图所示: 对结果貌似没什么影响,但暂时没找到出现这个情况的原因……