Webフォントをassetとしてロード

時代はWebフォント！

Google Fontsとかもあるしね。

@YFukuyamaさんがこちらの記事で書いていらっしゃるように環境依存を回避したいですし、ゲームの雰囲気に合ったフォントを使っていきたくもあります。

tm.scene.LoadingSceneでフォントをロードしたい

フォントもアセットの一種なので、画像や音声と同じようにLoadingSceneを使ってロードしたいですね。

そこでこんなコードを書いてみました。

webfont.js

tm.define("tm.asset.WebFont", {
    superClass: "tm.event.EventDispatcher",

    init: function(path, key) {
        this.superInit();

        var testElement = tm.dom.Element("body").create("span");
        testElement.style
            .set("color", "rgba(0, 0, 0, 0)")
            .set("fontSize", "40px");
        testElement.text = "QW@HhsXJ=/()";

        var before = testElement.element.offsetWidth;

        testElement.style
            .set("fontFamily", "'{0}', 'monospace'".format(key));

        var fontFaceStyleElement = tm.dom.Element("head").create("style");
        fontFaceStyleElement.text = "@font-face { font-family: '{0}'; src: url({1}) format('truetype'); }".format(key, path);

        var retryCount = 30;
        var checkLoadFont = function() {
            retryCount -= 1;
            if (testElement.element.offsetWidth !== before || retryCount === 0) {
                testElement.remove();
                this.flare("load");
            } else {
                setTimeout(checkLoadFont, 100);
            }
        }.bind(this);
        setTimeout(checkLoadFont, 100);
    },
});

tm.asset.Loader.register("ttf", function(path, key) {
    return tm.asset.WebFont(path, key);
});

以前ここで書いた内容を、tm.asset.Loaderの形式に倣って書きなおしたものです。

これを使い、本体側のコードでこのように書いてみます。

main.js

var loadingScene = tm.scene.LoadingScene({
    assets: {

        // フォントファイルIndieFlower.ttfをロード
        mainFont: "fonts/Indie_Flower/IndieFlower.ttf",

        // フォントファイルLobster-Regular.ttfをロード
        subFont: "fonts/Lobster/Lobster-Regular.ttf",

    },
    nextScene: MainScene,
});

これで行けるか……！？ と思いきや、これだけではうまくいきません。
tmlib.js本体にも少しだけ手を加える必要があります。

tmlib.js

6801:-            var asset = tm.asset.Loader._funcs[type](path);
6801:+            var asset = tm.asset.Loader._funcs[type](path, key);

これでうまくいきます。

ロードしたフォントを使う時はこのようにfontFamilyを指定してください。

main.js

tm.display.Label("Cure Cure Pretty!", 100)
    .setFillStyle("pink")
    .setFontFamily("mainFont"); // ロード時にassetsオブジェクトで指定したキー

ソースコードはこちらからダウンロードできます。