LoginSignup
0

More than 5 years have passed since last update.

初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル(2) BitmapFont

Posted at

こちらの記事の続き
初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル(1)

Texture MergerでBitmap Fontの作成

TextureMerger起動後に表示されるメニューでBitmap Fontを選択する
image.png

ステップ1:インストールされたシステムフォントを使用してビットマップフォントを作成するのに適したシステムフォント。

メニューの「More Characters」を選択する
image.png

エディターで、フォント化した文字と、レンダリングするためのシステムフォント・サイズ・色・装飾を調整してCinfirmする
image.png

このようにスプライト化される
image.png

ステップ2:ビットマップフォントを作成する断片的なイメージの一部に合わせて文字を追加します。

0 1 2フォントイメージを選択し、追加の拡張名を削除することを忘れないでください。左の名前と右の画像が対応しているので、名前「0」は画像0を表す。拡張子を追加する場合は、テキストにlabel.text = "0_png"を表示する必要があります。

方法3:ビットマップフォントを作成するためにアートによって提供されるグラフィックフォント全体に適したフォントテクスチャセット。

この文字セットに生まれ、よりパーソナライズされたフォントを容易にすることである、芸術はきれいによく描かれた文字を配置することができるが、画像につながる、あなたはインポートツールを使用することができ、ツールが自動的に各文字の領域を特定します、我々あなたがする必要があるのは、下のテキストボックスに対応するテキストを入力することだけです。文字を順番に入力したら、[OK]をクリックします。

エクスポート

画面上のメニューの「Export」を選択
image.png

エクスポート設定画面が表示される
ひとまずスケールは100%のまま「Export」ボタンを押す
image.png

フォント名を入力
今回はtestと入力
image.png

test.fntファイルとtest.pngファイルがエクスポートされる
image.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);

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0