← ब्लॉग पर वापस

VberAI Bitmap Font: glyph / sprite sheet upload → BMFont

VberAI Studio: glyph छवियाँ या sprite sheet auto-split, AngelCode BMFont (.fnt + PNG) export, canvas पर edit, Unity / Godot / Cocos.

प्रकाशित
  • vberai
  • ai-studio
  • bitmap-font
  • bmfont
  • fnt
  • angelcode
  • sprite-sheet
  • glyph
  • game-ui
  • unity
  • godot
  • cocos
  • tutorial
VberAI Bitmap Font: glyph / sprite sheet upload → BMFont

VberAI Studio (संक्षेप में: AI Studio, ≠ Google AI Studio) में एक bitmap font generator शामिल है: अपने प्रोजेक्ट में वास्तव में इस्तेमाल होने वाले अक्षरों के metrics के साथ game font atlas बनाएं। नतीजे उसी game canvas पर रहते हैं — pixelation, matting या export के लिए। इंजनों के बीच interchange format है AngelCode BMFont .fnt + PNG (export विकल्प panel के अनुसार)।

यहां से शुरू करें: AI Studio। शब्दावली: bitmap font।

गेम्स को अब भी bitmap fonts की ज़रूरत क्यों है

Dynamic TTF / OTF लंबे टेक्स्ट और मनमाने sizes के लिए सही है। HUD, स्कोर, coin counters, pixel titles और outlined अंकों को आमतौर पर कुछ और चाहिए: लॉक किया हुआ size, texture में baked style, scale पर कोई blur नहीं, और predictable engine load।

तीन आम गलत रास्ते:

  1. Dynamic font को ज़बरदस्ती इस्तेमाल करना — बड़ा करने पर outlines टूट जाते हैं; छोटा करने पर pixel type धुंधला हो जाता है; bilinear filtering cell edges को नरम कर देती है।
  2. बिना metrics के हाथ से बनाए per-glyph PNGs — इंजन को width, height, baseline या advance नहीं पता, तो आप ढीले sprites जोड़ रहे हैं।
  3. Desktop या online BMFont, फिर download — आप एक atlas और .fnt लेकर निकलते हैं, फिर edges साफ करने, pixelate करने और Unity / Godot / Cocos में import करने के लिए दूसरे tools खोलते हैं।

AI Studio generation को एक editable game workbench पर रखता है: font एक asset है, ऐसा zip नहीं जो काम खत्म कर दे।

Standalone BMFont toolVberAI bitmap font generator
Entryदूसरा desktop app या siteवही AI Studio canvas
InputMostly rasterize from TTF / system fontsPanel generate, upload glyphs, upload sprite sheet + auto-split
Outputआमतौर पर .fnt + atlas downloadAtlas canvas पर आता है आगे edit के लिए
LookSource TTF और tool के effectsPanel के अनुसार stylized अंक / pixel type
Afterwardज़्यादातर “इंजन में import करो”Canvas पर पूरा करें, फिर engine को भेजें

Three ways to feed the generator

Panel labels follow the product. Common paths:

PathWhen to use it
Generate from charsetNo art yet—need HUD digits, pixel type, or stylized numbers
Upload glyph imagesArtists already drew per-glyph PNGs; you need .fnt width, height, advance
Upload sprite sheet + auto-splitA 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 क्या है

एक shippable परिभाषा:

  1. Atlas — ज़रूरी glyphs को एक (या कुछ) PNG sheets में rasterize करें।
  2. Metrics file — आमतौर पर AngelCode BMFont .fnt: UV, width/height, xoffset / yoffset, प्रति अक्षर xadvance।
  3. Runtime — इंजन atlas से sample करके Label जोड़ता है, बजाय vector outlines को मौके पर tessellate करने के।

यह fixed-size, fixed-style game text को कवर करता है। यह TextMesh Pro SDF body font नहीं है, और पूरा CJK dynamic font भी नहीं है।

Bitmap font (BMFont)Dynamic TTFSDF / MSDF
LookStyle texture में baked; pixels लॉक हो सकते हैंहर size पर vector rasterizeअपेक्षाकृत साफ scale
Best forHUD, स्कोर, pixel titles, stylized अंकलंबा टेक्स्ट, chat, settingsUI body जिसे scale होना है
Costनया size / charset यानी नया atlasOutlines और pixel look नियंत्रित करना कठिनPixel-grid lock असली bitmap से कमज़ोर

कब इस्तेमाल करें — और कब नहीं

इसके लिए इस्तेमाल करें: health numbers, stage scores, coin / gem counters, skill cooldowns, pixel titles, outlined या metallic number strips। छोटा charset, fixed size।

इसके लिए छोड़ दें: dialogue, mail, chat, settings copy; UI body जिसे स्वतंत्र रूप से scale होना है; पूरा Han / kana / Hangul vocabulary। पूरा CJK set atlas size को बहुत बढ़ा देता है — उसके लिए dynamic fonts या SDF रखें।

AI Studio में इसे कैसे generate करें

Button labels मौजूदा panel के अनुसार हैं। रास्ता चार चरणों का है।

1. bitmap font generator खोलें

AI Studio canvas पर bitmap font generator खोलें।

Bitmap font generator panel

2. पहले charset और size लॉक करें

उन अक्षरों की सूची बनाएं जो असल में game में दिखेंगे, फिर generate करें। HUD sets को अक्सर सिर्फ 0123456789, +$%/., और कुछ Latin अक्षर चाहिए। गायब glyphs runtime पर blanks या tofu बन जाते हैं; अतिरिक्त glyphs atlas को भारी करते हैं।

Size को अंतिम HUD pixel size पर सेट करें — बड़ा design करके छोटा न करें। bitmap font को scale करने का मतलब texture को scale करना है।

3. Atlas generate करें और preview देखें

Baselines, क्या outlines पड़ोसियों में घुस रहे हैं, semi-transparent edges पर dirty glow, और बर्बाद खाली जगह — ये जांचें। Pixel look के लिए उसी canvas पर image pixelate चेन करें; साफ alpha के लिए matting चेन करें।

4. Export करें, फिर इंजन में

Export विकल्प panel के अनुसार हैं। Unity / Godot / Cocos Creator के लिए पुष्टि करें कि आपके पास है:

  • एक (या कई) PNG atlas sheets
  • एक .fnt फ़ाइल (AngelCode BMFont text या binary; engine docs .fnt पर आधारित हैं)

Filenames, page indices और .fnt के अंदर texture references मेल खाने चाहिए — वरना इंजन font स्वीकार करके भी magenta या खाली glyphs दिखा सकता है।

Unity / Godot / Cocos में import करें

ये acceptance checklists हैं, पूरे editor tours नहीं। Import के बाद 0123456789SCORE render करें और alignment, tracking और alpha edges जांचें।

BMFont score display in engine

Unity

  • Pixel edges लॉक करने के लिए atlas का Filter Mode Point रखें; bilinear filtering उन्हें blur कर देती है।
  • Legacy UGUI: Custom Font + atlas इस्तेमाल करने वाला material, फिर उसे Text पर assign करें।
  • TextMesh Pro: Font Asset Creator में bitmap font asset बनाएं, या BMFont pair import करें (अपने TMP version के अनुसार)।
  • आम rework: खाली material slot, या .fnt texture name ≠ imported texture name।

Godot 4

Godot BMFont (.fnt) को सपोर्ट करता है। .fnt और PNG को एक ही folder में रखें, import करें, और Label (या RichTextLabel) के font slot पर assign करें। अकेले PNG में glyph rectangles नहीं होते।

Cocos Creator

Cocos bitmap font .fnt + .png है: .fnt हर character thumbnail को index करता है। दोनों को asset folder में रखें और Label का font type bitmap font पर सेट करें (menu नाम 3.x panel के अनुसार)। इसे LabelAtlas (fixed-cell number strips) से न मिलाएं — LabelAtlas में पूरे BMFont metrics नहीं होते।

Rework checklist

  • गायब glyphs — charset बढ़ाएं और regenerate करें; इंजन के अंदर दूसरा TTF न मिलाएं।
  • असमान baseline — 1 बनाम 0, commas और decimal points इसे सबसे पहले दिखाते हैं।
  • Tracking बहुत tight / ढीला — .fnt में xadvance edit करें या generator में spacing दोबारा tune करें।
  • गंदे outlines — glow पड़ोसियों पर चढ़ रहा है; atlas में 1–2 px padding छोड़ें।
  • Scale पर blur — bitmap को vector न समझें; scale करना ही हो तो SDF / MSDF या dynamic font इस्तेमाल करें।
  • Atlas बहुत बड़ा — charset घटाएं, या “digits” set को “title” set से अलग करें।

सीमाएं

  • पहला atlas शायद ही कभी shippable final होता है; trademark glyphs, गायब locales और अतिरिक्त resolutions के लिए अब भी मानवीय जांच चाहिए।
  • Compression, packing, font materials और filter mode इंजन प्रोजेक्ट में तय होते हैं।
  • Panel copy, inputs (source font / style reference) और export format मौजूदा AI Studio के अनुसार हैं।
  • VberAI Studio ≠ Google AI Studio; तुलना देखें।

समापन

आपको “एक और online BMFont” की ज़रूरत नहीं है। आपको stylized अंक और pixel type चाहिए जो metrics के साथ game assets के रूप में ship हों। Generate करें → atlas preview देखें → canvas पर edges साफ करें या pixelate करें → .fnt + PNG Unity / Godot / Cocos में — सब कुछ AI Studio में।

FAQ

bitmap font / BMFont क्या है?
bitmap font glyphs को PNG atlas में paint करता है और metrics file इस्तेमाल करता है ताकि इंजन को पता हो कि हर अक्षर को कैसे काटना है। AngelCode BMFont (.fnt + PNG) वह interchange pair है जिसे Unity, Godot और Cocos सभी समझते हैं।

क्या VberAI गेम bitmap font बना सकता है?
हाँ। AI Studio कैनवास पर जनरेटर — charset, glyph या sprite sheet — उसी कैनवास पर एडिट/एक्सपोर्ट (पैनल अनुसार)।

क्या glyph या sprite sheet अपलोड कर सकता हूँ?
हाँ। Glyph छवियाँ अपलोड (प्रति-अक्षर PNG आदि)। या sprite sheet + auto-split (अंक स्ट्रिप, ग्रिड) से BMFont .fnt + atlas (पैनल अनुसार)।

Bitmap बनाम dynamic TTF बनाम SDF?
Fixed-size HUD, pixel titles और stylized अंक → bitmap। लंबा टेक्स्ट और UI जिसे scale होना है → dynamic TTF या SDF / MSDF।

Unity import पर क्या मायने रखता है?
Atlas पर Point filtering; Custom Font या TMP bitmap दोनों BMFont pair इस्तेमाल कर सकते हैं, लेकिन texture names .fnt से मेल खाने चाहिए और material slot खाली नहीं होना चाहिए।

क्या पूरा Chinese atlas bake कर सकते हैं?
व्यावहारिक रूप से नहीं। पूरा CJK set atlas को बहुत बड़ा कर देता है। bitmap fonts अंकों, Latin अक्षरों और कुछ title glyphs के लिए रखें; body copy dynamic font पर रखें।

आपको ये लेख भी पसंद आ सकते हैं

गेम UI लोकेल ओवरफ़्लो: डिज़ाइन हेडरूम और VberAI Studio Translate एक्सपोर्ट QA

जर्मन या स्पेनिश कॉपी से बटन और लिस्ट टूटने पर फेल/पास कैसे तय करें, डिज़ाइन में चौड़ाई कैसे आरक्षित करें, और पूर्ण-ट्री री-एक्सपोर्ट से पहले VberAI Studio कैनवास पर लोकेल की तुलना कैसे करें।

  • game-ui-design
  • game-dev-ai
  • ui-localization
  • i18n
और पढ़ें

कौन से AI उपकरण Godot और Unity विकास को गति देते हैं? MCP और AI Studio कार्य को कैसे विभाजित करते हैं

Godot और Unity के लिए AI उपकरणों का उत्पादन-चरण विश्लेषण: रेपो सहायक, इंजन-पारिस्थितिकी AI, MCP संपादक ब्रिज, डिज़ाइन-से-इंजन UI, और एसेट तैयारी—साथ ही VberAI Engine MCP, AI Studio, और Super Matting कहाँ फिट होते हैं।

  • ai-tools
  • godot
  • unity
  • mcp
और पढ़ें

VberAI Studio: गेम UI डिज़ाइन छवियों को विभाजित करें और Unity / Godot / Cocos में आयात करें

VberAI Studio फुल-स्क्रीन गेम UI डिज़ाइन छवियों को UI तत्वों में विभाजित करता है, लेआउट और आकार बनाए रखता है, और Unity, Godot, और Cocos में निर्यात या पुश करता है।

  • vberai
  • ai-studio
  • game-ui
  • game-art
और पढ़ें