Interactive event

Demo

https://eva.js.org/playground/#/event

Install

With NPM

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

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-renderer-event@1.2.x/dist/EVA.plugin.renderer.event.min.js"></script>

System

  1. 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.

Options

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.

TypeTypeAttribute
CircleHIT_AREA_TYPE.Circle{style: {x,y,radius}}
EllipseHIT_AREA_TYPE.Ellipse{style:{x,y,width,height}}
RectangleHIT_AREA_TYPE.Rect{style:{x,y,width,height}}
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}]}}
  1. import {Event, EventSystem, HIT_AREA_TYPE} from '@eva/plugin-renderer-event'
  2. game.addSystem(new EventSystem({
  3. moveWhenInside: true // default is false
  4. }))
  5. const evt = image.addComponent(
  6. new Event({
  7. hitArea: {
  8. type: HIT_AREA_TYPE.Polygon,
  9. style: {
  10. paths: [107, 49, 148, 24, 172, 28, 198, 77, 189, 106, 123, 198, 71, 180, 10, 80, 34, 32, 90, 37]
  11. }
  12. }
  13. })
  14. )

Method

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
touchstart
touchmoveMove will also trigger if it is not on the current object, very strange
touchend
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

  1. {
  2. data:{
  3. pointerId: number,
  4. position: {x, y}
  5. },
  6. stopPropagation: ()=>{},
  7. gameObject: gameObject
  8. }

Prevent events from bubbling up

  1. event.stopPropagation()