Jump to content

Graphics Drawing and Memory Issues


soulboundx
 Share

Recommended Posts

Hey everyone!

First time JavaScript and Pixi dev here at college and I have a project where our team is making cursors leave behind "paint."

Right now I declare a global then assign. I add that to the stage and in the loop I begin and end fills. However this is causing so much memory build up Chrome is crashing. I was looking for advice on how to do so as when I tried sprite creation for the paint my game soon began to loose frames.  

OUTSIDE OF LOOP

//Global
var graphics;

 

 

//During setup
graphics = new PIXI.Graphics(); 

stage.addChild(graphics);

 

 

//function play()

graphic.beginFill(color);

graphics.drawRect(brush1.x, brush2.x, 5,5);

graphics.endFill();

(REPEAT FOR BRUSH2)

 

 

 

That's is it, the basic idea, it just draws graphics which is already added to the stage outside of the function loop. Checking memory the graphics update buffer/webGL explodes with memory eventually after a while crashing when too much drawing occurred. 
 

Link to comment
Share on other sites

Are you drawing a square each frame (or each mouse move)? We don't combine geometry in the graphics object so if you are, then over time it will just be adding data to an unbounded buffer and eventually crash. Graphics works by holding a list of all the geometry to draw and drawing them all each frame. Each time you call .drawRect() it adds a rectangle to that list. This is different than the browser's canvas2d api which draws the rect to a texture and forgets about the geometry.

There are a few ways you can achieve what you want:

  1. Set `renderer.clearBeforeRender = false` then call graphic.clear() before you draw the new square. This would "leave behind" the previous stuff you have drawn, but ensure the grpahics object is cleared of old buffered data each frame.
  2. Draw to a canvas (without using PIXI.Graphics) then use that canvas as a texture.
  3. Combine the geometry so that you are drawing a single polygon each frame, and each time you add a rectangle you just combine that rectangle geometry into your tracked polygon. Clear the Graphics each frame and draw the polygon you track.

Hope this helps!

Link to comment
Share on other sites

Wow my wording on the last post was terrible.

I called renderer.clearBeforeRender = false after my renderer was constructed, and then tried it in other areas of the javascript. but it is not keeping the framebuffer, my rectangles are getting cleared off the screen now when using graphics.clear() regardless of the clearBeforeRender. 

Thanks for the quick replies! 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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