NGUI和UGUI图片字 艺术字(Bitmap图片转文字)制作方法

用图片字而不是图片

美术和程序的配合，需要程序能够很快抓住问题重点并提出解决方案.美术出的图片字比我们使用的字体更好好看，那么是否要一个个图片去拼成数字呢？

NGUI创建图片字

准备材料

美术提供的数字图片

BMFont 字体制作软件

美术资源处理

1、使用BmFont先导出一张只有数字的图片字，会得到两个文件

2、将得到的xxx.fnt文件改后缀为xxx.txt

3、使用notepad++或Sublime Text打开(或使用其它带有列编辑功能的文本编辑器)

info face="微软雅黑" size= bold= italic= charset="" unicode= stretchH= smooth= aa= padding=,,, spacing=, outline=
common lineHeight= base= scaleW= scaleH= pages= packed= alphaChnl= redChnl= greenChnl= blueChnl=
page id= file="space2_0.png"
chars count=
char id=   x=     y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=-    yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=

4、通过观察上面的这段文本，其中的规律为

查找字符ID

其中字符的id可以通过BMFont得到，鼠标移动到一个字符上，右下角即会显示会该字符的ID，如下图片所示，选择0，右下角Id为48

制作NGUI字体prefab

5、根据规律修改BMFont导出的文件后，把 xxx.txt导入到Unity中，就可以使用NGUI的Font Maker制作图片字了

遇到问题？

6、字体Prefab制作好之后，如果遇到字体丢失，可以重新拖入字体信息txt

7、多测试修改下字体文件的间距及宽度大小，达到和美术那边一样的效果

我的例子

附上我的测试数据

美术图片尺寸：260 x 31

字符总数：共10个字符，每个字符的间距相等(方便x递增)

info face="微软雅黑" size= bold= italic= charset="" unicode= stretchH= smooth= aa= padding=,,, spacing=, outline=
common lineHeight= base= scaleW= scaleH= pages= packed= alphaChnl= redChnl= greenChnl= blueChnl=
page id= file="ingame_enemies_round_number.png"
chars count=
char id=   x=     y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=    y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=
char id=   x=   y=     width=    height=    xoffset=     yoffset=     xadvance=    page=  chnl=

图片字效果

根据美术提供的这张图，程序调试出字体信息文件参数，就可以换使用图片字体一样啦

注意事项

建议

• 美术出的图每两个字之间间距为2px，或根据实际情况
• 数字从0开始，9结束(否则请修改文本的字符id)
• 图片建议为png，带透明通道

确保事项

• 一定要确保每两个字之间的间距相等

单张数字图处理

如果是美术给的是单张的图片，可以参考下面这篇博客 http://blog.csdn.net/keshuiyun/article/details/9960667