Tinting Multiple images

Phaser 3
1

Hello,
I have multiple images in a scene. I want them to be tinted when the popup appear.
Right now I’m using this code :

image1.setTint(Phaser.Display.Color.GetColor(50, 50, 50));
image2.setTint(Phaser.Display.Color.GetColor(50, 50, 50));
image3.setTint(Phaser.Display.Color.GetColor(50, 50, 50));
image4.setTint(Phaser.Display.Color.GetColor(50, 50, 50));
image5.setTint(Phaser.Display.Color.GetColor(50, 50, 50));

Is there a better way to do it like tinting all the images except the popup that appears.

Thank you.

2

Phaser Groups have the setTint method. Sets the tint of any GameObject in the group.
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#setTint__anchor

Or if you’re just trying to make a modal popup window you could throw a semi-transparent rectangle over all your other images and then put your popup on top of it. If your question is more specific, or you include in image, you’re probably going to get a response that better meets your needs.

3

Thanks for replying.
I want it more like this:
Screenshot 2021-10-04 183846
Here congratulations! is popup while the images in background is translucent.
How to create a semi-transparent rectangle?

4

You can create a rectangle using the standard GameObject factory method “add” available on your current scene. An example would look something like this:

// in scene's create() method
create() {
  ...
  // Get the size of your game canvas
  const posX = 0, posY = 0;
  const { width, height } = this.sys.game.scale.gameSize;
  const color = 0x000000;
  const alpha = 0.5;
  const darkScreen = this.add.rectangle(posX, posY, width, height, color, alpha)
  darkScreen.setOrigin(0, 0);
}

make sure you add this to your scene AFTER your game’s UI, and BEFORE the Congratulations text, or make use of the .setDepth method to manage in what order game elements are displayed from furthest to closest. Here are references to the Phaser 3 Rectangle game object and a relevant example.
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Rectangle.html

Or just google “phaser 3 rectangle”

5

This worked exactly as I needed.
Thankyou