VberAI ビットマップフォント：字形アップロード / スプライト自動分割で BMFont へ

VberAI Studio（略称 AI Studio、≠ Google AI Studio）にはビットマップフォント生成があります。パネルで文字集合から生成するほか、字形画像のアップロード、スプライトシートのアップロードと自動分割にも対応します。メトリクス付きのゲーム用フォントアトラスを出力し、同じゲームキャンバス上でピクセル化・切り抜き・書き出しを続けられます。エンジン間の共通形式は AngelCode BMFont の .fnt + PNG です（書き出し項目はパネルに従います）。

入口：AI Studio。用語：ビットマップフォント。

いわゆる ゲーム用ビットマップフォント / BMFont の流れです。固定の文字集合とスタイルを、.fnt メトリクス付きで Unity / Godot / Cocos へ渡します。

ゲームでビットマップフォントがまだ必要な理由

動的な TTF / OTF は長文と任意サイズに向きます。HUD、スコア、コイン数、ピクセル見出し、縁取り数字が欲しいものは別です。サイズを固定し、見た目をテクスチャに焼き込み、拡大縮小で滲ませず、エンジン側の読み込みを予測可能にすることです。

よくある遠回りは次の三つです。

1. 動的フォントで無理に通す — 拡大すると縁が壊れ、縮小するとピクセル文字が濁り、線形フィルタでマス目の端がぼけます。
2. 文字ごとの手描き PNG だけで、メトリクスがない — 幅・高さ・ベースライン・送りがエンジンに伝わらず、ばらばらのスプライトを並べることになります。
3. デスクトップやオンラインの BMFont で書き出してダウンロード — アトラスと .fnt は手元に来ますが、縁の掃除・ピクセル化・Unity / Godot / Cocos への取り込みは別ツールになります。

AI Studio は生成を編集できるゲーム作業台に置きます。フォントはアセットであり、ダウンロードして終わりの zip ではありません。

	単体 BMFont ツール	VberAI ビットマップフォント生成
入口	別のデスクトップアプリやサイト	同じ AI Studio キャンバス
入力	TTF / システムフォントから rasterize することが多い	パネル生成、字形画像アップロード、スプライトシート自動分割
出力	多くは .fnt + アトラスをダウンロード	アトラスがキャンバスに残り、編集を続けられる
見た目	元の TTF とツールの効果	パネル生成、またはアップロードした字形 / スプライトを再利用
その後	ほぼ「エンジンへインポート」だけ	キャンバスで仕上げてからエンジンへ

3 つの入力経路

ボタン名はパネルに従います。よくある経路は次のとおりです。

経路	向いている場面
文字集合からパネル生成	素材がまだなく、HUD 数字・ピクセル文字・装飾数字を出したい
字形画像をアップロード	1 文字ずつ PNG があるが、.fnt の幅・高さ・advance がない
スプライトシートをアップロードして自動分割	0123456789 の横条、字形グリッド、数字 sprite sheet を切ってメトリクス化

スプライトシートの分割は インプレース切り取り / レイヤー分割 に近い考え方ですが、出力は UI Prefab ではなく BMFont アトラス + .fnt です。

ビットマップフォント / BMFont とは

出荷できる定義は次のとおりです。

1. アトラス — 必要な字形を 1 枚（または少数）の PNG にラスタライズします。
2. メトリクスファイル — 通例は AngelCode BMFont の .fnt。文字ごとの UV、幅と高さ、xoffset / yoffset、xadvance です。
3. 実行時 — エンジンはアトラスをサンプリングして Label を組み立てます。その場でベクトル輪郭を分解しません。

対象はサイズも見た目も固定したゲーム文字です。TextMesh Pro の SDF 本文フォントではなく、中日韓をすべて収めた動的フォントでもありません。

	ビットマップフォント（BMFont）	動的 TTF	SDF / MSDF
見た目	スタイルがテクスチャに焼き込まれ、ピクセルを固定できる	サイズごとにベクトルをラスタライズ	拡大縮小は比較的きれい
向く用途	HUD、スコア、ピクセル見出し、装飾数字	長文、チャット、設定画面	拡大縮小が必要な UI 本文
コスト	サイズや文字集合が変わるとアトラスを作り直す	縁取りやピクセル風が制御しにくい	ピクセル格子の固定は本物のビットマップより弱い

使うとき、使わないとき

使う： 体力数字、ステージスコア、コイン / ジェムのカウンタ、スキルのクールダウン、ピクセル風タイトル、縁取りや金属感のある数字帯。文字集合は小さく、サイズは固定です。

使わない： セリフ、メール、チャット、設定の説明文。自由に拡大縮小する UI 本文。漢字・かな・ハングルをフル収録した語彙。CJK を全部入れるとアトラスが膨張するので、そこは動的フォントか SDF のままにします。

AI Studio での作り方

ボタン名は現在のパネルに従います。流れは次の 4 ステップです。

1. ビットマップフォント生成を開く

AI Studio のキャンバスでビットマップフォント生成を開きます。

2. 入力経路を選び、文字集合とサイズを決める

パネル生成、字形画像のアップロード、スプライトシートの自動分割から選びます（パネルに従う）。どの経路でも、ゲーム内に実際に出る文字を先に書き出します。

HUD 向けは 0123456789、+$%/.,、ラテン数文字で足りることが多いです。欠けた字形は実行時に空白や tofu になり、余分な字形はアトラスを膨らませます。

サイズは HUD の最終ピクセルサイズに合わせます—大きく描いて縮小しないでください。ビットマップフォントのスケールはテクスチャのスケールです。スプライトシート分割後はセル余白と advance を確認し、数字が重ならないようにします。

3. 生成してアトラスを確認する

ベースラインが揃っているか、縁が隣の字に食い込んでいないか、半透明の発光に汚れがないか、空きが無駄すぎないかを見ます。ピクセル風が必要なら同じキャンバスで 画像ピクセル化 を続け、透明が必要なら 切り抜き を続けます。

4. 書き出してエンジンへ

書き出し項目はパネルに従います。Unity / Godot / Cocos Creator 向けには、次が揃っているかを先に確認します。

• PNG アトラス（1 枚、またはセット）
• .fnt（AngelCode BMFont のテキストまたはバイナリ。エンジン資料は .fnt を前提にします）

ファイル名、ページ番号、.fnt 内のテクスチャ参照は一致させてください。一致しないと、フォントとしては通ってもマゼンタや空白になります。

Unity / Godot / Cocos への取り込み

編集器の全手順ではなく、受け入れチェックです。取り込み後は 0123456789SCORE を出して、行揃え・字間・透明端を見ます。

Unity

• アトラスの Filter Mode は Point にしてピクセル端を固定します。線形フィルタはぼけます。
• 旧 UGUI：Custom Font と、そのアトラスを使ったマテリアルを Text に割り当てます。
• TextMesh Pro：Font Asset Creator で bitmap フォントアセットを作るか、BMFont の組を取り込みます（TMP の版に従います）。
• よくあるやり直し：マテリアル枠が空、.fnt のテクスチャ名と取り込み名が違う。

Godot 4

Godot は BMFont（.fnt）に対応しています。.fnt と PNG を同じフォルダに置いて取り込み、Label（または RichTextLabel）のフォント枠へ割り当てます。PNG だけでは字形の矩形が分かりません。

Cocos Creator

Cocos のビットマップフォントは .fnt + .png です。.fnt が各文字サムネイルの索引です。両方をアセットフォルダに入れ、Label のフォント種類をビットマップフォントにします（メニュー名は 3.x パネルに従います）。等幅マスの数字帯である LabelAtlas と混ぜないでください。LabelAtlas には完全な BMFont メトリクスがありません。

やり直しチェック

• 欠け字 — 文字集合を足して再生成します。エンジン内でもう 1 つの TTF を混ぜないでください。
• ベースラインが揃わない — 数字の 1 と 0、カンマと小数点が先にばれます。
• 字間が詰まりすぎ / 空きすぎ — .fnt の xadvance を直すか、生成側で間隔をやり直します。
• 縁の汚れ — 発光が隣の字に重なります。アトラス内に 1〜2 px の余白を残します。
• 拡大でぼけ — ビットマップをベクトル扱いしないでください。拡大が必要なら SDF / MSDF か動的フォントです。
• アトラスが大きすぎ — 文字集合を削るか、「数字セット」と「見出しセット」に分けます。

こんなチーム向け

HUD スコア・ピクセル見出し・装飾数字を出荷するインディー / 小規模チーム向けです。文字集合は小さくサイズは固定、.fnt + PNG をビルドに入れたいが、デスクトップ BMFont ツールとエンジンの間を行き来したくないときに向きます。

境界

• 最初のアトラスがそのまま出荷稿になることは稀です。商標字形、言語の欠け、複数解像度は人が見ます。
• 圧縮、パッキング、フォントマテリアル、フィルタモードはエンジン側の仕事です。
• パネル文言、入力（元フォント / スタイル参照）、書き出し形式は、いまの AI Studio に従います。
• VberAI Studio ≠ Google AI Studio。詳しくは 比較 を見てください。

まとめ

欲しいのは「もう一つのオンライン BMFont」ではありません。装飾数字とピクセル文字を、メトリクス付きのゲームアセットとして梱包できることです。生成 → アトラス確認 → キャンバスで縁を整えるかピクセル化 → .fnt + PNG を Unity / Godot / Cocos へ。すべて AI Studio にあります。

よくある質問

ビットマップフォントと BMFont とは何ですか？
ビットマップフォントは字形を PNG アトラスに描き、メトリクスファイルでエンジンに切り方を伝えます。AngelCode BMFont の .fnt + PNG は、Unity、Godot、Cocos が共通で理解する組です。

VberAI でゲーム用ビットマップフォントを作れますか？
作れます。AI Studio キャンバスのビットマップフォント生成で文字集合から生成するほか、字形画像やスプライトシートをアップロードでき、同じキャンバスで編集や書き出しを続けられます（製品パネルに従います）。

字形画像やスプライトシートをアップロードできますか？
できます。字形画像のアップロード（1 文字ずつ PNG など）でフォントに書き込めます。スプライトシートのアップロードと自動分割（数字帯、字形グリッド）で BMFont の .fnt + アトラスを出力します（パネルに従います）。

動的 TTF や SDF とはどう選びますか？
サイズ固定の HUD、ピクセル見出し、装飾数字はビットマップ。長文と拡大縮小する UI は動的 TTF か SDF / MSDF です。

Unity 取り込みで重要なことは？
アトラスは Point フィルタ。Custom Font でも TMP の bitmap でも BMFont の組を受け取れますが、テクスチャ名は .fnt と一致させ、マテリアル枠を空にしないでください。

漢字を全部アトラスに入れられますか？
実用的ではありません。CJK 一式はアトラスを膨らませます。ビットマップは数字、ラテン文字、見出し用の少数に残し、本文は動的フォントのままにしてください。