2023/11/03(金) [n年前の日記]
#1 [cg_tools] ビットマップフォント画像を作れるツールについてメモ
ttfフォントを元にして、ビットマップフォント画像を作れるツールについてメモ。
昨日はBDFフォント関係のツールを探していたけど、本来は以下のようなツールを使ってビットマップフォント画像を作るのが妥当なのだろうなと…。
環境はWindows10 x64 22H2。
どれもグリッド状に各文字を配置してくれるわけではない点に注意。テクスチャ画像の中に各文字をギチギチに詰めて、どこにどの文字があるかは別途テキストファイルやxmlファイルで出力してくれる。らしい。まだそこまで試してないけど…。
こういった、文字をギチギチに詰めて、別途テキストファイルで位置情報を示すフォーマットを、bmfontと呼んでいるらしい。
github上で、bmfont、または bitmap-font-generator というタグで探すと色々見つかる模様。github はタグをつける機能があったのか。知らなかった…。
_bmfont - GitHub Topics
_bitmap-font-generator - GitHub Topics
昨日はBDFフォント関係のツールを探していたけど、本来は以下のようなツールを使ってビットマップフォント画像を作るのが妥当なのだろうなと…。
環境はWindows10 x64 22H2。
どれもグリッド状に各文字を配置してくれるわけではない点に注意。テクスチャ画像の中に各文字をギチギチに詰めて、どこにどの文字があるかは別途テキストファイルやxmlファイルで出力してくれる。らしい。まだそこまで試してないけど…。
こういった、文字をギチギチに詰めて、別途テキストファイルで位置情報を示すフォーマットを、bmfontと呼んでいるらしい。
github上で、bmfont、または bitmap-font-generator というタグで探すと色々見つかる模様。github はタグをつける機能があったのか。知らなかった…。
_bmfont - GitHub Topics
_bitmap-font-generator - GitHub Topics
◎ Hiero :
_Hiero - libGDX
Java製アプリ。runnable-hiero.jar を入手してダブルクリックすれば実行できる。動作には Javaランタイムのインストールが必要。
右側に効果一覧が表示されてるので、それぞれ選んで「Add」をクリックしていくと、文字色以外にも、縁取り(Outline)、影付き(Shadow)の見た目にできる。ただ、下のほうの padding値を増やさないと、影が途中で切れてしまったりした。また、各効果の順番を意識しないと、思ったような見た目にはならないようにも見えた。効果の順番は、「Up」ボタンをクリックすれば変更できる。
Java製アプリ。runnable-hiero.jar を入手してダブルクリックすれば実行できる。動作には Javaランタイムのインストールが必要。
右側に効果一覧が表示されてるので、それぞれ選んで「Add」をクリックしていくと、文字色以外にも、縁取り(Outline)、影付き(Shadow)の見た目にできる。ただ、下のほうの padding値を増やさないと、影が途中で切れてしまったりした。また、各効果の順番を意識しないと、思ったような見た目にはならないようにも見えた。効果の順番は、「Up」ボタンをクリックすれば変更できる。
◎ BMFontX :
_anyicomplex/bmfontx: Cross-platform bitmap font packing tool. Based on Hiero (https://github.com/libgdx/libgdx/wiki/Hiero)'s open source.
Java製アプリ。Hiero の fork版らしい。bmfontx-0.0.3.jar を入手してダブルクリックすれば実行できる。
ただ、自分の環境で動かしたら、動作が異様に重くて…。何故か途中で応答なしになってしまった…。しかも、githubのプロジェクトページはReadonlyになってるし。放棄されたプロジェクトっぽい…。何を変更したのかも分らないし、Hiero を使ったほうがいいかもしれない。
Java製アプリ。Hiero の fork版らしい。bmfontx-0.0.3.jar を入手してダブルクリックすれば実行できる。
ただ、自分の環境で動かしたら、動作が異様に重くて…。何故か途中で応答なしになってしまった…。しかも、githubのプロジェクトページはReadonlyになってるし。放棄されたプロジェクトっぽい…。何を変更したのかも分らないし、Hiero を使ったほうがいいかもしれない。
◎ BMFont (Bitmap Font Generator) :
_BMFont - AngelCode.com
bmfont1.14a.zip と bmfont64_1.14b_beta.zip を入手。解凍すると、bmfont32.exe や bmfont64.exe があるので、ダブルクリックすれば実行できる。
縁取りはできるけど、それ以外はできないっぽい？
使い方は以下が参考になりそう。
_BMFont(Bitmap Font Generator) で NGUI 向けのビットマップフォントを作る方法 - 強火で進め
_BMFont(Bitmap Font Generator) での高さ設定(Size [px])の注意点 - 強火で進め
bmfont1.14a.zip と bmfont64_1.14b_beta.zip を入手。解凍すると、bmfont32.exe や bmfont64.exe があるので、ダブルクリックすれば実行できる。
縁取りはできるけど、それ以外はできないっぽい？
使い方は以下が参考になりそう。
_BMFont(Bitmap Font Generator) で NGUI 向けのビットマップフォントを作る方法 - 強火で進め
_BMFont(Bitmap Font Generator) での高さ設定(Size [px])の注意点 - 強火で進め
◎ snowb-bmf (Bitmap Font Generator Online) :
_Bitmap Font Generator Online - SnowB Bitmap Font
_SilenceLeo/snowb-bmf: Bitmap Font Generator Online
Webブラウザ上で動作するアプリ。昔、Littera という、Adobe Flash で実装されたビットマップフォント画像生成サービスがあったのだけど、ソレを今現在のWebブラウザ技術で再現したものっぽい。
_SilenceLeo/snowb-bmf: Bitmap Font Generator Online
Webブラウザ上で動作するアプリ。昔、Littera という、Adobe Flash で実装されたビットマップフォント画像生成サービスがあったのだけど、ソレを今現在のWebブラウザ技術で再現したものっぽい。
◎ ShoeBox :
_ShoeBox
Adobe AIR製。
これはちょっと毛色が違うツールで、いきなりビットマップフォント画像を作れるわけではない。あらかじめ、画像編集ソフト(Adobe Photoshop、GIMP等)で、所定の並びのフォント画像を作っておいて、そのフォント画像をこのツールに渡してやることで、各文字を切り出して1つのテクスチャ画像にギチギチに詰めてくれる。自分が使い慣れた画像編集ソフトを使って、好きなようにフォントを化粧(?)してから、その後の文字の切り出しと配置だけを自動化してくれるあたり、なかなか現実的な処理内容のように思える。
しかし、Adobe AIR製というのが、今となっては…。いつまで使えるのやら…。
Adobe AIR製。
これはちょっと毛色が違うツールで、いきなりビットマップフォント画像を作れるわけではない。あらかじめ、画像編集ソフト(Adobe Photoshop、GIMP等)で、所定の並びのフォント画像を作っておいて、そのフォント画像をこのツールに渡してやることで、各文字を切り出して1つのテクスチャ画像にギチギチに詰めてくれる。自分が使い慣れた画像編集ソフトを使って、好きなようにフォントを化粧(?)してから、その後の文字の切り出しと配置だけを自動化してくれるあたり、なかなか現実的な処理内容のように思える。
しかし、Adobe AIR製というのが、今となっては…。いつまで使えるのやら…。
◎ font2bitmap (Font To Bitmap Converter) :
_Font To Bitmap Converter by stmn
_stmn/font2bitmap: This tool allows you to convert fonts (ttf, otf, woff) into bitmap fonts (png) just in your browser.
Webブラウザ上で動作するアプリ。これはビットマップフォントをグリッド上に並べて画像化してくれる模様。
任意のフォントを指定するには、ローカル側で持っているフォントファイルをアップロードする必要がある。
_stmn/font2bitmap: This tool allows you to convert fonts (ttf, otf, woff) into bitmap fonts (png) just in your browser.
Webブラウザ上で動作するアプリ。これはビットマップフォントをグリッド上に並べて画像化してくれる模様。
任意のフォントを指定するには、ローカル側で持っているフォントファイルをアップロードする必要がある。
[ ツッコむ ]
以上です。