unity5.5 ugui使用美術字

文件轉載自：http://www.jianshu.com/p/a4e6d1ca3ca0

 

項目需要使用美術字加強戰斗效果表現，按以往NGUI的使用經驗，這個應該很簡單，隨便Google一下都有數篇技術博客，比如這篇Unity教程之-UGUI美術字體的制作與使用。

按照博客操作了一遍，發現字體沒有顯示，然后又核對了一下流程，發現操作沒問題，結果還是沒有顯示文字。經過一番折騰，原來是字體生成時使用的api在5.5版本已被棄用

ArtistFont.cs:

CharacterInfo info = new CharacterInfo();
info.index = bmInfo.index;
info.uv.x = (float)bmInfo.x / (float)mbFont.texWidth;
info.uv.y = 1 - (float)bmInfo.y / (float)mbFont.texHeight;
info.uv.width = (float)bmInfo.width / (float)mbFont.texWidth;
info.uv.height = -1f * (float)bmInfo.height / (float)mbFont.texHeight;
info.vert.x = (float)bmInfo.offsetX;
info.vert.y = (float)bmInfo.offsetY;
info.vert.width = (float)bmInfo.width;
info.vert.height = (float)bmInfo.height;
info.width = (float)bmInfo.advance;

CharacterInfo：

[Obsolete ("CharacterInfo.uv is deprecated. Use uvBottomLeft, uvBottomRight, uvTopRight or uvTopLeft instead.")]
public Rect uv;

[Obsolete ("CharacterInfo.vert is deprecated. Use minX, maxX, minY, maxY instead.")]
public Rect vert;

由於api被棄用，實際的字符信息並沒有寫入字體文件，這樣當然不會顯示字體了。

接下來的方向就是用uvBottomLeft, uvBottomRight, uvTopRight， uvTopLeft代替uv，minX, maxX, minY, maxY代替vert輸出對應字符信息。目標是很明確，但過程非常曲折，折騰了很久還是沒搞懂具體的寫法，借助萬能的Google，我找到了這篇文章Unity的UGUI中使用CustomFont(BMFont)，上核心代碼：

CharacterInfo info = new CharacterInfo();  
info.index = id;  
float uvx = 1f*x/texWidth;  
float uvy = 1 - (1f*y/texHeight);  
float uvw = 1f*width/texWidth;  
float uvh = -1f*height/texHeight;  

info.uvBottomLeft = new Vector2(uvx, uvy);  
info.uvBottomRight = new Vector2(uvx + uvw, uvy);  
info.uvTopLeft = new Vector2(uvx, uvy + uvh);  
info.uvTopRight = new Vector2(uvx + uvw, uvy + uvh);  

info.minX = xoffset;  
info.minY = yoffset + height / 2;   // 這樣調出來的效果是ok的，原理未知  
info.glyphWidth = width;  
info.glyphHeight = -height; // 同上，不知道為什么要用負的，可能跟unity紋理uv有關  
info.advance = xadvance;

看注釋也知道該博主同樣是一臉懵逼，但也還是很牛逼地把邏輯擼出來了。參考了這段代碼，其實基本是照抄，那為啥是叫參考呢？因為還不能完全適用，要把代碼改一下才能正確顯示效果

info.minY = yoffset + height

終於能夠把文字顯示出來了：

屏幕快照 2017-03-24 21.21.03.png

興奮吶！！！但是明明輸入了5個0，為什么才顯示一個數字呢？？？原來字符重疊了。。。繼續萬能的谷歌，我找到了相同問題的發帖[問答] unity5.3版本內UGUI制作美術字重疊怎么破,同樣我也找到了一萬頭草泥馬在內心狂奔的回答

屏幕快照 2017-03-24 21.27.21.png

還好有了之前UGUI圖文混排的經驗，繼承Text修改頂點位置就能讓字體正常顯示

屏幕快照 2017-03-24 21.38.00.png

附上工程源碼下載

unity

作者：dumpling2017
鏈接：http://www.jianshu.com/p/a4e6d1ca3ca0
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。