Slightly darken when hovered in phaser?

Question

I'm making a menu for my phaser game, and I want the buttons to slightly darken when hovered over. I tried using this.setTint(), and my color (about the middle of white and black). This still just makes the placeholder completely black. Here's the code

class Scene2 extends Phaser.Scene{
    constructor(){
      super("playGame");
    }
  
    create() {
        this.cursors = this.input.keyboard.createCursorKeys()
        this.placeholder = this.add.image(250,200,"placeholder")
        this.placeholder.setOrigin(0,0)
        this.placeholder.setScale(2)
        this.placeholder.setInteractive()
        this.placeholder.on('pointerup',function(){
          console.log("YAY")
        })
        this.placeholder.on('pointerover', function(){
          console.log('get off me bitchhh')
          this.setTint("#8d8e8f")
        })
        this.placeholder.on('pointerout', function() {
          console.log('thanks pookie')
          this.setTint()
        })
        this.add.text(20, 20, "Playing game", {font: "25px Arial", fill: "yellow"});

    }
}

I was expecting my placeholder to slightly tint, but it just turns black

Answer 1

Phasor's setTint() is additive.

That means, the tint works by taking the pixel color values from the Game Objects texture, and then multiplying it by the color value of the tint.

So it takes your existing button's colors and then operates on it with a value of #8d8e8f

Try to clear the tint first before setting it so you get the color you want:

this.clearTint()
this.setTint("#8d8e8f")

If that does not work, use a setTintFill() instead which, unlike an additive tint, a fill-tint literally replaces the pixel colors from the texture with those in the tint. The whole Game Object will be rendered in the given color.

Like:

this.setTintFill("#8d8e8f")

Sources:

• clearTint
• setTint
• setTintFill

EDIT:

Also found that you can straight up just set your object's tintFill property to true to make any tints applied to it non-additive like:

this.tintFill = true

Check: tintFill, it is false by default.