Jump to content

BitmapData Ram leak


Covacs
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.sample.png

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

Link to comment
Share on other sites

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.sample.png

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. 

Link to comment
Share on other sites

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 :ph34r:).

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

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