Jump to content

Web Font preloading and Phaser (demos included)


ladybenko
 Share

Recommended Posts

Hi all,

I was experimenting with techniques for Web Font preloading and ended up writing an article ("Web Font preloading for HTML5 games") with my findings, along with some demos working in Phaser.

There are several ways to detect whether a font has been loaded or not (like rendering a text in a DOM element and check for size/scrolls events, etc.), as well as a proper, standard JavaScript API that as of today, only a few browsers have implemented (Firefox, Chrome and Opera). There are several third-party libraries out there (like TypeKit's Loader, FontFace Observer, etc.) which use this JavaScript Font Loading API and do a fallback to workarounds if browsers don't support it.

The problem is that Phaser's loader does not integrate anything like this, so right now you need to bypass the loader entirely and keep the font loading separate from other assets loading. This might cause some problems because once your game state hits create the font might not be loaded yet. This demo shows this technique by introducing some flags that delay text rendering until both the preload phase and the font load have been completed.

If you'd like to integrate the font loading inside Phaser's preload phase, you'd need to write your custom loader extending Phaser.Loader. My own version of this custom loader involves modifying one internal Phaser.Loader method, which is not ideal and might break in future Phaser's releases.

In the article I describe with more detail all of this, so if you are interested check it out.

Now, looking into the future… Since WebFonts is the only way we have to render text with our own TTF files, I'd love for Phaser to acknowledge this and offer a way to load these TTF (or woff2, or whatever) files like the other assets. Since the JS API is not implemented in some major browsers yet (like Edge, or Safari), if we were to include this now, we'd need to use a third-party library, which would bump Phaser's build file –which is already big. A lightweight library would be FontFace Observer, which is ~5KB (1.5KB less without the Promise polyfill). I can see @photonstorm not wanting to make Phaser bigger, so my proposals would be:

  1. Include one of these libraries in a custom Phaser build. If a users selects that build, a method to load webfonts would be added to Phaser.Loader.
  2. Make Phaser.Loader a bit more flexible, so people can implement their own custom loading, without the need to overwrite an internal method. A way to queue an asset and tell the loader when it has been finished or not (via events) would be really helpful. (NOTE: if this is already possible please someone tell me how).
  3. Ignore this feature for Phaser and pray that the Font Loading API is implemented by all major browsers when Lazer is out. Make the Phaser.Loader use this API in a method that can load webfonts.

 I'm happy to contribute code and make a PR if Richard thinks any of these approaches is OK. Does anybody have other suggestion to make webfont loading happening in Phaser?

Also, the this Google Fonts example in Phaser is kind of broken because it introduces an arbitrary delay of one second to render the text. By using two flags (one for when the create phase has started, and one for when the font has been loaded) we don't need this delay. Would it be OK to submit a PR to fix this example?

Thanks!

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