Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

時代は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オブジェクトで指定したキー

http://daishihmr.github.io/tmlib.js-adventcalendar-2014_2

demo.png

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

daishi_hmr
JavaScriptでゲームを作るのが趣味。 phina.jsをメインに使ってますよー。
http://www.dev7.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした