Unity UGUI 數字使用圖片顯示-BMFont

BMFont

之前使用Cocos引擎的時候需要用到藝術字也就是將數字使用美術給的圖片來代替顯示，也就是要做一個新字體專門用來顯示藝術字，當時用的是BMFont來制作字體。那么問題來了，在Unity下面的UGUI能否使用呢？答案當然是OK的啦。

下面我們來看下如何使用BMFont。

從網站https://www.angelcode.com/products/bmfont/下載并安裝BMFont軟件。

制作

我們通過菜單欄“Edit/Open Image Manager”來選擇需要做藝術字的圖片。

打開之后選擇”Image/Import image“

點擊”Browse“按鈕選擇數字0的png圖片，然后在Id一欄填寫該數字的Id也就是如下的箭頭所示的48，即數字0的ASCII碼。

點擊OK就會將圖片給導入進來。

導入的圖片不顯示

但是需要注意這個時候可能會出現點擊之后Image Manager面板里面并沒有出現剛才加載的圖片。這里是美術給的圖片格式不對，我們需要將png圖片修改為PNG-24格式的。打開PS加載出對應點png圖片，然后菜單欄選擇“文件/存儲為Web所用格式”。

在彈出的面板圖中所示的位置選擇PNG-24格式，點擊存儲即可。

我們依次添加完所有的數字png圖片之后，在BMFont的菜單欄“Options/Export options”里面設置一下導出的參數。

圖片的Width和Height可以自己根據里面的圖片大小自己設置（設置好之后可以不必著急關閉窗口，在導出時候查看生產的所有的數字合并之后的圖片大小是否合適，里面的數字排版是否緊湊。一開始設置大了或者小了，后面還可以修改大小，重新導出）。

下面的Font description 更改為XML，后面需要根據這個格式生成對應的字體文件。然后Texture格式設置為png。點擊Ok即可。接下來就是回到BMFont的菜單欄選擇“Options/Save bitmap font as…”即可保存出Score.fnt文件，同時生成的還有一個對應的png大圖。

我們將生成的Score.fnt和Score_0.png一起放入Unity中，然后新建一個BitmapFontExporter.cs文件放入Unity的Editor目錄，代碼如下：

using UnityEngine; using UnityEditor; using System.IO; using System.Xml; using System;public class BitmapFontExporter : ScriptableWizard {[MenuItem("BitmapFontExporter/Create")]private static void CreateFont(){ScriptableWizard.DisplayWizard<BitmapFontExporter>("Create Font");}public TextAsset fontFile;public Texture2D textureFile;private void OnWizardCreate(){if (fontFile == null || textureFile == null){return;}string path = EditorUtility.SaveFilePanelInProject("Save Font", fontFile.name, "", "");if (!string.IsNullOrEmpty(path)){ResolveFont(path);}}private void ResolveFont(string exportPath){if (!fontFile) throw new UnityException(fontFile.name + "is not a valid font-xml file");Font font = new Font();XmlDocument xml = new XmlDocument();xml.LoadXml(fontFile.text);XmlNode info = xml.GetElementsByTagName("info")[0];XmlNodeList chars = xml.GetElementsByTagName("chars")[0].ChildNodes;CharacterInfo[] charInfos = new CharacterInfo[chars.Count];for (int cnt = 0; cnt < chars.Count; cnt++){XmlNode node = chars[cnt];CharacterInfo charInfo = new CharacterInfo();charInfo.index = ToInt(node, "id");charInfo.width = ToInt(node, "xadvance");charInfo.uv = GetUV(node);charInfo.vert = GetVert(node);charInfos[cnt] = charInfo;}Shader shader = Shader.Find("Unlit/Transparent");Material material = new Material(shader);material.mainTexture = textureFile;AssetDatabase.CreateAsset(material, exportPath + ".mat");font.material = material;font.name = info.Attributes.GetNamedItem("face").InnerText;font.characterInfo = charInfos;AssetDatabase.CreateAsset(font, exportPath + ".fontsettings");}private Rect GetUV(XmlNode node){Rect uv = new Rect();uv.x = ToFloat(node, "x") / textureFile.width;uv.y = ToFloat(node, "y") / textureFile.height;uv.width = ToFloat(node, "width") / textureFile.width;uv.height = ToFloat(node, "height") / textureFile.height;uv.y = 1f - uv.y - uv.height;return uv;}private Rect GetVert(XmlNode node){Rect uv = new Rect();uv.x = ToFloat(node, "xoffset");uv.y = ToFloat(node, "yoffset");uv.width = ToFloat(node, "width");uv.height = ToFloat(node, "height");uv.y = -uv.y;uv.height = -uv.height;return uv;}private int ToInt(XmlNode node, string name){return Convert.ToInt32(node.Attributes.GetNamedItem(name).InnerText);}private float ToFloat(XmlNode node, string name){return (float)ToInt(node, name);} }

然后我們在Unity的菜單欄選擇“BitmapFontExporter/Creat”即可打開字體創建面板。

在打開的面板中將生成的XML文件和png大圖拖拽進去，點擊Create按鈕即可生成Score字體。

在Unity中可以看到這張png大圖里面的所有數字的排列緊湊程度，也就是上面提到的。

原理

Unity提供了一個自定義字體的方法，在Unity中右鍵“Create/Custom Font“會生成一個自定義的字體，不過需要我們手動去填寫字體對應的材質球和Character Rects。size大小表示有多少個藝術字，然后要在每個Element里面的index填寫字符對應的ASCII碼，還要填寫對應的UV和Vert。

不過這個過程相當繁瑣，所以通過代碼來完成這一步驟。原理很簡單，就是將BMFont生成出來的XML配置文件讀取出來，依次填寫進去即可。

使用

在UGUI的Text組件里面選擇剛才生成的字體拖拽進去即可，具體如下

參考：https://tedsieblog.wordpress.com/category/unity-ugui/

總結

以上是生活随笔為你收集整理的Unity UGUI 数字使用图片显示-BMFont的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。