用TexturePacker替代蛋疼的BMFont

Creator 2.x
#1

我的博客原文

bmfont目前似乎是制作fnt位图字体的唯一工具, 可是每次选择图片/填写id都是一个非常蛋疼的事情. 更蛋疼的是, 无法打开以前保存的文件继续添加新的字体.
而TexturePacker合并贴图工具显然好用得多, 只需要将图片拖入, 点击Publish Sprite Sheet即可, 非常好用. 并且工程文件可以保存以便下次在编辑. 说实话这么好用, 即使没有工程文件也丝毫不影响效率.
这儿以TexturePacker导出cocos-2dx贴图为例, 讲讲怎么用TexturePacker制作fnt字体.

  • 将所有字体图片以字体对应的字符命名

如0-9的字体png图片,需要分别命名为 0.png, 1.png等等;
也支持中文字体. 如果字符为不能作为文件名的特殊字符, 如/*\等, 可以使用下划线加id的方式,如 _48.png表示字符"0", _31532.png表示字符"第".

  • 用TexturePacker的基本模式导出cocos2dx的图集, 设置如下:

Framework: cocos2d-x
Texture Format: PNG-32
Pixel Format: RGBA8888
Algorithm: Basic
Trim Mode: None

导出的图集名称如example.plist, example.png

  • 下载工具
git clone https://github.com/darceye/myjs.git
npm install

将下载的工具目录添加到path中去.

  • 转化
    在导出的example.plist目录中, 使用命令行执行:

    plist2fnt example.plist

就会输出example.fnt. 与example.png一起导入到cocos creator中就可以使用.

3赞
#2

如有用到的发现有问题, 可联系我解决

#3

大兄弟，给你推荐个BMF字体制作软件
GlyphDesigner

#5

BMFon其实也可以保存文件继续添加新字体，在编辑完毕后，关掉BMFont.exe，在同级目录下会有个bmc文件(大概是这个后缀)，把这个复制出来，下次编辑就以同名覆盖回来再打开就好。
另外可以直接编辑这个文件后再打开，比在工具中操作导入图片效率要高

#6

貌似我的版本保存后并没有.bmc文件? V1.14beta

#7

上面的说错，应该是BMFont文件夹下有个bmfont.bmfc文件，直接操作这个就好了

#8

这是我的BMFont文件夹, 并没有这个文件

#9

完全按照上面的步骤来的还是有错，提示 var strA = brace.replace(/{/g, “[”)
^

TypeError: Cannot read property ‘replace’ of undefined

#10

这个工具怎么导入若干个文字图片，然后合图生成 .fnt ?

#11

具体命令能贴出来么 我老是找不到plist

#12

不是BMFont文件夹，而是编辑某个字体之后，可以保存配置文件，这个配置文件就是.bmfc文件。下次要编辑这个字体，就导入这个配置文件即可。

#13

mark 一下