Problems With Setting A Color Tint & Transparency To An Image?

Phaser 3
1

Hi,

Please view below source code and provide help:
Both color tint and transparency are not currently working?

Jesse

function DrawSprite (spriteName, x, y, scaleX, scaleY, rotation, red, green, blue, alpha)
{
    spriteName.x = x;
    spriteName.y = y;

    spriteName.scaleX = scaleX;
    spriteName.scaleY = scaleY;

    spriteName.rotation = rotation;

    const tint = new Phaser.Display.Color(red, green, blue);
//    spriteName.setTint(tint); // Not working?
//    spriteName.setAlpha(alpha / 255); // Not working?

}
2

Not working how?

3

Sorry, when I draw the sprite(the background) all I get is black?

DrawSprite(sky, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 255);

4

Look in the browser dev tools console for errors.

You did

sky = this.add.image(/*…*/);

before that?

5

Yes, and no errors in browser console:

Phaser_3_Tint-Transparency_Not_Working2
Phaser_3_Tint-Transparency_Not_Working21056×699 143 KB

6

Did you comment out the setTint and setAlpha lines and the sky is still not visible?

The setTint argument should be tint.color, not tint.

7

That worked, thanks!
Below is the 100% working source code:

function DrawSprite (spriteName, x, y, scaleX, scaleY, rotation, red, green, blue, alpha)
{
    spriteName.x = x;
    spriteName.y = y;

    spriteName.scaleX = scaleX;
    spriteName.scaleY = scaleY;

    spriteName.rotation = rotation;

    const tint = new Phaser.Display.Color(red, green, blue);
    spriteName.setTint(tint.color);
    spriteName.setAlpha(alpha / 255);

}