BitmapData Ram leak

[Covacs]

Hí there, im trying to create a game where i shoot ink to walls to paint them. But while i tested i saw that game ram usage increases every time i draw in a bitmapdata. The bitmapdata size is 300x300, when i shoot to it i draw a 64x64 (random color circle) temporal bitmapdata on it. I think the bitmapdata is holding data from all drawing i made... but i dont know why.

This is the code where i draw:

var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
ink = game.make.bitmapData(64, 64);
ink.circle(32, 32, 32, color);
wall.draw(ink, ink.x-(wall.x-wall.width/2),ink.y-(wall.y-wall.height/2), ink.width,inkp.height);

i only have ink and wall, but if i shoot the walllot of times (Sooo many times bacause i networked it to play with my friends) it start taking like 2000mb ram :/. if i just delete those lines the game is fine, i dont know why wall bitmapdata is acumulating data from all draws i do....

Thanks.

[WombatTurkey]

You're not using that in an update method by chance are you? (draw should, but not game.make.bitmapData)

[rich]

You're creating a brand new BitmapData, rather than drawing to an existing one, every time you call that code, so yes memory will continue to sky rocket. Come up with another approach.

[ForgeableSum]

No doubt creating a new bitmapdata object would be an enormous memory-suck (if that is what you are doing). But I've found bitmapdata in general is a huge memory suck. Drawing to any bitmapdata larger than 300 x 300 on every update is a performance hog. You can often use render textures in place of bitmapdata, depending on what you need to do. 

But in your case, it looks like you are just drawing a circle. You should absolutely not use bitmap data to draw simple geometry. Instead, use a Phaser.Graphics for that (game.add.graphics).  The performance gains will be tremendous as the canvas is quite efficient at drawing simple geometry. 

[Covacs]

24 minutes ago, feudalwars said:

No doubt creating a new bitmapdata object would be an enormous memory-suck (if that is what you are doing). But I've found bitmapdata in general is a huge memory suck. Drawing to any bitmapdata larger than 300 x 300 on every update is a performance hog. You can often use render textures in place of bitmapdata, depending on what you need to do. 

But in your case, it looks like you are just drawing a circle. You should absolutely not use bitmap data to draw simple geometry. Instead, use a Phaser.Graphics for that (game.add.graphics).  The performance gains will be tremendous as the canvas is quite efficient at drawing simple geometry. 

I use bitmapdata because i want to draw to it another images later, like a ink bullet. Im a quite new on this, so i thought bitmapdata was the best. I attach an image to help understanding what im doing.

I have my player, whith a gun dat shoots ink and then i when collision occurs i draw it on those planets bitmapdata (each planet have a own bitmapdata and i use context.clip() to dont alow ink paint outside the circle as i read here https://software.intel.com/en-us/html5/hub/blogs/cutting-through-images-in-canvas/#i.wgzkq4zc3crby5, the clip code is on the planet constructor, i dont know if it should be there but it works).

[ForgeableSum]

6 minutes ago, Covacs said:

I use bitmapdata because i want to draw to it another images later, like a ink bullet. Im a quite new on this, so i thought bitmapdata was the best. I attach an image to help understanding what im doing.

I have my player, whith a gun dat shoots ink and then i when collision occurs i draw it on those planets bitmapdata (each planet have a own bitmapdata and i use context.clip() to dont alow ink paint outside the circle as i read here https://software.intel.com/en-us/html5/hub/blogs/cutting-through-images-in-canvas/#i.wgzkq4zc3crby5, the clip code is on the planet constructor, i dont know if it should be there but it works).

Yeah, you can just as easily use render textures. So create a render texture for each planet, render the world sphere, then render the ink bullet on top each time it collides. 

A bitmapdata creates an entirely separate canvas element. A render texture is just a custom texture, it is far better on performance. 

[Covacs]

Wow, thanks a lot to all for this help. I solved the problem with the bitmapdata, and now im gonna try using render textures like feudalwars said. (Lets read phaser docs ).

[ForgeableSum]

2 minutes ago, Covacs said:

Wow, thanks a lot to all for this help. I solved the problem with the bitmapdata, and now im gonna try using render textures like feudalwars said. (Lets read phaser docs ).

Just some tips:

* Only use bitmap data when you are doing advanced image manipulation (i.e. the kind of stuff you would need to do in photoshop like an HSL shift)

* For render textures, add the render textures to the world with game.add.renderTexture, then create a sprite with the render texture supplied as the key (game.add.sprite(0,0,renderTexture)). Remember that render textures are not sprites or images, they are simply textures. So you will need to create a sprite for each sphere with a render texture as its texture. 

[Covacs]

On 13/11/2016 at 10:33 PM, feudalwars said:

Just some tips:

* Only use bitmap data when you are doing advanced image manipulation (i.e. the kind of stuff you would need to do in photoshop like an HSL shift)

* For render textures, add the render textures to the world with game.add.renderTexture, then create a sprite with the render texture supplied as the key (game.add.sprite(0,0,renderTexture)). Remember that render textures are not sprites or images, they are simply textures. So you will need to create a sprite for each sphere with a render texture as its texture. 

Ok, now i use renderTextures for paint shoots, but in planets when bullets collide i kill them. And then the ink explode in some random ways to simule real ink (or a nice effect), so i locked the planet canvas (bitmapData) to avoid drawing outside the circle like here https://software.intel.com/en-us/html5/hub/blogs/cutting-through-images-in-canvas/#i.wgzkq4zc3crby5 using "bitmapData.context.clip()". Is there a way to lock a renderTexture / sprite that way to a shape and then avoidid using bitmapData?

[ForgeableSum]

21 hours ago, Covacs said:

Ok, now i use renderTextures for paint shoots, but in planets when bullets collide i kill them. And then the ink explode in some random ways to simule real ink (or a nice effect), so i locked the planet canvas (bitmapData) to avoid drawing outside the circle like here https://software.intel.com/en-us/html5/hub/blogs/cutting-through-images-in-canvas/#i.wgzkq4zc3crby5 using "bitmapData.context.clip()". Is there a way to lock a renderTexture / sprite that way to a shape and then avoidid using bitmapData?

Just create a circular mask on the sprites:

http://phaser.io/docs/2.4.4/Phaser.Sprite.html#mask

That way, it will only show the painted stuff on the sphere.