Rob Morris

Intermittent Global Text Offset

Recommended Posts

Hey all!  I'm using Pixi.js in my edutainment platform, and it rocks.  We're about to go live, and in our testing have found an intermittent issue with how text in Pixi.Text elements is rendered.

Context: we're using a webfont loaded using Google's webfont.js like so:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: ['Short Stack']
    }
  });
</script>

This produces a synchronous load, and is run before we bootstrap up Pixi and our framework/game.  This seems to be working fine; I include it purely for context.

The problem is that very seldomly, our Pixi.Text elements render with the text offset vertically by ~5 pixels.  When this happens, ALL our text is offset.  Doing a hard refresh (ctrl+shift+R on Firefox) resolves the issue, usually.  See the attached screenshots for what it looks like when it borks.

So!  Any ideas what could be causing this issue?  I know folks have had issues with load timing in the past, but the webfont is clearly loaded by the time the game renders - the font is correct in both versions.  There's zero code changes between the working and offset versions - just a hard refresh.  Help?

 

frame2.png

frame1.png

Share this post


Link to post
Share on other sites

I wonder if text metrics are sometimes being generated before the font has actually finished loading, thus spacing is thrown off when it then generates text with the loaded font.

You often need to have used a custom font once in the dom before it'll then work everywhere else. I reckon 

isn't miles away from what your issue is. Different symptoms to the same underlying issue.

Share this post


Link to post
Share on other sites

One thing you should do if you are using WebFont is ensure before you proceed, the load is already done. You can use the active callback for this.

I use some fonts which are web based or are local to my game.

I do something like the following.

WebFont.load({
    google: {
        families: ['Pacifico']
    },
    active: function() {
        app.webFontsLoaded = true;
        if (app.coreAssetsLoaded) {
            app.nextState = GameState.Game;
        }
    }
});

 

There are two flags in use here since I have 2 async things loading: font and and "core assets". So both loading mechanisms check to see if the other one is done. If you don't have this need, you can remove it.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.