PIXI.Text lowering fontSize after creation

[guid33]

I have a situation in which I want text to fit into a certain size box.  If that text is larger then that box, then it will set the fontSize to one pixel lower until it fits within the bounds.  

a very simple example where I'm just arbitrarily setting the text box to a final size of 30:

let app = new PIXI.Application({width:1920,height:1080,antialias:true});
document.body.appendChild(app.view);

let container = new PIXI.Container();
let myLongText = "some really really long text would go here";
let gText = new PIXI.Text(mylongText,{
        fill:0x000000,
        fontFamily:"Arial",
        fontSize: 60,
        wordWrap:true,
        wordWrapWidth:400
});

//for this simple example just lower the fontSize to 30. 
//in real world it would be based on if the calculateBonds height/width are within my height/width I //want
for(var i = 0; i < 30; i++){
    txt.style.fontSize = txt.style.fontSize - 1;
    txt.calculateBounds();
}

//add it to a blank container which would be added to the stage
container.addChild(gText);
app.stage.addChild(container);

The problem is, the GPU is significantly higher when doing that loop then if I just did this:

let app = new PIXI.Application({width:1920,height:1080,antialias:true});
document.body.appendChild(app.view); 

let container = new PIXI.Container();

//just set the font to 30 which was the final size in our example above
let gText = new PIXI.Text(mylongText,{
        fill:0x000000,
        fontFamily:"Arial",
        fontSize: 30,
        wordWrap:true,
        wordWrapWidth:400
});

container.addChild(gText);
app.stage.addChild(container);

(the mylongText is 285 characters long)

For the Loop, I am seeing 135,350K for the GPU in Chrome Per Tab Task Manager.  When doing the second where I just set the final size right away, I'm seeing 95,500K for GPU memory in Chrome Per Tab Task Manager

My assumption is that the loop through is some how causing it to maintain some textures or something else in memory that should have been discarded? 

Does anyone have any suggestions on how to eliminate that overhead? I tried marking the font as dirty at the end but that didn't seem to release any memory. 

 

[ivan.popelyshev]

I bet its trying to redraw canvas every time you call "calculateBounds" https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js#L410.

I doubt that its a memory leak, because texture is the same, it just gets uploaded and resized many times.

There areTextMetrics that are called from updateText: https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js#L138 , you should use them directly, so Text wont update canvas in every iteration of cycle.

Because pixi is lightweight open-source lib, PIXI Text is limited. For example, there's diagonal gradient feature: https://github.com/pixijs/pixi.js/pull/4331 , that wont be added just because it makes pixi text even more complex. Its ok to fiddle with its internals and read the source code,.

[guid33]

calling TextMetrics instead of the calculateBounds in the loop did the trick.  Thanks for finding that difference.