ニコ生ゲームをつくってみたくて
ビットマップフォントを表示したいのですがうまくいきません
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) はあるんですよね
なので
bmpfont-generator で --chars に指定したにもかかわらず
JSON に大文字 S(83) にあたるマップが生成できてない数字の 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
}