Egret社区

[教程文档] 如何自制位图字体

2016-7-27 12:20
42893
本帖最后由 flep 于 2016-7-27 12:20 编辑

啥是位图字体呢?
游戏中很多显示文字的地方,如果用系统自带字体就会显得和游戏风格不符。如下图:
25.png
换成下图就感觉好很多:
26.png
这就是位图字体实现的。
通俗的解释,位图字体就是把每个字符对应一个图片文件,然后把一段文字用一组图片显示出来。

下边就教大家如何制作一套位图字体
制作位图字体需要用到egret的另一款工具

Texture Merger
下载地址:http://egret.com/downloads/texture.html

启动后,选Bitmap Font
1.png

然后把每个字符对应的图片,统一拖拽进去
2.png
按照提示给字体起个名字,随便取
3.png
然后左侧的每个选项对应一个字符图片。双击这些选项,重命名,按照你希望的对应关系来命名。比如“0”的字符图片就重命名为0,注意,要区分大小写的。
4.png

都改好后“导出”
5.png

导出的时候可以设置缩放比例,默认100%
6.png

选择一个位置保存。这里我们建议选择Lakeshore项目的userAsset目录,这样项目中就可以直接使用了。
7.png

导出后产生两个文件。一个png,一个fnt。其中png是所有符号图片的合集,fnt是位图文本的配置文件。

8.png
在Lakeshore的项目中,插入一个位图字体的组件
9.png

在右侧的特有属性栏目,纹理图片指定刚刚导出的png图片,配置文件指定刚刚导出的fnt文件
10.png

然后输入默认文本,就可以查看显示效果了(注意!位图文本组件的宽高要足够大才会显示,如果太小可能就无法显示内容)
11.png

到这里,位图文本的制作就完成了。

有的同学可能会问,我没有每个字符对应的图片怎么办?
下边教大家一个我使用的方法。
这里需要一款第三方软件
Shoebox
下载地址:http://renderhjs.net/shoebox/

这是一款air软件,需要先安装Adobe AIR才能安装

启动后,我们选GUI -> BitmapFont
12.png

鼠标右键单击Bitmap font的图标,弹出设置窗口,东西很多,不用管。
主要是改Txt Chars这栏,把你要用到的字符都敲进去。然后点"Apply"

13.png
然后鼠标左键单击Bitmap font的图标,就会把用到字符复制到系统的剪切板


然后,我用的是Firework,老牌的图形处理软件(这个从哪儿弄,就靠你自己了)
新建一个图片,把舞台宽高设得足够大,然后粘贴刚刚的字符进去。
然后你就可以任意改字体啊,加效果了
14.png
最后保存png文件

然后还是启动Texture Merger
这次我们选择“更多字符”
20.png

选择“字体纹理集”
21.png

选择我们刚刚保存的png图片
22.png
然后按提示,从左到右键入对应的字符,然后确定。
23.png
然后导出就行了,其他部分就和之前讲过的相同了。
24.png

希望大家都能做出漂亮的字体~

分享到 :
0 人收藏

3 个回复

倒序浏览
yjtx  官方团队 | 2016-7-27 16:12:16
1次讲了2个产品,
心情缘你  圆转纯熟 | 2016-7-31 16:41:17
好功能!!!
苞米地里蒙面侠  登堂入室 | 2016-8-3 14:22:10
这个比好呢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部