Graphics Drawing and Memory Issues

[soulboundx]

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. 
 

[xerver]

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!

[soulboundx]

It seems because I add graphics as a variable to the stage when I clear it the rest of the previously drawn rects are gone. How would I add the rects to the stage so they don't get cleared away as well?

This is using your first methods*

[xerver]

`renderer.clearBeforeRender = false` makes the renderer not clear the framebuffer before rendering again.

[soulboundx]

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! 

[xerver]

In that case I would recommend trying the other options. #3 will be the most performant, but also the most complex. #2 will be simple, and will certainly be good enough for a school project.

[Jaker]

The more information you need, the more you have to store in your brain. If you are having difficulty drawing objects or remembering them, this may be a sign of a memory problem.