I'm trying to make a simple square object flash green, blue, and red based on different conditions. I understand that there is no direct way to change the colour of a Graphics object in PixiJS. Currently, I create three Graphics objects which are identical except for the colours. By overlapping these objects and adjusting the visibility, I am able to acplish the flashing animation.

I was wondering if there is a better way to "change" the colour instead of cheating it with visibility.

My current code:

let square_red = new PIXI.Graphics();
square.beginFill(red, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_green = new PIXI.Graphics();
square.beginFill(green, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_blue = new PIXI.Graphics();
square.beginFill(blue, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

square_red.visible = true;
square_green.visible = false;
square_blue.visible = false;

I'm trying to make a simple square object flash green, blue, and red based on different conditions. I understand that there is no direct way to change the colour of a Graphics object in PixiJS. Currently, I create three Graphics objects which are identical except for the colours. By overlapping these objects and adjusting the visibility, I am able to acplish the flashing animation.

I was wondering if there is a better way to "change" the colour instead of cheating it with visibility.

My current code:

let square_red = new PIXI.Graphics();
square.beginFill(red, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_green = new PIXI.Graphics();
square.beginFill(green, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_blue = new PIXI.Graphics();
square.beginFill(blue, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

square_red.visible = true;
square_green.visible = false;
square_blue.visible = false;

• javascript
• pixi.js

2 Answers 2

You could create a white circle and change the tint of it.

const circle = new PIXI.Graphics();
circle.beginFill(0xffffff);
circle.drawCircle(0, 0, 100);
circle.endFill();

circle.tint = 0xff0000;

let square = new PIXI.Graphics();
square.beginFill(red, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.endFill();
square.position.set(x, y);


...
// after some time...
...

// Change square to different colour:
square.clear();
square.beginFill(blue, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.endFill();

see: https://pixijs.download/dev/docs/PIXI.Graphics.html#clear