SnowBamboo位图字体生成器:浏览器里出位图字体,6种格式直通游戏引擎

SnowBamboo位图字体生成器:浏览器里出位图字体,6种格式直通游戏引擎

【免费下载链接】snowb-bmfBitmap Font Generator Online项目地址: https://gitcode.com/gh_mirrors/sn/snowb-bmf

SnowBamboo BMF 是一款开源的、跑在浏览器里的位图字体生成器:导入字体文件,做填充、描边、阴影,再一次性导出纹理图集和描述文件,全程不装软件、不注册,数据不离开本地。内置 SDF/MSDF 渲染,文字在引擎里放大缩小都不糊。

老位图字体流程断了好几年

游戏团队熟悉的那套位图字体工具链停滞很久了:BMFont 是 Flash 插件,在现代浏览器里跑不起来;Littera 也停更多年。常见做法是装一套桌面软件,在一台机器上改好,导出的 .fnt 和 PNG 交给引擎侧读取。每改一次 padding、描边宽度,都得重新导出、重新导进引擎。痛点不在功能多少,而在工具被绑死在"某台机器 + 某个软件"上。

打开就能看到什么

界面分三栏。顶部是New / Open / Save / Export与项目标签区;左栏是字体与布局配置,中间是打包后的纹理预览,右栏是样式配置。

• 左栏:字体文件导入(TTF/OTF/WOFF/TTC)、Font Size、Line Height、Sharp 锐度滑条,另有 Layout 与 Texture Packing 分组(Padding、Spacing、Pages、Auto Pack、Fixed Size、Max Width/Height)
• 中间:打包后的纹理图集实时显示尺寸(截图中为 439×439),空格+拖拽平移,Ctrl+滚轮在 25%–1000% 之间缩放
• 右栏:Fill(Solid/Gradient/Image)、Stroke(宽度、OUTER/MIDDLE/INNER 位置、线帽与线连)、多层 Shadow

核心能力逐个拆

字体导入:4 种格式 + 回退链

支持 TTF、OTF、WOFF、TTC;导入 TTC 集合文件时会弹出对话框列出集合里的全部字体,可多选加载。按顺序导入多支字体还能组成回退链:主字体负责大部分字符,缺的字符依次到后面的字体里找,再缺则落到浏览器默认字体,英文+中文两个字符集可以由一支字体覆盖。

图像字形:把图标塞进同一张图集

游戏道具、爱心、特殊符号这类标准字体没有的元素,直接拖图进Image Glyph List,给每张图片分配一个字符(比如数字图标映射 0–9)。透明像素自动裁剪省纹理空间;一个字符只能映射一张图,与文本字形撞车时图像优先。面板支持批量拖入、多选和全屏模式。

字偶距与逐字形度量

打开Preview开关进入文本预览模式:选中某个字符,可以单独调它的 xAdvance、xOffset、yOffset;也可以直接改特定字符对的 kerning 数值,例如把 "A" 和 "W" 的间距收紧 -10px。这些值都会写进描述文件,引擎渲染时读取。

技术思路:为什么够快

• 纹理打包跑在 Worker 池:MaxRects、Guillotine、Shelf 三种算法在 Web Worker 里并行执行,Auto/Fixed/Adaptive 三种模式,支持多页;README 称纹理内存占用减少 30%–50%,核心实现在 src/utils/PackingEngine.ts
• SDF/MSDF 走 WASM:msdfgen 用 Emscripten 编译成 WASM 在浏览器里跑,接近原生的速度生成距离场纹理,支持 SDF/PSDF/MSDF/MTSDF/标准位图 5 种模式
• 项目格式:.sbf 项目用 Protocol Buffers 序列化,落在 IndexedDB 里,下次打开接着改;同时能导入老的 .ltr 项目
• 离线可用:以 PWA 打包,应用内提示更新

6 种导出格式怎么选

Ctrl+Shift+S打开导出对话框,选描述文件格式(均附带 PNG 图集;字符集太大时自动分页成 font_0.png、font_1.png):

5 步快速上手

1. 点Add Font File导入 TTF,或直接打开.sbf / .ltr旧项目
2. 在字符面板勾选字符集(Unicode 块或自定义字符串)
3. 右栏调样式(填充/描边/阴影),左栏调布局(padding、spacing、固定尺寸)
4. 打开 Preview 验证实际文本效果,顺手逐字形调度量
5. Ctrl+Shift+S导出,得到包含描述文件与 PNG 图集的 .zip

适合谁,不适合谁

适合:

• 游戏开发者:导出直接进 Unity、Unreal、Godot、Cocos2d、Phaser、PixiJS
• 嵌入式工程师:C Header 格式让纹理直接编译进固件
• 有 Littera 老项目的团队:导入 .ltr 即可迁移,不用重画
• UI 设计师:做图标字体、特殊展示文字,不用装任何软件

**不适合:**想改字体矢量轮廓、或要产出可缩放的矢量字体文件用于排版的场景——它产出的是纹理 + 描述文件,是位图字体的制作工具。

clone 仓库 https://gitcode.com/gh_mirrors/sn/snowb-bmf 后yarn install && yarn start可本地跑起来,也可以直接用线上版。

【免费下载链接】snowb-bmfBitmap Font Generator Online项目地址: https://gitcode.com/gh_mirrors/sn/snowb-bmf