用圖檔字而不是圖檔
美術和程式的配合,需要程式能夠很快抓住問題重點并提出解決方案.美術出的圖檔字比我們使用的字型更好好看,那麼是否要一個個圖檔去拼成數字呢?
NGUI建立圖檔字
準備材料
美術提供的數字圖檔
BMFont 字型制作軟體
美術資源處理
1、使用BmFont先導出一張隻有數字的圖檔字,會得到兩個檔案
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=54 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、通過觀察上面的這段文本,其中的規律為
查找字元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=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=54 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
圖檔字效果
根據美術提供的這張圖,程式調試出字型資訊檔案參數,就可以換使用圖檔字型一樣啦
注意事項
建議
- 美術出的圖每兩個字之間間距為2px,或根據實際情況
- 數字從0開始,9結束(否則請修改文本的字元id)
- 圖檔建議為png,帶透明通道
確定事項
- 一定要確定每兩個字之間的間距相等
單張數字圖處理
如果是美術給的是單張的圖檔,可以參考下面這篇部落格 http://blog.csdn.net/keshuiyun/article/details/9960667