Jump to content

Updating Graphics in a loop


Recommended Posts

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?



Link to comment
Share on other sites

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);
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...