Jump to content

How to free memory after create sprite based on bitmap


luq
 Share

Recommended Posts

I have a code for generate rounded image: 

 

var PhaserUtils = {
  /**
   * Create sprite with rounded corners
   *
   * @param {Phaser.GameObjectCreator} game
   * @param {Number} x
   * @param {Number} y
   * @param {String} src
   * @param {Number} radius
   * @return {Phaser.Sprite}
   */
  getRoundedImage: function(game, x, y, src, radius){
    var sprite  = game.make.sprite(0, 0, src);
    var bitmap  = game.make.bitmapData(sprite.width, sprite.height);
    var mask    = game.make.graphics(0, 0);

    bitmap.smoothed = false;

    mask.beginFill(0xffffff);
    mask.drawRoundedRect(0, 0, sprite.width, sprite.height, radius);
    mask.endFill();

    var maskSprite = game.make.sprite(0, 0, mask.generateTexture());

    bitmap.alphaMask(sprite, maskSprite);

    var res = game.make.sprite(x, y, bitmap);

    mask.destroy(true);
    maskSprite.destroy(true);
    sprite.destroy(true);

    return res;
  },
};


But if I destroy sprite created by this getRoundedImage function, in memory leave info about variable bitmap. I can see it on memory heap snapshoot in Chrome (See screen)

See here: 

Version with use getRoundedImage and memory leak (use 32.6MB of memory after remove all sprites):
https://jsfiddle.net/Lsqtrumk/1/

Version with NOT use getRoundedImage (use 16.8MB of memory after remove all sprites):
https://jsfiddle.net/Lsqtrumk/3/

So my question is - how to destroy this bitmap on the moment when sprite is destroyed? Or maybe I do something totally wrong?

1.png

Link to comment
Share on other sites

Yep, this work correctly. I add this onDestroy event to getRoundedImage() like this

var PhaserUtils = {
  /**
   * Create sprite with rounded corners
   *
   * @param {Phaser.GameObjectCreator} game
   * @param {Number} x
   * @param {Number} y
   * @param {String} src
   * @param {Number} radius
   * @return {Phaser.Sprite}
   */
  getRoundedImage: function(game, x, y, src, radius){
    var sprite  = game.make.sprite(0, 0, src);
    var bitmap  = game.make.bitmapData(sprite.width, sprite.height);
    var mask    = game.make.graphics(0, 0);

    bitmap.smoothed = false;

    mask.beginFill(0xffffff);
    mask.drawRoundedRect(0, 0, sprite.width, sprite.height, radius);
    mask.endFill();

    var maskSprite = game.make.sprite(0, 0, mask.generateTexture());

    bitmap.alphaMask(sprite, maskSprite);

    var res = game.make.sprite(x, y, bitmap);

    mask.destroy(true);
    maskSprite.destroy(true);
    sprite.destroy(true);

    // On destroy this sprite destroy also a bitmap
    res.events.onDestroy.add(function(){
      bitmap.destroy();
    });

    return res;
  },
};


I also see that i can destroy my bitmap with 3. param of Group.removeAll() method https://phaser.io/docs/2.6.1/Phaser.Group.html#removeAll but i think this is worse way to do this.
To suck is`t that  not all methods removed children from group can`t dispatch children onDestroy event, i think it can be despatched always by default.

EDIT: Okey, I guess I understood - remove and destroy is totally different process

Thx for help! :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...