用圖片字而不是圖片
美術和程序的配合,需要程序能夠很快抓住問題重點并提出解決方案.美術出的圖片字比我們使用的字體更好好看,那么是否要一個個圖片去拼成數(shù)字呢?
NGUI創(chuàng)建圖片字
準備材料
美術提供的數(shù)字圖片
BMFont 字作軟件
美術資源處理
1、使用BmFont先導出一張只有數(shù)字的圖片字,會得到兩個文件
2、將得到的xxx.fnt文件改后綴為xxx.txt
3、使用notepad++或Sublime Text打開(或使用其它帶有列編輯功能的文本編輯器)
info face="微軟雅黑" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2 outline=0 common lineHeight=32 base=26 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0 page id=0 file="space2_0.png" chars count=10 char id=48 x=0 y=0 width=15 height=21 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15 char id=49 x=133 y=0 width=14 height=20 xoffset=1 yoffset=6 xadvance=15 page=0 chnl=15 char id=50 x=149 y=0 width=14 height=20 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15 char id=51 x=68 y=0 width=13 height=21 xoffset=1 yoffset=6 xadvance=15 page=0 chnl=15 char id=52 x=98 y=0 width=16 height=20 xoffset=-1 yoffset=6 xadvance=15 page=0 chnl=15 char id=53 x=83 y=0 width=13 height=21 xoffset=1 yoffset=6 xadvance=15 page=0 chnl=15 char id= x=17 y=0 width=15 height=21 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15 char id=55 x=116 y=0 width=15 height=20 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15 char id=56 x=34 y=0 width=15 height=21 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15 char id=57 x=51 y=0 width=15 height=21 xoffset=0 yoffset=6 xadvance=15 page=0 chnl=15
4、通過觀察上面的這段文本,其中的規(guī)律為
查找字符ID
其中字符的id可以通過BMFont得到,鼠標移動到一個字符上,右下角即會顯示會該字符的ID,如下圖片所示,選擇0,右下角Id為48
制作NGUI字體prefab
5、根據(jù)規(guī)律修改BMFont導出的文件后,把 xxx.txt導入到Unity中,就可以使用NGUI的Font Maker制作圖片字了
遇到問題?
6、字體Prefab制作好之后,如果遇到字體丟失,可以重新拖入字體信息txt
7、多測試修改下字體文件的間距及寬度大小,達到和美術那邊一樣的效果
我的例子
附上我的測試數(shù)據(jù)
美術圖片尺寸:260 x 31
字符總數(shù):共10個字符,每個字符的間距相等(方便x遞增)
info face="微軟雅黑" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=0,0 outline=0 common lineHeight=26 base=24 scaleW=260 scaleH=31 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0 page id=0 file="ingame_enemies_round_number.png" chars count=10 char id=48 x=0 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=49 x=26 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=50 x=52 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=51 x=78 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=52 x=104 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=53 x=130 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id= x=156 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=55 x=182 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=56 x=208 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15 char id=57 x=234 y=0 width=26 height=31 xoffset=0 yoffset=0 xadvance=26 page=0 chnl=15
圖片字效果
根據(jù)美術提供的這張圖,程序調(diào)試出字體信息文件參數(shù),就可以換使用圖片字體一樣啦
注意事項
建議
- 美術出的圖每兩個字之間間距為2px,或根據(jù)實際情況
- 數(shù)字從0開始,9結(jié)束(否則請修改文本的字符id)
- 圖片建議為png,帶透明通道
確保事項
- 一定要確保每兩個字之間的間距相等
?
單張數(shù)字圖處理
如果是美術給的是單張的圖片,可以參考下面這篇博客