How to make a glow when hovering over an object?

Phaser 3
1

I need a red highlight to appear when the mouse is hovered over an object, and the highlight to disappear when the mouse is removed.Example below:
glow

How to do this, here is the code?

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Glow</title>

  
  
</head>

<body>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
  
      <script>
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'phaser-example',
  scene: {
    preload: preload,
    create: create 
  } };



var game = new Phaser.Game(config);
var tween = null;
var tweenAlive = false;

function preload()
{
   this.load.baseURL = './assets/';
   this.load.image('meteorit', 'sprites/meteorit.png');
}

function create()
{
      var sprite = this.add.sprite(300, 300, 'meteorit');
     
    sprite.setInteractive();
    sprite.on('pointerover', ()=>{
          console.log("glow");
     })
     sprite.on('pointerout', ()=>{
          console.log("delete glow");
     })
     
}
</script>
</body>
</html>
2

For the game you are working on, are you targeting a specific version of Phaser, and do you have any constraints on the game type (Canvas vs WebGL)? I know in the example code you shared, it shows Phaser 3.55.2, but if you are update to at least 3.60.0, there were some really nice built in Glow effects added to the framework.

Example: Phaser 3

One thing to note, is that the FX components that were added only work in WebGL.

3

I found the page Phaser.FX.Glow - Phaser 3 API Documentation, but couldn’t figure it out.Can I see an example?

4

https://labs.phaser.io/edit.html?src=src/fx\glow\glow%20fx.js

1 Like
5

Rex Rainbow extension has a few ways of doing this as well:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-glowfilter2/
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shader-outline/

1 Like