CODEWITHSUNDEEP
javascriptpixi.js
Philip
Philip

Reputation: 31

PixiJS what's the best way to change a Graphics object's colour?

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 accomplish 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;

Upvotes: 3

Views: 4682

Answers (2)

domis86
domis86

Reputation: 1357

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

Upvotes: 1

user17487781
user17487781

Reputation:

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;

Upvotes: 3

Related Questions