cocos2d-JS 常用控件Button
Button API
按钮组件。可以被按下,或者点击。
按钮可以通过修改 Transition 来设置按钮状态过渡的方式：
-Button.Transition.NONE // 不做任何过渡
-Button.Transition.COLOR // 进行颜色之间过渡
-Button.Transition.SPRITE // 进行精灵之间过渡
按钮可以绑定事件（但是必须要在按钮的 Node 上才能绑定事件）：
// 以下事件可以在全平台上都触发
-cc.Node.EventType.TOUCH_START // 按下时事件
-cc.Node.EventType.TOUCH_Move // 按住移动后事件
-cc.Node.EventType.TOUCH_END // 按下后松开后事件
-cc.Node.EventType.TOUCH_CANCEL // 按下取消事件
// 以下事件只在 PC 平台上触发
-cc.Node.EventType.MOUSE_DOWN // 鼠标按下时事件
-cc.Node.EventType.MOUSE_MOVE // 鼠标按住移动后事件
-cc.Node.EventType.MOUSE_ENTER // 鼠标进入目标事件
-cc.Node.EventType.MOUSE_LEAVE // 鼠标离开目标事件
-cc.Node.EventType.MOUSE_UP // 鼠标松开事件
-cc.Node.EventType.MOUSE_WHEEL // 鼠标滚轮事件
示例:
// Add an event to the button.
button.node.on(cc.Node.EventType.TOUCH_START, function (event) {
cc.log("This is a callback after the trigger event");
});
属性（properties）
interactable Boolean
按钮事件是否被响应，如果为 false，则按钮将被禁用。
transition Button.Transition
按钮状态改变时过渡方式。
normalColor Color
普通状态下按钮所显示的颜色。
pressedColor Color
按下状态时按钮所显示的颜色。
hoverColor Color
悬停状态下按钮所显示的颜色。
disabledColor Color
禁用状态下按钮所显示的颜色。
duration Number
颜色过渡时所需时间
normalSprite SpriteFrame
普通状态下按钮所显示的 Sprite 。
pressedSprite SpriteFrame
按下状态时按钮所显示的 Sprite 。
hoverSprite SpriteFrame
悬停状态下按钮所显示的 Sprite 。
disabledSprite SpriteFrame
禁用状态下按钮所显示的 Sprite 。
target Node
需要过渡的目标。当前按钮状态改变有：-如果 Transition type 选择 Button.Transition.NONE，按钮不做任何过渡。-如果 Transition type 选择 Button.Transition.COLOR，按钮会对目标颜色进行颜色之间的过渡。-如果 Transition type 选择 Button.Transition.NONE，按钮会对目标 Sprite 进行 Sprite 之间的过渡。
clickEvents Component.EventHandler[]
按钮的点击事件列表。
node Node
该组件被附加到的节点。组件总会附加到一个节点。
示例:
cc.log(comp.node);
uuid StringreadOnly
组件的 uuid，用于编辑器。
示例:
cc.log(comp.uuid);
enabled Boolean
表示该组件自身是否启用。
示例:
comp.enabled = true;
cc.log(comp.enabled);
enabledInHierarchy BooleanreadOnly
表示该组件是否被启用并且所在的节点也处于激活状态。。
示例:
cc.log(comp.enabledInHierarchy);
_isOnLoadCalled BooleanreadOnly
onLoad 是否被调用。
示例:
cc.log(_isOnLoadCalled);
name String
该对象的名称。
示例:
obj.name = "New Obj";
isValid BooleanreadOnly
表示该对象是否可用（被销毁后将不可用）。
示例:
cc.log(obj.isValid);
方法
update ( )
如果该组件启用，则每帧调用 update。
lateUpdate ( )
如果该组件启用，则每帧调用 LateUpdate。
onLoad ( )
当附加到一个激活的节点上或者其节点第一次激活时候调用。
start ( )
如果该组件第一次启用，则在所有组件的 update 之前调用。
onEnable ( )
当该组件被启用，并且它的节点也激活时。
onDisable ( )
当该组件被禁用或节点变为无效时调用。
onDestroy ( )
当该组件被销毁时调用
onFocusInEditor ( )
onLostFocusInEditor ( )
getComponents
- typeOrClassName
返回节点上指定类型的所有组件。
返回:
示例:
var sprites = node.getComponents(cc.Sprite);
var tests = node.getComponents("Test");
getComponentsInChildren
- typeOrClassName
递归查找自身或所有子节点中指定类型的组件
返回:
示例:
var sprites = node.getComponentsInChildren(cc.Sprite);
var tests = node.getComponentsInChildren("Test");
_getLocalBounds
- out_rect
如果组件的包围盒与节点不同，您可以实现该方法以提供自定义的轴向对齐的包围盒（AABB），以便编辑器的场景视图可以正确地执行点选测试。
| 名称 | 类型 | 描述 |
|---|---|---|
out_rect |
Rect |
the Rect to receive the bounding box |
onRestore ( )
onRestore 是用户在检查器菜单点击 Reset 时，对此组件执行撤消操作后调用的。
如果组件包含了“内部状态”（不在 CCClass 属性中定义的临时成员变量），那么你可能需要实现该方法。
编辑器执行撤销/重做操作时，将调用组件的 get set 来录制和还原组件的状态。然而，在极端的情况下，它可能无法良好运作。
那么你就应该实现这个方法，手动根据组件的属性同步“内部状态”。一旦你实现这个方法，当用户撤销或重做时，组件的所有 get set 都不会再被调用。这意味着仅仅指定了默认值的属性将被编辑器记录和还原。
同样的，编辑可能无法在极端情况下正确地重置您的组件。
于是如果你需要支持组件重置菜单，你需要在该方法中手工同步组件属性到“内部状态”。
一旦你实现这个方法，组件的所有 get set 都不会在重置操作时被调用。这意味着仅仅指定了默认值的属性将被编辑器重置。
此方法仅在编辑器下会被调用。
schedule
- callback
- [interval =0]
- [repeat =cc.macro.REPEAT_FOREVER]
- [delay =0]
调度一个自定义的回调函数。
如果回调函数已调度，那么将不会重复调度它，只会更新时间间隔参数。
| 名称 | 类型 | 描述 | |
|---|---|---|---|
callback |
function |
The callback function |
|
interval
optional |
Number | 0 |
Tick interval in seconds. 0 means tick every frame. If interval = 0, it's recommended to use scheduleUpdate() instead. |
repeat
optional |
Number | cc.macro.REPEAT_FOREVER |
The selector will be executed (repeat + 1) times, you can use kCCRepeatForever for tick infinitely. |
delay
optional |
Number | 0 |
The amount of time that the first tick will wait before execution. |
示例:
var timeCallback = function (dt) {
cc.log("time: " + dt);
}
this.schedule(timeCallback, 1);
scheduleOnce
- callback
- [delay =0]
unschedule
- callback_fn
取消调度一个自定义的回调函数。
| 名称 | 类型 | 描述 |
|---|---|---|
callback_fn |
function |
A function wrapped as a selector |
示例:
this.unschedule(_callback);
unscheduleAllCallbacks ( )
取消调度所有已调度的回调函数：定制的回调函数以及 'update' 回调函数。动作不受此方法影响。
示例:
this.unscheduleAllCallbacks();
Button（按钮）组件参考
Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。
点击属性检查器下面的添加组件按钮，然后从添加 UI 组件中选择Button，即可添加 Button 组件到节点上。
按钮的脚本接口请参考Button API。
Button 属性
| 属性 | 功能说明 |
|---|---|
| interactable | 布尔类型，设为 false 时，则 Button 组件进入禁用状态。 |
| Transition | 枚举类型，包括 NONE, COLOR 和 SPRITE。每种类型对应不同的 Transition 设置。详情见Button Transition章节。 |
| Click Event | 列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见Button 事件章节 |
Button Transition
Button 的 Transition 用来指定当用户点击 Button 时的状态表现。目前主要有 NONE，COLOR 和 SPRITE。
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。 |
Button 事件
| 属性 | 功能说明 |
|---|---|
| Target | 带有脚本组件的节点。 |
| Component | 脚本组件名称。 |
| Handler | 指定一个回调函数，当用户点击 Button 并释放时会触发此函数。 |
详细说明
Button 目前只支持 On Click 事件，即当用户点击并释放 Button 时才会触发相应的回调函数。
Button 的回调函数带一个 event 参数，如果需要在回调里面取到 Button 组件，可以通过下面的方法：
callback: function(event) {
var node = event.target;
var button = node.getComponent(cc.Button);
}通过脚本添加回调
button.clickEvents.push(new cc.Component.EventHandler(...))