こちらの記事の続き
初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル(1)
Texture MergerでBitmap Fontの作成
TextureMerger起動後に表示されるメニューでBitmap Font
を選択する
ステップ1:インストールされたシステムフォントを使用してビットマップフォントを作成するのに適したシステムフォント。
エディターで、フォント化した文字と、レンダリングするためのシステムフォント・サイズ・色・装飾を調整してCinfirmする
ステップ2:ビットマップフォントを作成する断片的なイメージの一部に合わせて文字を追加します。
0 1 2フォントイメージを選択し、追加の拡張名を削除することを忘れないでください。左の名前と右の画像が対応しているので、名前「0」は画像0を表す。拡張子を追加する場合は、テキストにlabel.text = "0_png"を表示する必要があります。
方法3:ビットマップフォントを作成するためにアートによって提供されるグラフィックフォント全体に適したフォントテクスチャセット。
この文字セットに生まれ、よりパーソナライズされたフォントを容易にすることである、芸術はきれいによく描かれた文字を配置することができるが、画像につながる、あなたはインポートツールを使用することができ、ツールが自動的に各文字の領域を特定します、我々あなたがする必要があるのは、下のテキストボックスに対応するテキストを入力することだけです。文字を順番に入力したら、[OK]をクリックします。
エクスポート
エクスポート設定画面が表示される
ひとまずスケールは100%のまま「Export」ボタンを押す
test.fnt
ファイルとtest.png
ファイルがエクスポートされる
test.fnt
{"file":"test.png","frames":{
"0":{"x":24,"y":1,"w":20,"h":27,"offX":3,"offY":13,"sourceW":23,"sourceH":40},
"1":{"x":46,"y":1,"w":12,"h":27,"offX":4,"offY":13,"sourceW":16,"sourceH":40},
"2":{"x":22,"y":59,"w":19,"h":26,"offX":4,"offY":13,"sourceW":23,"sourceH":39},
"3":{"x":1,"y":29,"w":19,"h":27,"offX":3,"offY":13,"sourceW":22,"sourceH":40},
"4":{"x":1,"y":1,"w":21,"h":26,"offX":2,"offY":14,"sourceW":23,"sourceH":40},
"5":{"x":43,"y":59,"w":19,"h":26,"offX":3,"offY":14,"sourceW":22,"sourceH":40},
"6":{"x":43,"y":30,"w":19,"h":27,"offX":4,"offY":13,"sourceW":23,"sourceH":40},
"7":{"x":1,"y":87,"w":18,"h":26,"offX":4,"offY":14,"sourceW":22,"sourceH":40},
"8":{"x":1,"y":58,"w":19,"h":27,"offX":4,"offY":13,"sourceW":23,"sourceH":40},
"9":{"x":22,"y":30,"w":19,"h":27,"offX":4,"offY":13,"sourceW":23,"sourceH":40}}}
Egretプロジェクトにインポートする
fntおよびpngファイルをEgret Wingのリソースフォルダにいれる
コード
main.ts
const test: egret.BitmapText = new egret.BitmapText();
test.font = RES.getRes("hello_fnt");
test.text = "0123";
this.addChild(test);