Cocos 3.x 事件(鼠标,触摸,键盘,重力传感)

参考
Cocos3.0 官方文档 节点事件
Cocos3.0 官方文档 全局事件

一、节点事件中的鼠标和触摸事件
  • Cocos Creator 支持的系统事件包含鼠标、触摸、键盘和重力传感四种,它们被称为 全局事件

  • 本章节重点介绍与 UI 节点树相关联的鼠标和触摸事件,这些事件是被直接触发在 UI 相关节点上的,所以被称为节点事件

// 使用枚举类型来注册
node.on(Node.EventType.MOUSE_DOWN, (event) => {
  console.log('Mouse down');
}, this);
1.鼠标事件

鼠标事件在桌面平台才会触发,系统提供的事件类型如下:

  • Node.EventType.MOUSE_DOWN mouse-down 当鼠标在目标节点区域按下时触发一次。
  • Node.EventType.MOUSE_ENTER mouse-enter 当鼠标移入目标节点区域时,不论是否按下。
  • Node.EventType.MOUSE_MOVE mouse-move 当鼠标在目标节点区域中移动时,不论是否按下。
  • Node.EventType.MOUSE_LEAVE mouse-leave 当鼠标移出目标节点区域时,不论是否按下。
  • Node.EventType.MOUSE_UP mouse-up 当鼠标从按下状态松开时触发一次。
  • Node.EventType.MOUSE_WHEEL mouse-wheel 当鼠标滚轮滚动时。
2.触摸事件

触摸事件在移动平台和桌面平台都会触发,开发者可以更好的在桌面平台调试,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下:

  • Node.EventType.TOUCH_START touch-start 当手指触点落在目标节点区域内时。
  • Node.EventType.TOUCH_MOVE touch-move 当手指在屏幕上移动时。
  • Node.EventType.TOUCH_END touch-end 当手指在目标节点区域内离开屏幕时。
  • Node.EventType.TOUCH_CANCEL touch-cancel 当手指在目标节点区域外离开屏幕时。
3. 3D节点事件

TRANSFORM_CHANGED transform-changed 当变换属性修改时,会派发一个枚举值 TransformBit,根据枚举值定义修改的变换。

4. 2D 节点事件
枚举对象定义 对应的事件名 事件触发的时机
SIZE_CHANGED size-changed 当宽高属性修改时。宽高属性位于 UITransform 组件上。
ANCHOR_CHANGED anchor-changed 当锚点属性修改时。锚点属性位于 UITransform 组件上。
COLOR_CHANGED color-changed 当颜色属性修改时。颜色属性位于 UI 渲染组件上。
5.多点触摸事件

引擎有多点触摸事件的屏蔽开关,多点触摸事件默认为开启状态。对于不需要多点触摸的项目,可以通过以下代码关闭多点触摸。

macro.ENABLE_MULTI_TOUCH = false;
6.暂停或恢复节点系统事件

暂停节点系统事件

// 暂停当前节点上注册的所有节点系统事件,节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true,那么这个 API 将暂停本节点和它的所有子节点上的节点系统事件。
// example
this.node.pauseSystemEvents();

恢复节点系统事件

// 恢复当前节点上注册的所有节点系统事件,节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true,那么这个 API 将恢复本节点和它的所有子节点上的节点系统事件。
// example
this.node.resumeSystemEvents();
二、全局事件

全局系统事件是指与节点树不相关的各种全局事件,由 systemEvent 来统一派发,目前支持了以下几种事件:

  • 鼠标事件
  • 触摸事件
  • 键盘事件
  • 设备重力传感事件

其中,鼠标事件与触摸事件同节点系统事件类似,只是在于作用的区域不同。接下来会围绕这几个事件做个说明。

当监听全局鼠标/触摸事件的时候,所获取到的触点是基于屏幕区域(设备显示分辨率)左下角计算的。

而 UI 节点监听获取到的触点,是将全局事件获取到的触点,转换到适配后的 UI 可视区域左下角计算出的点,这两个点是不一样的。

全局触点比较适用于直接点击屏幕去操控 3D 节点的行为,而不需要为场景添加 UI 节点去做鼠标/触摸事件的监听。

1.键盘事件
import { _decorator, Component, Node, systemEvent, SystemEventType, EventKeyboard, macro } from 'cc';
const { ccclass } = _decorator;

@ccclass("Example")
export class Example extends Component {
    onLoad () {
        systemEvent.on(SystemEventType.KEY_DOWN, this.onKeyDown, this);
        systemEvent.on(SystemEventType.KEY_UP, this.onKeyUp, this);
    }

    onDestroy () {
        systemEvent.off(SystemEventType.KEY_DOWN, this.onKeyDown, this);
        systemEvent.off(SystemEventType.KEY_UP, this.onKeyUp, this);
    }

    onKeyDown (event: EventKeyboard) {
        switch(event.keyCode) {
            case macro.KEY.a:
                console.log('Press a key');
                break;
        }
    }

    onKeyUp (event: EventKeyboard) {
        switch(event.keyCode) {
            case macro.KEY.a:
                console.log('Release a key');
                break;
        }
    }
}
2.设备重力传感事件
import { _decorator, Component, Node, systemEvent, SystemEventType, log } from 'cc';
const { ccclass } = _decorator;

@ccclass("Example")
export class Example extends Component {
    onLoad () {
        systemEvent.setAccelerometerEnabled(true);
        systemEvent.on(SystemEventType.DEVICEMOTION, this.onDeviceMotionEvent, this);
    }

    onDestroy () {
        systemEvent.off(SystemEventType.DEVICEMOTION, this.onDeviceMotionEvent, this);
    }

    onDeviceMotionEvent (event: EventAcceleration) {
        log(event.acc.x + "   " + event.acc.y);
    }
}

可以参考https://github.com/cocos-creator/test-cases-3d相关示例,包含了键盘、重力感应、单点触摸、多点触摸等功能的实现。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容