由于新加了一个伤害字需求,而之前的流程流失了,于是撸了一套添加图片字的流程……

原理一个图片对应一个ASCII的值,比如“暴击”程序这边定义的是 字符 A 的值,那么使用工具,让图片对应上这个映射关系就行了。如果新添加一个图片字,比如“免疫”,也得和程序约定一个对应的字符。文件一个fnt文件和一张图片合集。关于fnt文件,其实是描述了图片中的索引信息,类似普通的图集,根据字符id去索引一张图片,因此,一个id可以对应的不只是一个字,而是一张单图,比如A对应了“暴击”这张图。




unity 图片中间向外进度条 unity加图片_unity字体


操作步骤1、下载工具:Bitmap Font Generator开源免费软件下载地址http://www.angelcode.com/products/bmfont/2、导入美术给的图片字


unity 图片中间向外进度条 unity加图片_unity 字体_02


3、设置导出字体大小,这里会影响导出的图片字的默认尺寸,由于之前damageFont的默认尺寸是141,这里就沿用了。


unity 图片中间向外进度条 unity加图片_unity字体_03


unity 图片中间向外进度条 unity加图片_unity 字体_04


4、 往工具中加入图片资源
打开BMFont, Edit—>Open Image Manager


unity 图片中间向外进度条 unity加图片_Image_05


打开Image—>Import Image,选中图片,并且设置参数。比如0 对应的ASCII的ID是48,那么这里就输入48。(由于之前的damageFont有向下偏移90,所以这里所有的图片字都设置了一下)。


unity 图片中间向外进度条 unity加图片_unity字体_06


最后导入了这些图片字


unity 图片中间向外进度条 unity加图片_unity 图片中间向外进度条_07


5、导出设置。
Width与Height决定了最后导出的图片的长宽,以刚好囊括所有文字图片为宜,Texture决定了导出的图片的格式。 Bit depth设为32,导出图片格式设为png。设置好后,点击OK。


unity 图片中间向外进度条 unity加图片_unity 图片中间向外进度条_08


6、导入unity
由工具生成的文件包括如下两个,导入到Unity中


unity 图片中间向外进度条 unity加图片_unity 字体_09


7、使用NGUI工具生成atlas。
打开NGUI的FontMaker(NGUI—>Open—>FontMaker。将fnt拖到font data中,将图片拖到texture中,点击create the font生成atlas


unity 图片中间向外进度条 unity加图片_unity字体_10


8.在label中测试使用


unity 图片中间向外进度条 unity加图片_unity 图片中间向外进度条_11


unity 图片中间向外进度条 unity加图片_unity 字体_12


9.保存一下工具的工程文件
由于之前的客户端做的时候没有详细文档和工具工程,所以如果新加一个字,就得重新制作所有的单图,因此,应该保留以下内容
a、单图资源
b、工程的config资源


unity 图片中间向外进度条 unity加图片_Image_13


该配置文件生成的方式如下,因此在做完后一定得保存一下,否则每个图片的信息都得重新导入。


unity 图片中间向外进度条 unity加图片_Image_14