YYKA 位图字体编辑器

一句话卖点：在 Cocos 编辑器里直接做出标准 BMFont 位图字体——选字体、挑字、调效果、打包图集、一键写入 assets，全程不离开编辑器。

✨ 功能特性

字体来源（三种）

  • 内置开源字体 2 款，随包携带、各附 LICENSE，开箱即用：
    • Roboto Regular（Apache-2.0）
    • Press Start 2P（SIL OFL 1.1，像素风）
  • 本地导入：多选 TTF / OTF / TTC，以字节流在面板内加载，不安装到系统字库
  • 在线字体清单：内置 4 款中日文开源字体（Noto Sans SC / TC / JP、霞鹜文楷），下载后缓存到项目临时目录，二次使用直接命中缓存
  • 打开面板默认已选好内置字体，配合默认字符集立刻就能看到结果，零配置起步

字符集

  • 5 个预设：英文与数字（ASCII）、纯数字 0-9、西欧字母（含重音）、英文标点、扩展拉丁字母
  • 8 个常用区段：拉丁字母、希腊字母、西里尔字母、日文假名、韩文谚文、全角标点、汉字（基本区约 2.1 万）、汉字（GB2312 范围）
  • 支持粘贴自定义文本、输入自定义码点区间（如 0x4E00-0x9FFF）
  • 实时去重、排序、计数；缺失字形检测直接读字体 cmap 表判定，不依赖渲染回退，不会误报"有这个字"
  • 上万码点的字符集列表使用虚拟滚动，列表长度再大也保持流畅

字形参数

  • 字号、行高（可自动）、基线（可自动）、水平/垂直间距、内边距（上右下左）
  • 抗锯齿超采样 1x / 2x / 4x
  • 字形颜色、粗体、斜体（合成）

文字效果

  • 7 档预设一键套用：无效果、黑色描边、白色描边、描边 + 阴影、投影、金色渐变、蓝色渐变
  • 描边（厚度 + 颜色）、阴影（X/Y 偏移、模糊、颜色）、渐变（线性/径向 + 角度、起止色）均可自由微调
  • 手动改动后预设下拉自动回落显示"自定义"，不会留着对不上的名字

自动生成，不用点按钮

  • 改字体、字符集、字形参数、文字效果、图集参数后自动重新生成，无需手动点击
  • 连续拖参数只计算一次（防抖）；生成中再次修改会中断重算，不会堆积排队
  • 大字符集采用分块栅格化并让出主线程，带进度与取消

图集打包

  • MaxRects（Best Short Side Fit）算法，以提高图集有效利用率
  • 页尺寸自适应：按内容挑选刚好容纳全部字形、且为 2 的幂的页尺寸，避免固定正方形留下大片空白
  • 也可手动指定 128–4096 页宽/页高、强制 2 的幂（POT）、是否允许自动分页
  • 图集内边距与字形间距可配；放不下的字形计入溢出并明确提示

图集预览

  • 逐页缩略图，显示每页字形数与占用率
  • 画布上点击字形即可选中，配合字形检视器微调

导出

  • 描述文件三选一：.fnt(文本) / .fnt(XML) / .json(BMFont JSON)
  • 图片格式：PNG（无损）/ WebP（有损，质量 30%–100% 可调）
  • 命名规则模板（{face}_{size}_{page} 等占位符）
  • 体积预估：真实编码出 PNG 与 WebP 的字节数做对比，结果按图集签名缓存
  • 产物由面板直接写盘，仅"选择目录"走系统对话框

Cocos 项目衔接

  • 可一键写入项目 assets：自动校正 .meta（图片 → sprite-frame、.fnt → bitmap-font）并刷新资源库，拖进 Label 的 Font 即可用
  • 规避位图字体导入时常见的坑：图片 importer 不是 sprite-frame 导致字体渲染失败

编辑已有字体

  • 导入已有 .fnt（文本 / XML / JSON）+ 图集图片，按 char 逐条切出字形位图，字节级保真，不重新栅格化
  • 支持微调 xoffset / yoffset / xadvance、移除字形、新增/替换字符（按当前参数单字形重栅格化并自动重打包）
  • 微调修改度量写入描述文件；需要重排时用"重新打包"

工程与界面

  • 工程文件 .yykafnt.json 保存全部输入（字体来源、字符集、字形参数、效果、打包与导出配置），随时重开继续迭代
  • 中英双语界面，面板可停靠，底部状态栏显示进度、占用率、缺失字数与错误信息（错误可一键复制）

📋 使用说明

  1. 打开面板：Cocos 编辑器顶部菜单 → 面板 → 位图字体编辑；面板可自由停靠在编辑器任意位置。
  2. 选字体：打开时已默认选中内置 Roboto Regular，直接进入下一步；要中文就切到"在线清单"下载 Noto Sans SC / 霞鹜文楷，或"本地导入"选自己的 TTF/OTF。
  3. 选字符：点预设或常用区段；也可以粘贴一段文本，或填码点区间。缺失的字会在列表中标出。
  4. 调参数：左侧参数列改字形参数（字号/行高/基线/间距/内边距/抗锯齿/颜色）与文字效果（可直接选预设）。改完自动重新生成，无需任何确认操作。
  5. 看图集：右侧预览区按页显示打包结果与占用率；点某个字形可选中它，进入字形检视器微调度量。
  6. 导出：点工具栏"导出"，选择描述格式、图片格式、命名规则与目录；勾选"导入到项目 assets"则产物直接落进项目并自动校正 meta、刷新资源库。
  7. 在 Cocos 里用：Label 的 Font 选该 .fnt 即可（图片与 .fnt 必须同时存在于项目内，插件已自动把图片设置为 sprite-frame）。
  8. 继续迭代：用工具栏"保存"存成 .yykafnt.json，下次"打开"继续；改造已有字体走 工具栏"高级" → 编辑已有字体。
  9. 高级面板里还有什么：图集细参（页尺寸/POT/分页/边距）、编辑已有字体、字形检视器。主界面只保留主流程，高级项默认收起。

⚙️ 引擎与环境要求

  • Cocos Creator ≥ 3.8.8（本插件为编辑器扩展，安装后出现在编辑器面板中）
  • 面板运行在编辑器自带的 Chromium 渲染进程中，引擎内置的环境即可满足，无需额外安装任何运行时二进制
  • 字形栅格化使用浏览器原生 Canvas + FontFace，不依赖 opentype.js / node-canvas 等第三方字体引擎
  • WebP 导出依赖编辑器内置 Chromium 的图片编码能力；环境不支持时会明确拦截提示并建议改用 PNG，不会静默降级
  • 中文字库体积大，不随包内置；在线下载功能需要网络可达对应字体源（本地导入与内置字体不受网络影响）

🖥️ 平台支持情况

  • 编辑器端：Windows / macOS 上运行的 Cocos Creator 3.8.8 及以上版本
  • 产物平台：生成的是标准 AngelCode BMFont 描述文件 + PNG/WebP 图集，属通用资源，可在 Cocos Creator 支持的 Web / H5、微信小游戏、Android、iOS、原生桌面等平台正常使用
  • 运行时零侵入：本插件是编辑器工具，不向项目注入任何运行时代码，不产生运行时开销；使用位图字体本身还能省掉运行时字形栅格化开销

📜 更新日志

v1.0.0（2026-10-10）

  • 首发版本：内置 + 本地导入 + 在线清单三种字体来源
  • 字符集预设/区段/自定义文本/码点区间，SFNT cmap 缺失字形检测，虚拟滚动列表
  • 字形参数（字号/行高/基线/间距/内边距/抗锯齿/颜色/粗斜体）与文字效果（7 档预设 + 描边/阴影/渐变）
  • 参数变更自动重新生成（防抖 + 可中断，支持取消）
  • MaxRects 图集打包：页尺寸自适应、多页、POT、边距与溢出提示
  • 图集逐页预览、画布点击选字、字形度量微调与增删替换
  • 导出 .fnt 文本 / XML / JSON + PNG / WebP（有损质量可调），含体积预估与命名模板
  • 写入项目 assets 并自动校正 .meta、刷新资源库
  • 导入编辑已有 BMFont；工程文件 .yykafnt.json；中英双语界面

❓ 常见问题 FAQ

Q：导出的字体拖进 Cocos 后不显示？
A：位图字体要求图集图片与 .fnt 同时导入，且图片的资源类型必须是 sprite-frame。用插件的"导入到项目 assets"会自动校正，手动拖入时请自行确认图片类型。

Q：为什么每个字号都要单独生成一次？
A：位图字体本质是"图片 + 索引"，每个字号的字形位图不同，必须分别生成。换来的是运行时零字形栅格化开销，适合固定字号、高频刷新的场景（伤害数字、HUD、飘字）。

Q：中文要多大图集？
A：取决于字号与用字量。汉字量大时建议开启"自动尺寸"或允许分页；更推荐只打包项目实际用到的字，图集体积能小一个数量级。

Q：能改已有的 .fnt 吗？
A：可以。工具栏"高级" → 编辑已有字体，导入 .fnt（文本/XML/JSON）和图集图片，即可微调度量、增删替换字符后重新导出。

Q：有损/无损 WebP 都支持吗？
A：只提供有损 WebP（质量可调）。需要无损请用 PNG。

Q：在线字体下载失败怎么办？
A：面板底部状态栏会保留完整错误信息并提供一键复制（多数是网络到对应 CDN 不通）。也可改用"本地导入"，生成结果相同。

Q：大字符集会卡吗？
A：栅格化分块执行并主动让出主线程，带进度显示与取消按钮；字符集列表使用虚拟滚动，上万码点也不会堆积 DOM。

Q：支持 3D 项目的 Label 吗？
A：生成的是标准字体资源，2D/3D 均可使用；本插件只负责产出资源，不涉及运行时逻辑。

⚠️ 购买须知

本产品为付费虚拟插件商品，一经购买成功概不退款，请支付前谨慎确认购买内容。

购买后获得对应版本授权，仅限授权范围内使用；
插件仅支持标注的 Cocos Creator 版本，请确认引擎版本符合要求再下单；
不包含定制开发服务，如有定制需求可单独咨询；
严禁二次分发、转售、反编译本插件。

📞 联系我们

如遇问题、有定制需求或希望增加动画 / 功能，欢迎联系作者：

官网：https://www.yyka.cn
邮箱：yykacn@qq.com
公众号：智能运营咖

关键词

位图字体、BMFont、字体工具、图集打包、字体编辑、文字效果、描边、渐变、Cocos Creator、Creator 扩展、编辑器插件、中文位图字体、Label 字体、PNG、WebP、性能优化

感谢用户的内容

感谢每一位把这个插件用进项目的开发者。位图字体不算新鲜技术，真正麻烦的从来是"为了几个字号去装一个外部工具、再手动调 meta"这套流程——你们的反馈（要更简单的界面、要改完就自动出结果、要能直接改已有 .fnt）基本决定了这个插件今天的样子。使用中遇到任何不顺手的地方，欢迎直接联系，我会持续更新。