天天看點

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

用圖檔字而不是圖檔

美術和程式的配合,需要程式能夠很快抓住問題重點并提出解決方案.美術出的圖檔字比我們使用的字型更好好看,那麼是否要一個個圖檔去拼成數字呢?

NGUI建立圖檔字

準備材料

美術提供的數字圖檔

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

BMFont 字型制作軟體

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

美術資源處理

1、使用BmFont先導出一張隻有數字的圖檔字,會得到兩個檔案

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

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、通過觀察上面的這段文本,其中的規律為

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

查找字元ID

其中字元的id可以通過BMFont得到,滑鼠移動到一個字元上,右下角即會顯示會該字元的ID,如下圖檔所示,選擇0,右下角Id為48

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

制作NGUI字型prefab

5、根據規律修改BMFont導出的檔案後,把 xxx.txt導入到Unity中,就可以使用NGUI的Font Maker制作圖檔字了

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

遇到問題?

6、字型Prefab制作好之後,如果遇到字型丢失,可以重新拖入字型資訊txt

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

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      

圖檔字效果

根據美術提供的這張圖,程式調試出字型資訊檔案參數,就可以換使用圖檔字型一樣啦

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法

注意事項

建議

  • 美術出的圖每兩個字之間間距為2px,或根據實際情況
  • 數字從0開始,9結束(否則請修改文本的字元id)
  • 圖檔建議為png,帶透明通道

確定事項

  • 一定要確定每兩個字之間的間距相等

單張數字圖處理

如果是美術給的是單張的圖檔,可以參考下面這篇部落格 http://blog.csdn.net/keshuiyun/article/details/9960667

NGUI和UGUI圖檔字 藝術字(Bitmap圖檔轉文字)制作方法
上一篇: Django 中間件