Web Font preloading and Phaser (demos included)

[ladybenko]

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!