80565


ニコ生ゲームをつくってみたくて  
ビットマップフォントを表示したいのですがうまくいきません

* * *

<https://akashic-games.github.io/tutorial/v3/introduction.html>  
こちらからチュートリアルを順番に試していって  
四角や画像ははれるようになったのですが  
<https://akashic-games.github.io/tutorial/v3/bitmap-font.html>  
こちらにかかれているビットマップフォントを使おうと

<http://nicofont.pupu.jp/nicomoji-plus.html>  
こちらでダウンロードした ttf から  
`bmpfont-generator --chars '0123456789SCORTIME: ' --height 16 --fill "#ffffff"
nicomoji-plus_1.11.ttf bitmap.png`  
と実行して bitmap.png, bitmap_glyphs.json はできて  
それぞれ image と text フォルダに配置して  
`akashic scan asset`  
を実行して game.json に追加はされました

scene 内でそこにかかれてあるとおり

[code]

        const scene = new g.Scene({
            game: g.game,
        　　assetIds: ["bitmap", "bitmap_glyphs"]
      　});
    
        scene.loaded.add(() => {
            var fontAsset = scene.asset.getImageById("bitmap");
            var fontGlyphAsset = scene.asset.getTextById("bitmap_glyphs");
    
[/code]

のようにかいたところ

[code]

    Uncaught TypeError: Cannot read property 'getImageById' of undefined
    
[/code]

と scene.asset の時点で undefined になってしまいます

以前のセクションの画像の描画のときには

[code]

    scene.assets["test"]
    
[/code]

みたいな書き方でよめてたので

[code]

        scene.loaded.add(() => {
    
            var fontAsset = scene.assets["bitmap"];
            var fontGlyphAsset = scene.assets["bitmap_glyphs"];
    
        // テキストアセット (JSON) の内容をオブジェクトに変換
        var glyphInfo = JSON.parse(fontGlyphAsset.data);
        console.log(glyphInfo);
    
[/code]

とかいたところここまでは読み込めたみたいです  
続いて

[code]

        // ビットマップフォントを生成
        var font = new g.BitmapFont({
            src: fontAsset,
            glyphInfo: glyphInfo
        });
        console.log(font);
    
        var label = new g.Label({
            scene: scene,
            text: "SCORE: 1000",
            fontSize: 20,
            font: font
        });
    
[/code]

のようにかいったところ font までは生成できたんですがラベル生成のところの  
ライブラリの奥深くで

[code]

    Uncaught TypeError: Cannot read property '48' of undefined
    
[/code]

というエラーになります  
text を "S" にするとエラーの数字が 83 になるので  
文字コードを探しに行って見つかってないんだと思うんですが

`bmpfont-generator --chars '0123456789SCORTIME: '`  
と文字列は指定してあるんですよね

でJSONの中を見てみたら以下のようになってて  
確かに 83 (大文字S) はないんですが 48(0) はあるんですよね

なので

  1. bmpfont-generator で --chars に指定したにもかかわらず  
JSON に大文字 S(83) にあたるマップが生成できてない

  2. 数字の 0 にあたる文字コード 48 は生成できてるのに undefined property になる

と２重におかしなことがおこってるので解決法がわかる方いたら助けてほしいです

[code]

    {
      "map": {
        "34": {
          "x": 1446,
          "y": 1197,
          "width": 29,
          "height": 51
        },
        "44": {
          "x": 1186,
          "y": 1197,
          "width": 17,
          "height": 51
        },
        "48": {
          "x": 129,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "49": {
          "x": 1534,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "50": {
          "x": 49,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "51": {
          "x": 578,
          "y": 1093,
          "width": 39,
          "height": 51
        },
        "52": {
          "x": 697,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "53": {
          "x": 1494,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "54": {
          "x": 304,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "55": {
          "x": 384,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "56": {
          "x": 888,
          "y": 1093,
          "width": 39,
          "height": 51
        },
        "57": {
          "x": 737,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "58": {
          "x": 1476,
          "y": 1197,
          "width": 17,
          "height": 51
        },
        "71": {
          "x": 1704,
          "y": 1145,
          "width": 39,
          "height": 51
        },
        "97": {
          "x": 94,
          "y": 1,
          "width": 40,
          "height": 51
        },
        "100": {
          "x": 529,
          "y": 1197,
          "width": 40,
          "height": 51
        },
        "101": {
          "x": 1273,
          "y": 1197,
          "width": 37,
          "height": 51
        },
        "103": {
          "x": 1326,
          "y": 1197,
          "width": 40,
          "height": 51
        },
        "104": {
          "x": 1367,
          "y": 1197,
          "width": 38,
          "height": 51
        },
        "105": {
          "x": 1311,
          "y": 1197,
          "width": 14,
          "height": 51
        },
        "108": {
          "x": 1744,
          "y": 1145,
          "width": 14,
          "height": 51
        },
        "109": {
          "x": 1477,
          "y": 1145,
          "width": 41,
          "height": 51
        },
        "110": {
          "x": 1625,
          "y": 1145,
          "width": 37,
          "height": 51
        },
        "112": {
          "x": 1798,
          "y": 1145,
          "width": 40,
          "height": 51
        },
        "115": {
          "x": 1572,
          "y": 1145,
          "width": 37,
          "height": 51
        },
        "116": {
          "x": 1406,
          "y": 1197,
          "width": 39,
          "height": 51
        },
        "119": {
          "x": 472,
          "y": 1197,
          "width": 41,
          "height": 51
        },
        "120": {
          "x": 1977,
          "y": 1145,
          "width": 42,
          "height": 51
        },
        "121": {
          "x": 217,
          "y": 1197,
          "width": 38,
          "height": 51
        },
        "123": {
          "x": 1926,
          "y": 1145,
          "width": 20,
          "height": 51
        },
        "125": {
          "x": 1574,
          "y": 1197,
          "width": 20,
          "height": 51
        }
      },
      "missingGlyph": {
        "x": 1595,
        "y": 1197,
        "width": 49,
        "height": 51
      },
      "height": 51
    }
    
[/code]


CC BY-SA 4.0
2021-08-02T18:15:26.127
80550
2021-08-03T09:58:15.190
question
javascript
akashic でビットマップフォントが使えない


>   2. 数字の 0 にあたる文字コード 48 は生成できてるのに undefined property になる
>

> Uncaught TypeError: Cannot read property 'getImageById' of undefined

「ゲームが Akashic Engine v2 向けの設定になっていて、v3 で追加された機能を使うとエラーになっている」ように見えます。(古いバージョンの
akashic init コマンドは v2 系エンジン向けのゲームを生成するので、その影響かもしれません。 `npm install -g
@akashic/akashic-cli` で最新に更新できます)

game.json の `"environment"` の `"sandbox-runtime"` の箇所の値が、 `"2"` になっていないでしょうか？
もしそうであれば、以下のページに従って v3 系に移行することができます。  
<https://akashic-games.github.io/tutorial/v3/v3-migration-guide.html>  
(あるいは単に新しいバージョンの akashic init で生成しなおしてそちらに移ることもできます)

> bmpfont-generator で --chars に指定したにもかかわらず JSON に大文字 S(83) にあたるマップが生成できてない

一方こちらは不可解です。貼られている JSON を見ると、 `--chars` (か `-f`) で指定された文字が
`",0123456789:Gadeghilmnpstwxy{}` だったように見えますし、 `--height 16` にしては各 height
も大きすぎます。 x, y も偏っていて、対応する画像の上側 1000px がほとんど使われません。

手元の bmpfont-generator@4.0.5 で、同じフォント・同じコマンドオプションで実行しましたが、正しい画像と JSON が生成されました。

試せることがあるとしたら bmpfont-generator の最新版への更新でしょうか……。 `npm install -g
@akashic/bmpfont-generator` で更新できるはずです。


CC BY-SA 4.0
2021-08-03T09:58:15.190
80565
2021-08-03T09:58:15.190
47577
80550
answer