Input Events

Description

This library includes events that correspond to different types of input.

Types

Position

Property	Type	Description
x	integer	The x-coordinate in pixels
y	integer	The y-coordinate in pixels

TouchEvent

Property	Type	Description
pointerId	integer	unique ID for the pointer, provided by the browser.
position	Position	Touched position coordinates in pixels
worldPosition	Vector3	The position where the touchedEvent hit in the world. only available on SCREEN_TOUCH_START.
target	eid	eid if initially touched object
start	Position	The position coordinates in pixels where the touch event started.
change	Position	The position coordinates in pixels of the touch since the last change.

GestureEvent

Property	Type	Description
touchCount	integer	The number of points contributing to the gesture.
position	Position	Touched position coordinates in pixels
startPosition	Position	The position coordinates in pixels where the event started.
positionChange	Position	The position coordinates in pixels since the last change.
spread	float	The average position between pointers from the center point.
startSpread	float	The first spread emitted in start.
spreadChange	float	The spread value since the last change.
nextTouchCount	integer	On end, the number of pointers involved in the following gesture

Events

UI_CLICK

Emitted when both the press (UI_PRESSED) and release (UI_RELEASED) occur on the same UI element. This event represents a complete click or tap gesture. It is dispatched on the element where both interactions overlapped and is typically used for confirming user intention, such as activating a button or triggering an action.

Example

world.events.addListener(component.eid, ecs.input.UI_CLICK, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

UI_PRESSED

Emitted when the user initiates a touch or pointer-down interaction on a UI element. It is dispatched only on the exact element that was directly pressed and does not bubble to parent elements. This event is useful for triggering immediate visual feedback or interaction states (such as button highlights or animations) at the start of user input.

Example

world.events.addListener(component.eid, ecs.input.UI_PRESSED, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

UI_RELEASED

Emitted when the pointer is lifted after a UI_PRESSED. It is always dispatched on the same UI element that was initially pressed, regardless of where the pointer is released. This allows developers to respond to the completion of a press interaction, even if the pointer moved away from the original target.

Example

world.events.addListener(component.eid, ecs.input.UI_RELEASED, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

GAMEPAD_CONNECTED

Emits when a gamepad is connected to the device.

Example

world.events.addListener(world.events.globalId, ecs.input.GAMEPAD_CONNECTED, (detail: Object) => {
    console.log(detail.gamepad);
});

GAMEPAD_DISCONNECTED

Emits when a gamepad is disconnected from the device.

Example

world.events.addListener(world.events.globalId, ecs.input.GAMEPAD_DISCONNECTED, (detail: Object) => {
    console.log(detail.gamepad);
});

メモ

• Multiple touch points can be active simultaneously.
• Only one touch gesture (single or multitouch) will be recognized as active at a time.

インフォメーション

If a touch event has a target, it will be emitted on that target and propagate up to its parent elements and eventually to the global level. This means a touch listener on a parent object will capture events from all its child elements.

SCREEN_TOUCH_START

Emits when the user initially touches or clicks the screen or target object.

Example

world.events.addListener(world.events.globalId, ecs.input.SCREEN_TOUCH_START, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

SCREEN_TOUCH_MOVE

Emits when the user clicks and drags or moves their finger on the screen.

Example

world.events.addListener(world.events.globalId, ecs.input.SCREEN_TOUCH_MOVE, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

SCREEN_TOUCH_END

Emits when the user stops clicking or lift the finger off the screen.

Example

world.events.addListener(world.events.globalId, ecs.input.SCREEN_TOUCH_END, (touchEvent: TouchEvent) => {
    console.log(touchEvent);
});

インフォメーション

Gesture events are emitted when the user makes a "gesture" on the phone screen. A gesture is any action that requires multiple fingers. If the user starts with a "'zoom" action (2 fingers moving away from each other) then adds another finger to the screen then the "zoom" gesture will end and a new one will start with 3 fingers.

GESTURE_START

Emits when the user stops clicking or lift the finger off the screen.

Example

world.events.addListener(world.events.globalId, ecs.input.GESTURE_START, (gestureEvent: GestureEvent) => {
    console.log(gestureEvent);
});

GESTURE_MOVE

Emits when the user moves their finger(s) on the screen.

Example

world.events.addListener(world.events.globalId, ecs.input.GESTURE_MOVE, (gestureEvent: GestureEvent) => {
    console.log(gestureEvent);
});

GESTURE_END

Emits when the number of fingers change from an previous gesture check.

Example

world.events.addListener(world.events.globalId, ecs.input.GESTURE_END, (gestureEvent: GestureEvent) => {
    console.log(gestureEvent);
});