Skip to main content

Interactive event



With NPM

npm i @eva/plugin-renderer @eva/plugin-renderer-event

In Browser

<script src=""></script>


import { EventSystem } from '@eva/plugin-renderer-event'

moveWhenInside boolean optional

Touchmove will also be triggered if it is not inside the gameObject, default is false.


hitArea object optional

Click the hot zone, the response area of ​​the picture with transparency is the rectangular area of ​​the entire GameObject, so the response area can be set through the hitArea property. The attribute value of the hitArea area is relative to the rectangular area of ​​the GameObject. Normally, there is no need to set hitArea.

CircleHIT_AREA_TYPE.Circle{style: {x,y,radius}}
Rounded rectangleHIT_AREA_TYPE.RoundedRect{style:{x,y,width,height,radius}}
PolygonHIT_AREA_TYPE.Polygon{style: {paths: [x,y,x,y,x,y]}} or {style: {paths: [{x,y},{x,y},{x ,y}]}}

import {Event, EventSystem, HIT_AREA_TYPE} from '@eva/plugin-renderer-event'

game.addSystem(new EventSystem({
moveWhenInside: true // default is false

const evt = image.addComponent(
new Event({
hitArea: {
type: HIT_AREA_TYPE.Polygon,
style: {
paths: [107, 49, 148, 24, 172, 28, 198, 77, 189, 106, 123, 198, 71, 180, 10, 80, 34, 32, 90, 37]


Event Component is used to support the event binding of Entity, the events are

Event nameEvent type
tapClick, if touchstart and touchend are both on the current gameObject, it will be triggered, if you don’t need it, you can add e.stopPropagation() to touchend according to certain conditions
touchmoveMove will also trigger if it is not on the current object, very strange
touchendoutsideWhen touchend, when touch is no longer on the object, it will trigger

on (eventName, listener)

Listen for events

off (eventName, listener)

Remove monitor

emit (eventName, ...args)

trigger event

once (eventName, listener)

Listen for one-time events

Instance Event's Arguments

Parameters of the listener function

pointerId: number,
position: {x, y}
stopPropagation: ()=>{},
gameObject: gameObject

Prevent events from bubbling up