Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

PIXI.Text lowering fontSize after creation


guid33
 Share

Recommended Posts

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. 

 

Link to comment
Share on other sites

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

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