Updating Graphics in a loop

[Oyed]

My current setup is similar to the following; I have an array of PIXI.Graphics instances that I loop through, all of them just plain squares, and I want to update the colour of the square. So to do this, I've tried this:

var squares = [ ]; // This is the Array of PIXI.Graphics Instancesfor(var s = 0; s < squares.length; s++) {    squares[s].beginFill(0xFF0000, 1);    squares[s].drawRect(squares[s].x, squares[s].y, squares[s].width, squares[s].height);    squares[s].endFill();}

But it'll only ever update the first square, none of the others. Is there an easier way to go about this, or a way to fix this?

 

Thanks!

[xerver]

You should use a single graphics object, and do multiple draws on it. Also make sure to call `.clear()` when you plan to redraw stuff.

[HemingwayGames]

Hi Oyed,

 

You might want to try rendering your rectangles at position (0,0). My understanding is this position will be relative to the graphics object's position. 

 

squares.drawRect(0, 0, squares.width, squares.height);

 

For example if the graphic object's position is (10, 10) and you render your rectangle at position (10,10), then the rectangle will render at global position (20, 20). Your new rectangles may actually be rendering off the screen.

 

You might also want to check what the graphic object's dimensions are (ie squares.width and squares.height). 

 

I personally would use my own variables for the dimensions:

 

var width = ..

var height = ..

 

squares.drawRect(0, 0, width, height);