Problem with tint

[Fractal Games]

Hey everyone,

I am migrating a game theory software from Phaser 2 to Phaser 3. You can check it out here.

My tint problem: I need to create a black line, so I use graphics and create a white pixel, I save it to a texture, then I create a sprite from the texture, scale the sprite and then tint to black.

The reason why I am using tint, is because I have many lines, they could be changing colours in the future and so on. I would just like to reuse this white pixel and change its colour very often

// Create the pixel
createGraphicsPics() {
  this.graphics = this.make.graphics({x: 0, y: 0});
  this.graphics.fillStyle(0xffffff, 1.0);
  this.graphics.fillRect(0, 0, 1, 1);
  this.graphics.generateTexture("line", 1, 1);
}

// Create the line

this.line1 = this.add.sprite(this.point2.x, this.point2.y, "line")
    .setOrigin(0, 0.5)
    .setScale(0, 5)
    .setRotation(-Math.PI * 0.25);
this.line1.setTint(0x000000); // Not Working
this.line1.tint = 0x000000; // Not Working
this.line1.setTint(0x000000,0x000000,0x000000,0x000000) // Not working
//Also tried setTintFill... and tintFill=true to no avail

// Adding tween to scaleX next, which works

 Even when I log the tint it says undefined. Also for some strange reason, the line is not centered from point2 to point1.

Thanks for your help in advance.

 

[Fractal Games]

After some more reading I found out that tint is not supported in Canvas.

Does anyone have other suggestions?

Basically, I have lots of circles and each circle needs to be able to change its colour. If I add 4-5 more sprites for each colour I need in each circle, this means that for 20 circles, there will be 100 more sprites (most of them not visible, but still...).

Any ideas?

[Tom Atom]

@Fractal Games look here:

There is how to add tinto to BitmapText. If you take some additional work, you can try to replicate Phaser 2 behavior into Phaser 3.

[Fractal Games]

Thanks man! Quite the effort there! I hope at some point Phaser 3 adopts your approach.