The Toggle (box) component
Toggle the CheckBox is a, and when it is used with ToggleGroup, may become RadioButton.
Creating Toggle components
Level manager right click -> Create Nodes -> Create UI node -> Toggle Toggle to create components.
Node Description
Toggle node tree assembly generally:
NOTE: checkmark to the Background above, or is a child node in the hierarchy Background.
Introduction property
Once created, the properties panel you can see Toggle component-specific properties, these properties introduced one of the following:
Attributes | Function Description |
---|---|
Target | Node Type, Transition occurs when the Toggle, accordingly modified SpriteFrame Target node, or color Scale. |
interactable | Boolean When set to false, Toggle component into the disabled state. |
Transition | Enumerated types, including NONE, COLOR, SPRITE and SCALE. Transition corresponding to different settings for each type. For details, see below Toggle Transition section. |
isChecked | Boolean type, if this is set to true, the check mark in the enabled state assembly would otherwise be in disabled state. |
checkMark | cc.Sprite type of image to display when Toggle is selected. |
toggleGroup | cc.ToggleGroup type, ToggleGroup, this property Toggle belongs is optional. If this property is null, Toggle is a CheckBox, otherwise, Toggle is a RadioButton. |
Check Events | 列表类型,默认为空,用户添加的每一个事件由节点引用,组件名称和一个响应函数组成。详情见下方的 Toggle 事件 部分。 |
Toggle Transition 部分
Toggle 的 Transition 用来指定当用户点击 Toggle 时的状态表现。目前主要有 NONE,COLOR,SPRITE 和 SCALE。
Color Transition
属性 | 功能说明 |
---|---|
Normal | Toggle 在 Normal 状态下的颜色。 |
Pressed | Toggle 在 Pressed 状态下的颜色。 |
Hover | Toggle 在 Hover 状态下的颜色。 |
Disabled | Toggle 在 Disabled 状态下的颜色。 |
Duration | Toggle 状态切换需要的时间间隔。 |
Sprite Transition
属性 | 功能说明 |
---|---|
Normal | Toggle 在 Normal 状态下的 SpriteFrame。 |
Pressed | Toggle 在 Pressed 状态下的 SpriteFrame。 |
Hover | Toggle 在 Hover 状态下的 SpriteFrame。 |
Disabled | Toggle 在 Disabled 状态下的 SpriteFrame。 |
Scale Transition
属性 | 功能 |
---|---|
Duration | Toggle 状态切换需要的时间间隔。 |
ZoomScale | 当用户点击按钮后,按钮会缩放到一个值,这个值等于 Toggle 原始 scale * zoomScale, zoomScale 可以为负数 |
Toggle 点击事件
Toggle 可以额外添加 Check 事件,用于响应玩家的点击操作。有以下两种方法。
通过属性检查器添加回调
序号 | 属性 | 功能说明 |
---|---|---|
1 | Target | 带有脚本组件的节点。 |
2 | Component | 脚本组件名称。 |
3 | Handler | 指定一个回调函数,当用户点击 Toggle 时会触发此函数。 |
4 | CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入。 |
1.编写回调函数脚本:
1 // toggle.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 // toggle 回调函数 20 cb_toggle(toggle, customEventData) { 21 if(toggle.isChecked){ 22 console.log("Hello," + customEventData + "!"); 23 } 24 } 25 });
2.编写好后将 toggle.js 挂在到 Toggle 节点下:
3.设置 Check Events 为 1,并将 Toggle 节点拖到带有 cc.node 的编辑框,后面分别选择对应的脚本和方法,CustomEventData 处输入要打印的字符串:
4.预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:
通过脚本添加回调
通过脚本添加回调有以下两种方式:
方法一:
这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,都是通过 Toggle 组件实现。首先需要构造一个 cc.Component.EventHandler 对象,然后设置好对应的 target、component、handler 和 customEventData 参数。
1.编写脚本如下:
1 // toggle.js 2 3 cc.Class({ 4 extends: cc.Component, 5 6 properties: { 7 }, 8 9 // LIFE-CYCLE CALLBACKS: 10 11 onLoad() { 12 var checkEventHandler = new cc.Component.EventHandler(); 13 checkEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点 14 checkEventHandler.component = "toggle" 15 checkEventHandler.handler = "cb_toggle"; 16 checkEventHandler.customEventData = "小明"; 17 18 var toggle = this.node.getComponent(cc.Toggle); 19 toggle.checkEvents.push(checkEventHandler); 20 }, 21 22 start() { 23 24 }, 25 26 // update (dt) {}, 27 28 // toggle 回调函数 29 cb_toggle(toggle, customEventData) { 30 // toggle 为 toggle 本身 31 if (toggle.isChecked) { 32 console.log("Hello," + customEventData + "!"); 33 } 34 } 35 });
2.编写好后将 toggle.js 挂在到 Toggle 节点下,预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:
方法二:
通过 toggle.node.on('toggle', ...) 的方式来添加,这是一种非常简便的方式,但是该方式有一定的局限性,在事件回调里面无法获得当前点击按钮的屏幕坐标点,也无法传递 customEventData。
1.编写脚本如下:
// toggle.js cc.Class({ extends: cc.Component, properties: { }, // LIFE-CYCLE CALLBACKS: onLoad() { this.node.on('toggle', this.cb_toggle, this); }, start() { }, // update (dt) {}, // toggle 回调函数 cb_toggle(toggle) { // toggle 为 toggle 本身 if (toggle.isChecked) { console.log("Hello,小明!"); } } });
2.编写好后将 toggle.js 挂在到 Toggle 节点下,预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:
拓展:
除了默认的资源,还可以替换 Background 和 Checkmate 图片资源实现开关效果:
我是「Super于」,立志做一个每天都有正反馈的人!