Cocos Creator系统内置事件和玩家输入事件(官方文档摘录)
2016-11-30 20:03
726 查看
系统内置事件
如上一篇文档所述,cc.Node有一套完整的事件监听和分发机制。在这套机制之上,我们提供了一些基础的系统事件,这篇文档将介绍这些事件的使用方式。系统事件遵守通用的注册方式,开发者既可以使用枚举类型也可以直接使用事件名来注册事件的监听器,事件名的定义遵循 DOM 事件标准。
// 使用枚举类型来注册 node.on(cc.Node.EventType.MOUSE_DOWN, function (event) { console.log('Mouse down'); }, this); // 使用事件名来注册 node.on('mousedown', function (event) { console.log('Mouse down'); }, this);
鼠标事件类型和事件对象
鼠标事件在桌面平台才会触发,系统提供的事件类型如下:枚举对象定义 | 对应的事件名 | 事件触发的时机 |
---|---|---|
cc.Node.EventType.MOUSE_DOWN | 'mousedown' | 当鼠标在目标节点区域按下时触发一次 |
cc.Node.EventType.MOUSE_ENTER | 'mouseenter' | 当鼠标移入目标节点区域时,不论是否按下 |
cc.Node.EventType.MOUSE_MOVE | 'mousemove' | 当鼠标在目标节点在目标节点区域中移动时,不论是否按下 |
cc.Node.EventType.MOUSE_LEAVE | 'mouseleave' | 当鼠标移出目标节点区域时,不论是否按下 |
cc.Node.EventType.MOUSE_UP | 'mouseup' | 当鼠标从按下状态松开时触发一次 |
cc.Node.EventType.MOUSE_WHEEL | 'mousewheel' | 当鼠标滚轮滚动时 |
cc.Event.EventMouse)的重要 API 如下(
cc.Event标准事件 API 之外):
函数名 | 返回值类型 | 意义 |
---|---|---|
getScrollY | Number | 获取滚轮滚动的 Y 轴距离,只有滚动时才有效 |
getLocation | Object | 获取鼠标位置对象,对象包含 x 和 y 属性 |
getLocationX | Number | 获取鼠标的 X 轴位置 |
getLocationY | Number | 获取鼠标的 Y 轴位置 |
getPreviousLocation | Object | 获取鼠标事件上次触发时的位置对象,对象包含 x 和 y 属性 |
getDelta | Object | 获取鼠标距离上一次事件移动的距离对象,对象包含 x 和 y 属性 |
getButton | Number | cc.Event.EventMouse.BUTTON_LEFT或 cc.Event.EventMouse.BUTTON_RIGHT或 cc.Event.EventMouse.BUTTON_MIDDLE |
触摸事件类型和事件对象
触摸事件在移动平台和桌面平台都会触发,这样做的目的是为了更好得服务开发者在桌面平台调试,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下:枚举对象定义 | 对应的事件名 | 事件触发的时机 |
---|---|---|
cc.Node.EventType.TOUCH_START | 'touchstart' | 当手指触点落在目标节点区域内时 |
cc.Node.EventType.TOUCH_MOVE | 'touchmove' | 当手指在屏幕上目标节点区域内移动时 |
cc.Node.EventType.TOUCH_END | 'touchend' | 当手指在目标节点区域内离开屏幕时 |
cc.Node.EventType.TOUCH_CANCEL | 'touchcancel' | 当手指在目标节点区域外离开屏幕时 |
cc.Event.EventTouch)的重要 API 如下(
cc.Event标准事件 API 之外):
API 名 | 类型 | 意义 |
---|---|---|
touch | cc.Touch | 与当前事件关联的触点对象 |
getID | Number | 获取触点的 ID,用于多点触摸的逻辑判断 |
getLocation | Object | 获取触点位置对象,对象包含 x 和 y 属性 |
getLocationX | Number | 获取触点的 X 轴位置 |
getLocationY | Number | 获取触点的 Y 轴位置 |
getPreviousLocation | Object | 获取触点上一次触发事件时的位置对象,对象包含 x 和 y 属性 |
getStartLocation | Object | 获取触点初始时的位置对象,对象包含 x 和 y 属性 |
getDelta | Object | 获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性 |
鼠标和触摸事件冒泡
鼠标和触摸事件均支持节点树的事件冒泡,以下图为例:在图中的场景里,A节点拥有一个子节点B,B拥有一个子节点C。假设开发者对A、B、C都监听了触摸事件。当鼠标或手指在B节点区域内按下时,事件将首先在B节点触发,B节点监听器接收到事件。接着B节点会将事件向其父节点传递这个事件,A节点的监听器将会接收到事件。这就是最基本的事件冒泡过程。当鼠标或手指在C节点区域内按下时,事件将首先在C节点触发并通知C节点上注册的事件监听器。C节点会通知B节点这个事件,B节点内逻辑会负责检查触点是否发生在自身区域内,如果是则通知自己的监听器,否则什么都不做。紧接着A节点会收到事件,由于C节点完整处在A节点中,所以注册在A节点上的事件监听器都将收到触摸按下事件。以上的过程解释了事件冒泡的过程和根据节点区域来判断是否分发事件的逻辑。除了根据节点区域来判断是否分发事件外,鼠标和触摸事件的冒泡过程与普通事件的冒泡过程并没有区别。所以,调用
event的
stopPropagation函数可以主动停止冒泡过程。
cc.Node
的其它事件
枚举对象定义 | 对应的事件名 | 事件触发的时机 |
---|---|---|
无 | 'position-changed' | 当位置属性修改时 |
无 | 'rotation-changed' | 当旋转属性修改时 |
无 | 'scale-changed' | 当缩放属性修改时 |
无 | 'size-changed' | 当宽高属性修改时 |
无 | 'anchor-changed' | 当锚点属性修改时 |
玩家输入事件
本篇教程,我们将介绍 Cocos Creator 的玩家输入事件。目前支持了以下几种事件:键盘事件鼠标事件
触摸事件
设备重力传感事件
注意:目前已经不建议直接使用 cc.eventManager 来注册任何事件,cc.eventManager 的用法也不保证持续性,有可能随时被修改
如何定义输入事件
除了键盘、设备重力传感器事件是通过函数cc.systemEvent.on(type, callback, target)注册以外 其他的例如:鼠标事件与触摸事件请参考系统内置事件。可选的
type类型有:cc.SystemEvent.EventType.KEY_DOWN (键盘按下)
cc.SystemEvent.EventType.KEY_UP (键盘释放)
cc.SystemEvent.EventType.DEVICEMOTION (设备重力传感)
键盘事件
事件监听器类型:cc.SystemEvent.EventType.KEY_DOWN和
cc.SystemEvent.EventType.KEY_UP
事件触发后的回调函数:自定义回调函数:callback(event);
回调参数:KeyCode: API 传送门
Event:API 传送门
cc.Class({ extends: cc.Component, onLoad: function () { // add key down and key up event cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); }, destroy () { cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); }, onKeyDown: function (event) { switch(event.keyCode) { case cc.KEY.a: console.log('Press a key'); break; } }, onKeyUp: function (event) { switch(event.keyCode) { case cc.KEY.a: console.log('release a key'); break; } } });
鼠标事件
事件监听器类型:cc.EventListener.MOUSE
事件触发后的回调函数:鼠标按下:onMouseDown(event);
鼠标释放:onMouseUp(evnet);
鼠标移动:onMouseMove(evnet);
鼠标滚轮:onMouseScroll(evnet);
回调参数:Event:API 传送门
// 添加鼠标事件监听器 var listener = { event: cc.EventListener.MOUSE, onMouseDown: function (event) { cc.log('Mouse Down: ' + event); }, onMouseUp: function (event) { cc.log('Mouse Up: ' + event); }, onMouseMove: function (event) { cc.log('Mouse Move: ' + event); } onMouseScroll: function (event) { cc.log('Mouse Scroll: ' + event); } } // 绑定鼠标事件 cc.eventManager.addListener(listener, this.node);
单点触摸事件
事件监听器类型:cc.EventListener.TOUCH_ONE_BY_ONE
事件触发后的回调函数:触摸开始:onTouchBegan(touches, event);
触摸移动时:onTouchMoved(touches, event);
触摸结束时:onTouchEnded(touches, event);
取消触摸:onTouchCancelled(touches, event);
回调参数:Touches: 触摸点的列表,单个Touch API 传送门
Event:API 传送门
注意:
onTouchBegan回调事件里要
return true, 这样后续的
onTouchEnded和
onTouchMoved才会触发事件。
// 添加单点触摸事件监听器 var listener = { event: cc.EventListener.TOUCH_ONE_BY_ONE, onTouchBegan: function (touches, event) { cc.log('Touch Began: ' + event); return true; //这里必须要写 return true }, onTouchMoved: function (touches, event) { cc.log('Touch Moved: ' + event); }, onTouchEnded: function (touches, event) { cc.log('Touch Ended: ' + event); } onTouchCancelled: function (touches, event) { cc.log('Touch Cancelled: ' + event); } } // 绑定单点触摸事件 cc.eventManager.addListener(listener, this.node);
多点触摸事件
事件监听器类型:cc.EventListener.TOUCH_ALL_AT_ONCE
事件触发后的回调函数:触摸开始:onTouchesBegan(touches, event);
触摸移动时:onTouchesMoved(touches, event);
触摸结束时:onTouchesEnded(touches, event);
取消触摸:onTouchesCancelled(touches, event);
回调参数:Touches: 触摸点的列表,单个Touch API 传送门
Event:API 传送门
同理:
onTouchesBegan回调事件里也要
return true, 这样后续的
onTouchesEnded和
onTouchesMoved才会触发事件。
// 添加多点触摸事件监听器 var listener = { event: cc.EventListener.TOUCH_ALL_AT_ONCE, onTouchesBegan: function (touches, event) { // touches 触摸点的列表 cc.log('Touch Began: ' + event); return true; //这里必须要写 return true }, onTouchesMoved: function (touches, event) { cc.log('Touch Moved: ' + event); }, onTouchesEnded: function (touches, event) { cc.log('Touch Ended: ' + event); } onTouchesCancelled: function (touches, event) { cc.log('Touch Cancelled: ' + event); } } // 绑定多点触摸事件 cc.eventManager.addListener(listener, this.node);
设备重力传感事件
事件监听器类型:cc.SystemEvent.EventType.DEVICEMOTION
事件触发后的回调函数:自定义回调函数:callback(event);;
回调参数:Event:API 传送门
cc.Class({ extends: cc.Component, onLoad () { // open Accelerometer cc.inputManager.setAccelerometerEnabled(true); cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION, this.onDeviceMotionEvent, this); }, destroy () { cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION, this.onDeviceMotionEvent, this); }, onDeviceMotionEvent (event) { cc.log(event.acc.x + " " + event.acc.y); }, });大家可以也去看 官方范例
cases03_gameplay/01_player_control目录下的完整范例(这里包含了,键盘,重力感应,单点触摸,多点触摸的范例)。
相关文章推荐
- Cocos Creator 玩家输入事件(摘自官方文档)
- Cocos Creator 监听和发射事件(官方文档摘录)
- 7.Insert Methods-官方文档摘录
- Apache Storm 官方文档 —— Trident 教程 原文链接 译者:魏勇 Trident 是 Storm 的一种高度抽象的实时计算模型,它可以将高吞吐量(每秒百万级)数据输入、有状
- 制作freebsd U盘启动过程。官方文档摘录
- Influxdb-官方文档摘录
- Influxdb-官方文档摘录
- Cocos Creator 生命周期回调(官方文档摘录)
- Android API官方文档 输入控件
- 【cocos2d-js官方文档】十七、事件分发机制
- Dojo1.11官方教程文档翻译(3.3)Dojo 事件
- Influxdb-官方文档摘录
- Influxdb-官方文档摘录
- 2.Access the mongo Shell Help-官方文档摘录
- Qt元类型(MetaType)注册入门(附一些官方文档的关键摘录)
- Influxdb-官方文档摘录
- Influxdb-官方文档摘录
- Android官方开发文档Training系列课程中文版:手势处理之ViewGroup的事件管理
- StackExchange.Redis官方文档(六)【事件,发布订阅,服务器命令】
- 摘录:官方文档对ROWID虚拟行的定义