Jump to content

Redrawing BitmapText every frame causes memory leak - Pixijs v5&v6


JoeMGomes
 Share

Recommended Posts

Hi, I'm using PIXI.js v5.3.12 for a project and the project structures requires a call to "new BitmapText('some text', {fontName: 'my_font_name'})" every frame. Unfortunately this causes a memory leak because an 'on update' event listener is created every frame and is not GC'ed. 
Here is the stack trace of where I believe the allocation that is not freed occurs:

EE (pixi.js:1029)
addListener (pixi.js:1050)
on (pixi.js:1217)
Texture (pixi.js:15131)
BitmapText.updateText (pixi.js:36495)
BitmapText.validate (pixi.js:36637)
BitmapText.updateTransform (pixi.js:36618)
Container.updateTransform (pixi.js:8168)
Container.updateTransform (pixi.js:8168)
Renderer.render (pixi.js:22057)

Here is a compact example that reproduces the memory leak and mirrors what I am trying to do.

let container;
let loader = PIXI.Loader.shared;
loader.add("_30_font.fnt")

loader.load(() =>{

  container = new PIXI.Container();
  
  app.ticker.add(function(delta) {
    container.removeChildren();
    let bitmapText = new PIXI.BitmapText(new Date().toString(), { fontName: "_30_font"});
    bitmapText.x = 11
    bitmapText.y = 20
    container.addChild (bitmapText)
  });
    
  app.stage.addChild(container);
})

And a screenshot of a sequence of snapshots of the memory heap.

image.png.277df67dbf005140b46c4c441406ba33.png

 

I know instantiating a BitmapText every frame isn't probably the way to go but I also don't think it should cause a memory leak like this. Is it intended behaviour or just a bug?

 

EDIT: The leak persists when upgrading to PIXI v6 :(

Edited by JoeMGomes
Additional information
Link to comment
Share on other sites

  • JoeMGomes changed the title to Redrawing BitmapText every frame causes memory leak - Pixijs v5&v6

I ended up pooling the Bitmaptext objects and resetting them each frame (for anyone trying to do this, don't forget to reset the .mask property as well, gave me a hard time :)).

This is actually a good enough fix that is not too hard to apply if you have easy access to the bitmaptext objects (which wasn't necessarily my case unfortunately) 

17 hours ago, ivan.popelyshev said:

did you try to destroy() old one?

 

I'll leave a fix for my initial example here for anyone struggling.

let container;
loader.add("_30_font.fnt")

loader.load(() =>{
  container = new PIXI.Container();  
  app.ticker.add(function(delta) {
	//FIX HERE
    let removed = container.removeChildren();
    removed.forEach(element => {
      element.destroy();
    });
	//END FIX
    let bitmapText = new PIXI.BitmapText(new Date().toString(), { fontName: "_30_font"});
    bitmapText.x = 11
    bitmapText.y = 20
    container.addChild (bitmapText)
  });
    
  app.stage.addChild(container);
})

Thanks anyways @ivan.popelyshev !!!

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