How to use Mouse Events

[Ty Connors]

I'm having trouble with mouse events triggering.  I would like to trigger an event off an Actor instance.

var props = { ... }
var actor1 = new Actor(props)
actor1.on('mousedown', (evt: PointerEvent) => {
  console.log('click')
})

And it doesn't work on the primary pointer either.

game.input.pointers.primary.on('mousedown', (evt: PointerEvent) => { 
  console.log('click')
})

Am I misusing the event system?

The move event works fine.

game.input.pointers.primary.on('move', (evt: PointerEvent) => {
  console.log(`x: ${evt.x} y: ${evt.y}`)
})

Thanks in advanced!

[Erik Onarheim]

Hi Ty,

The problem is that the events are named different than the ones you are using. All pointer events (touch, mouse, pointer, etc) are unified with a pointer prefix in excalibur. The reason being we wanted to avoid the need for game developers to separately handle touchdown, mousedown, and pointerdown events emitted by the browser and just synthesize one event that handled all possibilities. (Source code here https://github.com/excaliburjs/Excalibur/blob/ed1dc0a765af61c8a707fc9bf89c2c994fc3118a/src/engine/Input/Pointer.ts)

Here is the documentation, it probably could use some improvement to clarify this.
https://excaliburjs.com/docs/api/edge/classes/_input_pointer_.pointers.html

So for actors, the "pointerdown" will encompass the desired mouse down behavior on a specific actor like so:

actor1.on('pointerdown', (evt: PointerEvent) => {...})

Additionally, for the direct input.pointer.primary api access that already has the word "pointer" in it, the event drops the prefix to avoid typing the word "pointer" twice, thus:

game.input.pointers.primary.on('down', (evt: PointerEvent) => {...})

Definitely open to feedback or improvements here, let us know what you think.

Cheers,

Erik

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.
To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/61dd4d02-7a2d-4c85-96d7-aad7e61d9390%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ty Connors]

Hey thanks for the quick response Erik, and congrats on 5 years of development for Excalibur!

The event naming makes a lot more sense now.  After reading your response and peering into Excalibur's source code I found its surprisingly well commented.  I'm using it as a basis on how to write my own event dispatchers.  I hope Excalibur gains more traction in the community, it's nice to have native 2d game development tools for the web instead of exporting from Unity or GameMaker.

Just a heads up, I used Excalibur to start making a Hearthstone like card game.  The repo is here: https://github.com/tconn89/gamejam2018
I'll report back when I publish a demo site.

Cheers!