NGUI-位图字体及图文混排

图文混排介绍

图文混排通常用于聊天模块,在文字中夹杂表情图片。

NGUI-位图字体及图文混排

位图字*作

1)图文混排的制作,首先要制作位图字体。
首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载
2) 将要作为位图的文字写入到一个文本文件中,以UTF-8编码格式保存或在BMFont中进行选择。

NGUI-位图字体及图文混排

NGUI-位图字体及图文混排

亮色的字是制作位图的文字。

3)通过Edit菜单,选择Select Chars form File选中之前创建好的文本文件,软件会自动将文本中要制作位图字体的字符选中。

NGUI-位图字体及图文混排

4)通过Options菜单中的【Font Settings】选中要使用的字体文件,点击OK即可。

NGUI-位图字体及图文混排

5)导出设置

NGUI-位图字体及图文混排

通过Texture 中的Width和Height用于设置最终生成图片的宽和高,如果设定的大小无法容纳所有字体,则会创建多个文件,可以通过快捷键[V]对最终生成的位图字体进行预览。

File Format 中的Texture和Comporession可以设置导出的位图使用什么格式和压缩算法。

NGUI-位图字体及图文混排

6) 通过Options菜单中的【Save Bitmap For Font as…】
在弹出的弹窗中填入文件名称MyFont,保存成功后会看到下面的文件.

NGUI-位图字体及图文混排

7)将制作好的字体导入到Unity中,使用Font Maker制作位图字体。

NGUI-位图字体及图文混排

注意: Output 中的Atlas 保证为None

点击 Create the font 保存制作好的字体.

制作表情

1.将准备好的表情图只作为图集emoji,表情图点击这里下载.

NGUI-位图字体及图文混排

2.重新打开Font Maker 在 Output下的图集中,选择制作好的表情图集emoji,再次点击Create the font 按钮,保存最终的字体为MyEmojiFont。

3.选中MyEmojiFont预制体,在UI Font下的【Symbols and Emotiicons】添加表情。

NGUI-位图字体及图文混排

左侧输入对应字符,中间选择对应的图片,填写完成后,点击Add进行表情添加。

位图字体使用及图文混排

1)新建UILabel,并将字体选择为刚刚制作好的MyEmojiFont字体。

NGUI-位图字体及图文混排

具体展现的效果如下

NGUI-位图字体及图文混排