← Kembali ke blog

VberAI Bitmap Font: muat naik glif / sprite sheet auto-split → BMFont

VberAI Studio: muat naik glif atau sprite sheet dengan auto-split, eksport AngelCode BMFont (.fnt + PNG), edit pada canvas, Unity / Godot / Cocos.

Diterbitkan
  • vberai
  • ai-studio
  • bitmap-font
  • bmfont
  • fnt
  • angelcode
  • sprite-sheet
  • glyph
  • game-ui
  • unity
  • godot
  • cocos
  • tutorial
VberAI Bitmap Font: muat naik glif / sprite sheet auto-split → BMFont

VberAI Studio (singkatan: AI Studio, ≠ Google AI Studio) merangkumi penjana fon bitmap: bina atlas fon permainan dengan metrik untuk aksara yang benar-benar digunakan oleh projek anda. Hasilnya kekal pada kanvas permainan yang sama untuk pikselasi, matting, atau eksport. Format pertukaran merentas enjin ialah AngelCode BMFont .fnt + PNG (pilihan eksport mengikut panel).

Mula di sini: AI Studio. Glosari: fon bitmap.

Mengapa permainan masih perlukan fon bitmap

TTF / OTF dinamik sesuai untuk teks panjang dan saiz sewenang-wenangnya. HUD, skor, pengira syiling, tajuk piksel, dan digit bergaris biasanya perlukan sesuatu yang lain: saiz terkunci, gaya terbakar dalam tekstur, tiada kabur apabila diskalakan, dan beban enjin yang boleh dijangka.

Tiga jalan pintas yang biasa:

  1. Paksa fon dinamik — garis luar pecah apabila dibesarkan; jenis piksel menjadi kabur apabila dikecilkan; penapisan bilinear melembutkan tepi sel.
  2. PNG per-glis yang dilukis tangan tanpa metrik — enjin tidak tahu lebar, tinggi, garis dasar, atau advance, jadi anda menyusun sprite longgar.
  3. BMFont desktop atau dalam talian, kemudian muat turun — anda keluar dengan atlas dan .fnt, kemudian buka alat lain untuk bersihkan tepi, pikselasi, dan import ke Unity / Godot / Cocos.

AI Studio mengekalkan penjanaan pada meja kerja permainan yang boleh diedit: fon ialah aset, bukan zip yang menamatkan kerja.

Alat BMFont berdiri sendiriPenjana fon bitmap VberAI
KemasukanAplikasi desktop atau laman lainKanvas AI Studio yang sama
OutputBiasanya muat turun .fnt + atlasAtlas mendarat di kanvas untuk suntingan lanjut
RupaTTF sumber campur kesan alatDigit bergaya / jenis piksel mengikut panel
Selepas ituKebanyakannya “import ke enjin”Siapkan di kanvas, kemudian hantar ke enjin

Apa itu fon bitmap / BMFont

Definisi yang boleh dihantar:

  1. Atlas — rasterkan glis yang anda perlukan ke dalam satu (atau beberapa) helaian PNG.
  2. Fail metrik — biasanya AngelCode BMFont .fnt: UV, lebar/tinggi, xoffset / yoffset, xadvance bagi setiap aksara.
  3. Masa jalan — enjin menyampel atlas untuk menyusun Label, bukannya mentesselasi garis luar vektor secara langsung.

Ia meliputi teks permainan bersaiz tetap dan bergaya tetap. Ia bukan fon badan SDF TextMesh Pro, dan ia bukan fon dinamik CJK penuh.

Fon bitmap (BMFont)TTF dinamikSDF / MSDF
RupaGaya terbakar dalam tekstur; piksel boleh dikunciVektor diraster pada setiap saizSkala agak bersih
Terbaik untukHUD, skor, tajuk piksel, digit bergayaTeks panjang, sembang, tetapanBadan UI yang perlu diskalakan
KosSaiz / set aksara baharu bermakna atlas baharuGaris luar dan rupa piksel sukar dikawalKunci grid piksel lebih lemah daripada bitmap sebenar

Bila menggunakannya — dan bila tidak

Guna untuk: nombor kesihatan, skor peringkat, pengira syiling / permata, cooldown kemahiran, tajuk piksel, jalur nombor bergaris atau berlogam. Set aksara kecil, saiz tetap.

Langkau untuk: dialog, mel, sembang, teks tetapan; UI badan yang perlu diskalakan bebas; perbendaharaan Han / kana / Hangul penuh. Set CJK lengkap meletuskan saiz atlas — kekalkan fon dinamik atau SDF untuk itu.

Cara menjananya dalam AI Studio

Label butang mengikut panel semasa. Laluannya empat langkah.

1. Buka penjana fon bitmap

Pada kanvas AI Studio, buka penjana fon bitmap.

Bitmap font generator panel

2. Pick an input path, then lock charset and size

Choose panel generate, upload glyph images, or upload a sprite sheet and auto-split (per the panel). Either way, list the characters that will actually appear in-game.

HUD sets often need only 0123456789, +$%/.,, and a few Latin letters. Missing glyphs become blanks or tofu at runtime; extra glyphs bloat the atlas.

Set size to the final HUD pixel size — do not design large and scale down. Scaling a bitmap font scales the texture. After a sprite-sheet split, check cell padding and advance so digits do not collide.

3. Jana dan pratonton atlas

Periksa garis dasar, sama ada garis luar memakan jiran, glow kotor pada tepi separa lutsinar, dan ruang kosong yang terbuang. Untuk rupa piksel, rantaikan pikselasi imej pada kanvas yang sama; untuk alfa bersih, rantaikan matting.

4. Eksport, kemudian ke enjin

Pilihan eksport mengikut panel. Untuk Unity / Godot / Cocos Creator, pastikan anda ada:

  • Satu (atau satu set) helaian atlas PNG
  • Fail .fnt (teks atau binari AngelCode BMFont; dokumen enjin berpandukan .fnt)

Nama fail, indeks halaman, dan rujukan tekstur di dalam .fnt mesti sepadan — jika tidak enjin mungkin menerima fon tetapi masih menunjukkan glis magenta atau kosong.

Import ke Unity / Godot / Cocos

Ini ialah senarai semak penerimaan, bukan lawatan editor penuh. Selepas import, paparkan 0123456789SCORE dan periksa penjajaran, tracking, dan tepi alfa.

BMFont score display in engine

Unity

  • Tetapkan Filter Mode atlas kepada Point untuk mengunci tepi piksel; penapisan bilinear mengaburkannya.
  • UGUI legasi: Custom Font + bahan yang menggunakan atlas, kemudian tetapkan kepada Text.
  • TextMesh Pro: bina aset fon bitmap dalam Font Asset Creator, atau import pasangan BMFont (ikut versi TMP anda).
  • Kerja semula biasa: slot bahan kosong, atau nama tekstur .fnt ≠ nama tekstur yang diimport.

Godot 4

Godot menyokong BMFont (.fnt). Simpan .fnt dan PNG dalam folder yang sama, import, dan tetapkan kepada slot fon Label (atau RichTextLabel). PNG sahaja tiada segi empat glis.

Cocos Creator

Fon bitmap Cocos ialah .fnt + .png: .fnt mengindeks setiap thumbnail aksara. Letakkan kedua-duanya dalam folder aset dan tetapkan jenis fon Label kepada fon bitmap (nama menu mengikut panel 3.x). Jangan kelirukan ini dengan LabelAtlas (jalur nombor sel tetap) — LabelAtlas tidak membawa metrik BMFont penuh.

Senarai semak kerja semula

  • Glis hilang — lanjutkan set aksara dan jana semula; jangan campurkan TTF kedua di dalam enjin.
  • Garis dasar tidak sekata — 1 berbanding 0, koma, dan titik perpuluhan menunjukkannya dahulu.
  • Tracking terlalu rapat / longgar — edit xadvance dalam .fnt atau laraskan semula jarak dalam penjana.
  • Garis luar kotor — glow bertindih dengan jiran; tinggalkan padding 1–2 px dalam atlas.
  • Kabur apabila diskalakan — jangan layan bitmap sebagai vektor; guna SDF / MSDF atau fon dinamik jika perlu diskalakan.
  • Atlas terlalu besar — potong set aksara, atau pisahkan set “digit” daripada set “tajuk”.

Sempadan

  • Atlas pertama jarang menjadi final yang boleh dihantar; glis tanda dagangan, lokasi yang hilang, dan resolusi tambahan masih perlukan pemeriksaan manusia.
  • Mampatan, pembungkusan, bahan fon, dan mod penapis terletak dalam projek enjin.
  • Teks panel, input (fon sumber / rujukan gaya), dan format eksport mengikut AI Studio semasa.
  • VberAI Studio ≠ Google AI Studio; lihat perbandingan.

Kesimpulan

Anda tidak perlukan “satu lagi BMFont dalam talian”. Anda perlukan digit bergaya dan jenis piksel yang dihantar sebagai aset permainan dengan metrik. Jana → pratonton atlas → bersihkan tepi atau pikselasi di kanvas → .fnt + PNG ke Unity / Godot / Cocos — semuanya dalam AI Studio.

Soalan Lazim

Apa itu fon bitmap / BMFont?
Fon bitmap melukis glis ke dalam atlas PNG dan menggunakan fail metrik supaya enjin tahu cara memotong setiap aksara. AngelCode BMFont (.fnt + PNG) ialah pasangan pertukaran yang difahami oleh Unity, Godot, dan Cocos.

Bolehkah VberAI menjana bitmap font permainan?
Ya. Guna penjana pada canvas AI Studio — charset, glif atau sprite sheet — dan terus edit atau eksport pada canvas yang sama (mengikut panel).

Bolehkah muat naik glif atau sprite sheet?
Ya. Muat naik imej glif (PNG per aksara dll.) ke font. Atau sprite sheet + auto-split (jalur digit, grid) untuk .fnt BMFont + atlas (mengikut panel).

Bitmap berbanding TTF dinamik berbanding SDF?
HUD bersaiz tetap, tajuk piksel, dan digit bergaya → bitmap. Teks panjang dan UI yang perlu diskalakan → TTF dinamik atau SDF / MSDF.

Apa yang penting semasa import Unity?
Penapisan Point pada atlas; Custom Font atau TMP bitmap kedua-duanya boleh menggunakan pasangan BMFont, tetapi nama tekstur mesti sepadan dengan .fnt dan slot bahan tidak boleh kosong.

Bolehkah saya bakar atlas Cina penuh?
Tidak secara praktikal. Set CJK lengkap meletuskan atlas. Biarkan fon bitmap untuk digit, huruf Latin, dan beberapa glis tajuk; kekalkan teks badan pada fon dinamik.

Panduan lain yang mungkin anda suka