Global System Events
In this section, the global system events
of Cocos Creator will be introduced.
Global system events
are irrelevant with the node hierarchy, so they are dispatched globally by systemEvent
, currently supported:
- Mouse
- Touch
- Keyboard
- DeviceMotion
The global mouse and touch events are very similar to the node events, except that the area of action is different. The following is a description of these events.
The difference between node events and global mouse and touch events
Note: before beginning this section, read up on Auto fit for multi-resolution and understand the screen area and UI display area.
When listening for global mouse/touch events, the acquired contacts are calculated based on the bottom left corner of the screen area (device display resolution). The contacts fetched by the UI node listener are not the same as the contacts fetched by the global event, which are converted to the points calculated in the lower left corner of the adapted UI viewable area. Global touch points are better suited for manipulating the behavior of 3D nodes by tapping directly on the screen, without having to add UI nodes to the scene to listen for mouse/touch events.
How to define the input events
Use systemEvent.on(type, callback, target)
to register Keyboard and DeviceMotion event listeners.
Event types included:
SystemEventType.KEY_DOWN
SystemEventType.KEY_UP
SystemEventType.DEVICEMOTION
Keyboard events
- Type:
SystemEventType.KEY_DOWN
andSystemEventType.KEY_UP
- Call Back:
- Custom Event: callback(event);
- Call Back Parameter:
- KeyCode: API Reference
- Event: API Reference
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;
}
}
}
Device motion
- Type:
SystemEventType.DEVICEMOTION
- Call back:
- Custom event:
callback(event);
;
- Custom event:
- Call back parameter:
- Event: API Reference
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);
}
}
Please review the test-cases-3d (This includes the keyboard, accelerometer, single point touch, multi-touch examples).