# Destroy the Bitmapdata but retain data in sprite

**URL:** <https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771>\
**Category:** Phaser 2 / CE\
**Created:** [October 20, 2020, 10:33am UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771 "2020-10-20T10:33:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piyush\_noob](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@Piyush\_noob](https://phaser.discourse.group/u/Piyush_noob)\
**Post date:** [October 20, 2020, 10:33am UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/1 "2020-10-20T10:33:56Z")

</div>

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

> **[Phaser - Examples - Bitmapdata - Alpha Mask](https://phaser.io/examples/v2/bitmapdata/alpha-mask)**
>
> Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

* * *

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(game.world.centerX, 320, bmd).anchor.set(0.5, 0);

bmd.destroy();

```

## }

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [October 20, 2020, 11:27am UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/2 "2020-10-20T11:27:07Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Piyush\_noob](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@Piyush\_noob](https://phaser.discourse.group/u/Piyush_noob)\
**Post date:** [October 20, 2020, 11:49am UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/3 "2020-10-20T11:49:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [October 20, 2020, 12:02pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/4 "2020-10-20T12:02:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Piyush\_noob](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@Piyush\_noob](https://phaser.discourse.group/u/Piyush_noob)\
**Post date:** [October 20, 2020, 1:10pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/5 "2020-10-20T13:10:05Z")

</div>

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  
this.game.cache.addTexture 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.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [October 20, 2020, 1:52pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/6 "2020-10-20T13:52:51Z")

</div>

This makes no sense at all 🙂

Look at the code for generateTexture:

```
var image = new Image();
image.src = this.canvas.toDataURL("image/png");
var obj = this.game.cache.addImage(key, '', 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…

---

<div class="post-metadata">

**Author:** ![Piyush\_noob](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@Piyush\_noob](https://phaser.discourse.group/u/Piyush_noob)\
**Post date:** [October 20, 2020, 2:42pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/7 "2020-10-20T14:42:42Z")

</div>

Thanks for quick reply

> <https://github.com/photonstorm/phaser-ce/issues/136>
>
> This Issue is about
> A bug in the API (maybe)
> The problem can be found in this piece of code:
> var game = new...

  

> **[BitmapData.generateTexture doesn't work first time in Safari](https://www.html5gamedevs.com/topic/20258-bitmapdatageneratetexture-doesnt-work-first-time-in-safari/)**
>
> Open this fiddle on Safari/Mac and check the console. Youll see sprite/1/1, sprite2/0/0. Then hit Run and youll see 50/50 for both sprites. It seems as though BitmapData.generateTexture doesnt execute the first time around on Safari. The code that...

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 this.game.cache.addTexture or this.game.cache.addSprite but then I can not delete the BitmapData object.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [October 20, 2020, 2:54pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/8 "2020-10-20T14:54:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 20, 2020, 3:07pm UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/9 "2020-10-20T15:07:12Z")

</div>

Use [load.imageFromBitmapData()](https://photonstorm.github.io/phaser-ce/Phaser.Loader.html#imageFromBitmapData) in `preload()` or the `callback` argument in [generateTexture()](https://photonstorm.github.io/phaser-ce/Phaser.BitmapData.html#generateTexture).

https://codepen.io/samme/embed/preview/BZPXLq?height=300&slug-hash=BZPXLq&default-tabs=js,result&host=https://codepen.io

https://codepen.io/samme/embed/preview/LLBwZW?height=300&slug-hash=LLBwZW&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![Piyush\_noob](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@Piyush\_noob](https://phaser.discourse.group/u/Piyush_noob)\
**Post date:** [October 29, 2020, 5:12am UTC](https://phaser.discourse.group/t/destroy-the-bitmapdata-but-retain-data-in-sprite/7771/10 "2020-10-29T05:12:15Z")

</div>

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