How to interact on hover with an SVG image in Phaser 3

user_11641562 0
Viewed 667

I have the following code:

function preload() {
  this.load.svg('table', 'assets/svg/table.svg');
}

function create {
  this.add.image(400, 300, 'table');
}

How can I highlight this picture when I hover over it?

phaser-framework svg
1 Answers

You can use the pointerover event like so:

  • First, declare a variable to hold the svg image.
let tableSvg;
  • Second, preload the svg image.
 function preload() {
   this.load.svg('table', 'assets/svg/table.svg');
 }
  • Third, add the svg image to the variable.
tableSvg = this.add.image(400, 300, 'table');
  • Fourth, set the svg image to be interactive.
tableSvg.setInteractive();
  • Fifth, add an mouse over event listener like so:
tableSvg.on('pointerover', () => {
  console.log(tableSvg)
});

Edit:

You can change the image's color like so:

tableSvg.on('pointerover', () => {
  // setTint method takes a color value & change the image's color accordingly
  tableSvg.setTint(185273)
});
user_98841900
Related