Destroy the Bitmapdata but retain data in sprite

Hello All,

I’m creating a new BitmapData object and apply alpha-masking on it.
Then store resulting BitmapData into a sprite object for better handling.
I need to destroy the BitmapData after creating the sprite as I’m creating lot’s of BitmapData. And that results in a lot of memory usage.

However when I destroy the BitmapData object my sprite becomes empty.
How can I destroy the BitmapData but retain the data inside the sprite object.

You can refer the below Phaser sample for same

var game = new Phaser.Game(800, 600, Phaser.AUTO, ‘phaser-example’, { preload: preload, create: create });

function preload() {

game.load.image('pic', 'assets/pics/questar.png');
game.load.image('mask', 'assets/pics/mask-test2.png');


function create() {

game.stage.backgroundColor = 0x4d4d4d;

game.add.text(64, 10, 'Source image', { font: '16px Arial', fill: '#ffffff' })
game.add.image(64, 32, 'pic');

game.add.text(400, 10, 'Alpha mask', { font: '16px Arial', fill: '#ffffff' })
game.add.image(400, 32, 'mask');

//	Create a new bitmap data the same size as our picture
var bmd = game.make.bitmapData(320, 256);

//	And create an alpha mask image by combining pic and mask from the cache
bmd.alphaMask('pic', 'mask');

//	A BitmapData is just a texture. You need to apply it to a sprite or image
//	to actually display it:
game.add.image(, 320, bmd).anchor.set(0.5, 0);



Thanks in advance.

The Sprite uses the BitmapData as texture. There is nothing to optimize. The Sprite is not psychic, somehow remembering what texture it used to have :slight_smile:

Thanks for quick reply.
Can we make a copy or something of that texture in any other format so I can delete the BitmapData.

In v2 you can do var texture = bitmapdata.generateTexture('ball');
In v3 you have to create a canvasTexture, and draw you bitmap on to it.
Not sure what the point is though, same memory footprint.

1 Like

Thank you for quick reply.
Using generateTexture does help but only in Chrome.
This function has issues in Firefox and other browsers on 1st load thus was using function instead and getting the texture through ‘bitMapData.baseTexture.source’.

In my scenario I’m using CE 2.10.1 and have a lot of animations in game. So after playing for an hour or so the memory consumption goes in gb thus I need to destroy the BitmapData post generating the alpha mask.

This makes no sense at all :slight_smile:

Look at the code for generateTexture:

var image = new Image();
image.src = this.canvas.toDataURL("image/png");
var obj =, '', image);
return new PIXI.Texture(obj.base);

There is no way this is not supported by ANY browser.
I use this all the time in Firefox.
The Bitmapdata is not your problem…

Thanks for quick reply

These are the links of issues where I got to know about the issue of generateTexture.
Initially I was using the generateTexture function and destroying the BitmapData object and worked fine. Till I noticed the issue of Firefox. Please note that this issue comes only on 1st load not on sub-sequent loads. As a work around I add or but then I can not delete the BitmapData object.

I have no idea what ‘1st load’ has to do with anything. Maybe you should implement something that assures the assets are loaded.
You are trying to solve a problem that does not exist.

Use load.imageFromBitmapData() in preload() or the callback argument in generateTexture().

Thanks guys for the quick reply.
Thanks samme, the callback argument of generateTexture did it.
Got it working perfectly.