天天看點

[UGUI]UGUI使用圖檔文字(Custom Font)

  1. 如果你需要為NGUI導出素材,建議從開頭開始看,如果是為UGUI導出字型素材,可以直接跳到第7步。
  2. 先清理一遍Character。 方法: Edit>Clear all chars in font
  3. 在BMFont中逐個導入貼圖(在此以數字0~9為例):Edit>Open Image Manager. 點選Image>Import Image。不能批量導入,也不能批量編輯,雖然是免費的,但這軟體做的也太他媽傻逼了,但問題就在于還沒有更好的替代品,也隻能忍了
  4. 設定好ID,這裡的ID就是ASCII碼,例如0是48,1是49,以此類推。可以在BMFont的字元視窗看到ID,滑鼠懸停的字元,右下角有一對數字,前者即ASCII碼(後者是Unicode碼)
  5. Options>Export Options裡設定貼圖大小(大小自己看着給,2的N次方尺寸,多試幾次,用Options>Visualize來預覽,不要浪費,更不要一張圖裝不下,生成了兩張),Padding和Spacing設定為0(是以在做貼圖的時候要留點空白邊).
  6. 導出Font,會生成兩個檔案,一個fnt,一個圖檔,fnt可以為NGUI所用,這裡就不多說了,UGUI中使用的Custom Font隻能用到圖檔。
  7. BMFont的工作至此技術,下面的都是在Unity中的操作。其實不用BMFont也可以做這個工作,直接在Photoshop裡按照固定的尺寸和網格把圖檔依次排列也可以達到這個效果,因為後面我們隻需要一張PNG的圖檔。
  8. 把PNG圖檔導入Unity工程
  9. 建立材質球,使用Unlit>Transparent材質,關聯上述貼圖
  10. 建立Custom Font,将上述材質球關聯到Default Material中。
  11. 先将Character Rects的size設定為1,然後設定第一個元素的參數
  12. Index為字元的Ascii碼,例如0為48. 本例中還有個辦法,可以設定Custom font的Ascii Start Offset為48,然後從0-9的Index依次設定成0-9,結果是完全一樣的。

    Uv:整張貼圖左下角為(0,0)點,右上為(1,1)點,是以如果是一個尺寸為256*256的圖檔,劃分方式是4*4,那麼第一個物體的Uv是這樣的: X:0 Y:0.75 W:0.25 H:0.25 (Y是0.75因為是從下往上數,第一個字元的圖檔左下角的Y位于3/4處。寬度和高度是0.25,因為每個字元的寬和高都占據了整張圖寬和高的1/4,其他Uv劃分方法的圖檔類推,不多解釋了)

    Vert是實際尺寸和偏移,X:0 Y:0 W:64 H:-64 偏移為0,像素寬是64,注意,高度是-64,至于為什麼是負數,應該也是從左下角往右上角開始算起。(不得不說這個設定也很二,非要很别扭的填一個負數)

    Width是64(說實話不明白這裡為什麼又填寫一次寬度)

  13. 第一個填寫好以後,再把Character Rects的Size改成需要的字元數量,本例為10。這樣新增的字元都會複制第一個字元的設定。隻需要改動Index和Uv中的Y了。
  14. 設定好字型以後,建立一個Text,關聯上一步的字型,還要設定Material為第9步建立的材質(這樣才能正确顯示字型效果)。之後就可以輸入你建立的自定義字型了,當然,隻能顯示你建立了的字元,本例中是0~9。整個過程非常低效,期待有增強插件出現