VberAI Bitmap Font: upload glyph / sprite sheet auto-split → BMFont

VberAI Studio (viết tắt: AI Studio, ≠ Google AI Studio) bao gồm một trình tạo bitmap font: dựng atlas font cho game kèm metrics cho đúng những ký tự mà dự án của bạn thực sự dùng. Kết quả vẫn nằm trên cùng canvas game để pixel hóa, tách nền hoặc xuất. Định dạng trao đổi giữa các engine là AngelCode BMFont .fnt + PNG (tùy chọn xuất theo panel).

Bắt đầu tại đây: AI Studio. Bảng thuật ngữ: bitmap font.

Vì sao game vẫn cần bitmap font

TTF / OTF động là lựa chọn đúng cho đoạn văn dài và kích thước tùy ý. HUD, điểm số, bộ đếm xu, tiêu đề pixel và chữ số viền thường cần thứ khác: kích thước cố định, phong cách nướng sẵn vào texture, không mờ khi phóng to, và tải trong engine có thể đoán trước.

Ba lối rẽ thường gặp:

1. Ép dùng font động — viền vỡ khi phóng to; chữ pixel bị nhòe khi thu nhỏ; lọc bilinear làm mềm cạnh ô.
2. Vẽ tay từng glyph PNG không có metrics — engine không biết chiều rộng, chiều cao, baseline hay advance, nên bạn đang ghép các sprite rời.
3. BMFont trên desktop hoặc online rồi tải về — bạn rời đi với một atlas và một .fnt, rồi mở công cụ khác để làm sạch cạnh, pixel hóa và nhập vào Unity / Godot / Cocos.

AI Studio giữ việc tạo font trên một workbench game có thể chỉnh sửa: font là một asset, không phải file zip kết thúc công việc.

	Công cụ BMFont độc lập	Trình tạo bitmap font VberAI
Lối vào	Một app desktop hoặc site khác	Cùng canvas AI Studio
Đầu ra	Thường là tải .fnt + atlas	Atlas nằm trên canvas để chỉnh tiếp
Diện mạo	TTF nguồn cộng hiệu ứng của công cụ	Số cách điệu / chữ pixel theo panel
Sau đó	Chủ yếu là “nhập vào engine”	Hoàn thiện trên canvas, rồi đưa vào engine

Three ways to feed the generator

Panel labels follow the product. Common paths:

Path	When to use it
Generate from charset	No art yet—need HUD digits, pixel type, or stylized numbers
Upload glyph images	Artists already drew per-glyph PNGs; you need .fnt width, height, advance
Upload sprite sheet + auto-split	A full 0123456789 strip, glyph grid, or digit sprite sheet to slice and metric

Sprite-sheet splitting is similar to in-place slice / layer split, but the output is a BMFont atlas + .fnt, not a UI Prefab.

Bitmap font / BMFont là gì

Một định nghĩa có thể ship:

1. Atlas — raster hóa các glyph bạn cần vào một (hoặc vài) sheet PNG.
2. File metrics — thường là AngelCode BMFont .fnt: UV, width/height, xoffset / yoffset, xadvance cho từng ký tự.
3. Runtime — engine lấy mẫu atlas để ghép thành một Label, thay vì tessellate outline vector ngay lúc chạy.

Nó phù hợp cho chữ game cố định kích thước, cố định phong cách. Nó không phải font body TextMesh Pro SDF, và cũng không phải font động CJK đầy đủ.

	Bitmap font (BMFont)	TTF động	SDF / MSDF
Diện mạo	Phong cách nướng vào texture; pixel có thể khóa	Vector raster ở từng kích thước	Co giãn tương đối sạch
Tốt nhất cho	HUD, điểm số, tiêu đề pixel, số cách điệu	Văn bản dài, chat, cài đặt	UI body cần co giãn
Chi phí	Kích thước / charset mới là atlas mới	Outline và diện mạo pixel khó kiểm soát	Khóa lưới pixel yếu hơn bitmap thật

Khi nào dùng — và khi nào không

Dùng cho: số máu, điểm màn chơi, bộ đếm xu / ngọc, hồi chiêu kỹ năng, tiêu đề pixel, dải số viền hoặc kim loại. Charset nhỏ, kích thước cố định.

Bỏ qua khi: hội thoại, thư, chat, chữ cài đặt; UI body cần co giãn tự do; toàn bộ vốn từ Hán / kana / Hangul. Một bộ CJK đầy đủ làm atlas phình to — hãy giữ font động hoặc SDF cho việc đó.

Cách tạo trong AI Studio

Nhãn nút theo panel hiện tại. Quy trình gồm bốn bước.

1. Mở trình tạo bitmap font

Trên canvas AI Studio, mở trình tạo bitmap font.

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. Tạo và xem trước atlas

Kiểm tra baseline, xem outline có ăn vào ô bên cạnh không, glow bẩn trên cạnh bán trong suốt, và khoảng trống lãng phí. Với diện mạo pixel, nối tiếp image pixelate trên cùng canvas; để alpha sạch, nối tiếp matting.

4. Xuất, rồi đưa vào engine

Tùy chọn xuất theo panel. Với Unity / Godot / Cocos Creator, xác nhận bạn có:

• Một (hoặc một bộ) sheet PNG atlas
• Một file .fnt (AngelCode BMFont dạng text hoặc binary; tài liệu engine dựa vào .fnt)

Tên file, chỉ số page và tham chiếu texture bên trong .fnt phải khớp — nếu không engine có thể nhận font mà vẫn hiện glyph màu magenta hoặc trống.

Nhập vào Unity / Godot / Cocos

Đây là checklist nghiệm thu, không phải hướng dẫn đầy đủ về editor. Sau khi nhập, render 0123456789SCORE và kiểm tra căn chỉnh, tracking và cạnh alpha.

Unity

• Đặt Filter Mode của atlas thành Point để khóa cạnh pixel; lọc bilinear làm chúng mờ.
• UGUI cũ: Custom Font + material dùng atlas, rồi gán vào Text.
• TextMesh Pro: tạo font asset dạng bitmap trong Font Asset Creator, hoặc nhập cặp BMFont (theo phiên bản TMP của bạn).
• Lỗi thường gặp: ô material trống, hoặc tên texture trong .fnt ≠ tên texture đã nhập.

Godot 4

Godot hỗ trợ BMFont (.fnt). Giữ .fnt và PNG trong cùng thư mục, nhập, rồi gán vào ô font của Label (hoặc RichTextLabel). Chỉ một PNG thì không có hình chữ nhật glyph.

Cocos Creator

Bitmap font trong Cocos là .fnt + .png: .fnt đánh chỉ mục từng thumbnail ký tự. Đặt cả hai vào thư mục asset và đặt kiểu font của Label thành bitmap font (tên menu theo panel 3.x). Đừng nhầm với LabelAtlas (dải số ô cố định) — LabelAtlas không mang metrics BMFont đầy đủ.

Checklist chỉnh sửa

• Glyph thiếu — mở rộng charset và tạo lại; đừng trộn thêm TTF thứ hai trong engine.
• Baseline không đều — 1 so với 0, dấu phẩy và dấu chấm thập phân sẽ lộ ra đầu tiên.
• Tracking quá chặt / quá lỏng — sửa xadvance trong .fnt hoặc chỉnh lại khoảng cách trong trình tạo.
• Outline bẩn — glow chồng lên ô bên cạnh; chừa 1–2 px padding trong atlas.
• Mờ khi co giãn — đừng coi bitmap như vector; dùng SDF / MSDF hoặc font động nếu buộc phải co giãn.
• Atlas quá lớn — cắt charset, hoặc tách bộ “chữ số” khỏi bộ “tiêu đề”.

Ranh giới

• Atlas đầu tiên hiếm khi là bản cuối có thể ship; glyph thương hiệu, locale thiếu và độ phân giải bổ sung vẫn cần người kiểm tra.
• Nén, đóng gói, material font và filter mode thuộc về dự án engine.
• Nội dung panel, đầu vào (font nguồn / tham chiếu phong cách) và định dạng xuất theo AI Studio hiện tại.
• VberAI Studio ≠ Google AI Studio; xem so sánh.

Tổng kết

Bạn không cần “thêm một BMFont online nữa”. Bạn cần số cách điệu và chữ pixel ship dưới dạng asset game kèm metrics. Tạo → xem trước atlas → làm sạch cạnh hoặc pixel hóa trên canvas → .fnt + PNG vào Unity / Godot / Cocos — tất cả trong AI Studio.

FAQ

Bitmap font / BMFont là gì?
Bitmap font vẽ glyph vào atlas PNG và dùng file metrics để engine biết cách cắt từng ký tự. AngelCode BMFont (.fnt + PNG) là cặp trao đổi mà Unity, Godot và Cocos đều hiểu.

VberAI có tạo bitmap font cho game không?
Có. Dùng trình tạo trên canvas AI Studio — charset, glyph hoặc sprite sheet — và tiếp tục sửa hoặc export trên cùng canvas (theo panel).

Có thể tải glyph hoặc sprite sheet không?
Có. Tải ảnh glyph (PNG từng ký tự v.v.) vào font. Hoặc sprite sheet + auto-split (dải số, lưới) để xuất .fnt BMFont + atlas (theo panel).

Bitmap so với TTF động so với SDF?
HUD cố định kích thước, tiêu đề pixel và số cách điệu → bitmap. Văn bản dài và UI cần co giãn → TTF động hoặc SDF / MSDF.

Điều gì quan trọng khi nhập vào Unity?
Lọc Point trên atlas; Custom Font hoặc TMP bitmap đều dùng được cặp BMFont, nhưng tên texture phải khớp .fnt và ô material không được trống.

Có thể nướng atlas tiếng Trung đầy đủ không?
Không thực tế. Một bộ CJK đầy đủ làm atlas phình to. Hãy để bitmap font cho chữ số, chữ Latin và vài glyph tiêu đề; giữ văn bản body trên font động.