0

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


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 内でそこにかかれてあるとおり

    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");

のようにかいたところ

Uncaught TypeError: Cannot read property 'getImageById' of undefined

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

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

scene.assets["test"]

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

    scene.loaded.add(() => {

        var fontAsset = scene.assets["bitmap"];
        var fontGlyphAsset = scene.assets["bitmap_glyphs"];

    // テキストアセット (JSON) の内容をオブジェクトに変換
    var glyphInfo = JSON.parse(fontGlyphAsset.data);
    console.log(glyphInfo);

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

    // ビットマップフォントを生成
    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
    });

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

Uncaught TypeError: Cannot read property '48' of undefined

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

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

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

なので

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

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

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

{
  "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
}

1 件の回答 1

1
  1. 数字の 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-ge[email protected] で、同じフォント・同じコマンドオプションで実行しましたが、正しい画像と JSON が生成されました。

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

1
  • おっしゃるとおり game.json が v2 になってたので v3 にしたところ 48 の方は解決しました。bmpfont-generator のほうは更新しても治らず --chars をやめて -f chars.txt から読むとうまく生成されました。windows 上のコマンドプロンプトでやってるのでシェル上の文字コードのせいだったりしたのかもですが原因不明ですがとりあえず解決できたので助かりました!
    – user35303
    2021年8月4日 3:12

この質問に回答するには、ログインする必要があります。