Hide sprite on hover

Phaser 3
1

I am trying to “remove” a sprite from the scene when the sprite receives the “pointerover” event, and unhide it using “pointerout”.

The events work, but not quite the way I want. Instead of completely disappearing when the mouse is over the sprite, the sprite flickers “in and out” when the mouse moves while hovering the sprite.

I am hiding the sprite by setting its alpha value to 0, and unhiding it by setting it to 1.

let item = this.add.sprite(x, y, itemName);
item.setInteractive();
item.on(“pointerover”, () => { item.alpha = 0; })
item.on(“pointerout”, () => { item.alpha = 1; });

I have looked at some examples which use the same startegy without problems. What is it about my code that makes my sprite flicker?

2

Add

item.input.alwaysEnabled = true;
3

Thanks, but doesn’t seem to change anything…

4

So, I replaced .setAlpha() with setTint() and clearTint(), and now there is no flickering. The tint is only applied while the cursor is hovering the sprite. I don’t know why that is, but it seems like the problem is tied to “pointerout” being emitted every time the cursor moves above the sprite.

5