点击上方亿元程序员+关注和★星标
引言
哈喽大家好，最近笔者又又又看到有小伙伴吐槽：
最近 刚入职一家公司，大佬让我负责战斗飘字相关模块，先将美术给的资源在
Creator中制作成艺术字。艺术字 的制作不是有很多现成的工具吗？例如
BMFont。明明直接用就可以了，非要在Creator里面写？？？
大佬肯定有大佬的理由，笔者就不深入探讨了，如果硬要说，可能是对小伙伴爱的考验。
言归正传 ，本期带大家一起来看看，如何在Cocos游戏开发中，自定义插件制作位图字体。
本文源工程可在文末获取，小伙伴们自行前往。
什么是位图字体？
位图字体将整套字符预渲染为一张纹理图集；渲染时，只需根据每个字符的UV坐标从中取样并拼接即可。
位图字体有什么好处？
位图字体 ，其实在优化DC中也是很常见的，如果我们战斗的飘字用Label系统字体，不仅不好看，DC也会随着数量增加，应该也没人直接这么干。
位图字体如何制作？
位图字体的实现分为两步：
第一步，提前将全部字形整合到一张纹理图集中；
第二步，运行时通过查询字符的UV坐标，从该图集中提取对应图像区块并依次绘制。
自定义插件制作位图字体
接下来 ，我们一起来看看如何在Creator中，自定义插件实现一个位图字体制作工具。
可能有小伙伴有疑问了 ，那可以直接在插件中使用BMFont工具吗？可以是可以,导演不让啊！
1.资源准备
首先将美术搭子给的资源用字符命名好。
2.创建插件
想要自定义插件制作位图字体 ，首先要创建我们的插件，通过菜单扩展->创建扩展打开扩展创建面板,选择一个空白模板进行创建并启用插件。
3.插件整体流程
开始--->在资源管理器中选择文件夹->遍历文件夹下所有的PNG图片->获取所有散图的尺寸信息->将散图合成一张图->根据图的信息生成fnt配置文件->结束
-
选择文件夹 ：首先通过
let uuids = Editor.Selection.getSelected("asset")获取选中的资源管理器中的文件夹。
-
文件夹路径 ：通过
let asset_url = await Editor.Message.request("asset-db", "query-path", uuids[0])获取选择的文件夹路径。
-
遍历散图 ：通过
fs模块let files = fs.readdirSync(asset_url)获取所有散图的路径。
-
读取散图信息 ：通过
Jimp库(图像处理库)const image = await Jimp.read(filePath);读取散图的尺寸。
-
合图 ：通过
Jimp库(图像处理库)const texture = new Jimp(textureWidth, textureHeight, 0x00000000);创建画布，然后通过texture.composite(image, x, y);画图，最后通过await texture.writeAsync(texturePath);保存合图。
-
生成fnt配置 ：根据获取到的散图信息，和合图信息，文件名就是对应字符，按照
fnt配置的格式，填充内容，并且生成配置文件。
4.编译测试
我们直接在生成的插件模板中(偷懒，别学)，执行我们的插件逻辑。
在插件目录 ，安装依赖npm install和构建插件npm run build。
5.效果预览
将生成好的字体文件设置一下即可看到效果。
结语
往往大佬们坚持要自己开发工具，很多时候并不是因为固执，可能是对原理的执着、工具的可控或者是公司内部的约束等等。
小伙伴们的大佬们有没有什么特别的要求和规范呢？
本文源工程 可通过私信 发送 BMFont 获取。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
点击下方灰色按钮+关注。