Skip to content

Phaser: Mouse input

This post is part of a Phaser series. Click here to see the first post of the series.

Any GameObject can be made interactive.

To do so, we must call the setInteractive() method on it:

text = this.add.text(100, 100, 'test')
text.setInteractive()

Once a GameObject is interactive, it can listen for events.

This is done using the on() method. We pass an event name, and a callback function that's executed when the event occurs:

text.on('pointerup', function () {})

pointerup is just one of the mouse events we can listen for. We also have:

  • pointerdown
  • pointerdownoutside
  • pointerup
  • pointerupoutside
  • pointermove
  • pointerover
  • pointerout
  • wheel

This is just the beginning. We have many advanced mouse (and touch events) controls at our disposal.

gameobjectdown is a more general event that is fired when any interactive element is clicked, and it's not fired on an object, but on this.input:

this.input.on('gameobjectdown', () => {})

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about phaser: