Unity实战篇：使用图片制作自己的艺术字

以你之姓@ 2022-02-15 05:30 379阅读 0赞

**本篇博客我将和大家一起从零开始根据图片制作自己的艺术字（不包括汉字）**

**准备工作：**

*  **BMFront [http://www.angelcode.com/products/bmfont/][http_www.angelcode.com_products_bmfont]**
 *  **编写艺术字体生成工具**

//------------------------------------------------------------
    // Author: 烟雨迷离半世殇
    // Mail: 1778139321@qq.com
    // Data: 2019年4月23日 21:24:10
    //------------------------------------------------------------
    
    using UnityEngine;
    using UnityEditor;
    using System.Collections.Generic;
    using System.IO;
    using Path = PF.Path;
    
    namespace ETEditor
    {
        public class BMFontEditor: EditorWindow
        {
            public TextAsset fontPosTbl;
            public Texture fontTexture;
            public Vector2 scrollPos;
    
            struct ChrRect
            {
                public int id;
                public int x;
                public int y;
                public int w;
                public int h;
                public int xofs;
                public int yofs;
    
                public int index;
                public float uvX;
                public float uvY;
                public float uvW;
                public float uvH;
                public float vertX;
                public float vertY;
                public float vertW;
                public float vertH;
                public float width;
            }
    
            // add menu
            [MenuItem("Tools/自定义字体生成工具")]
            static void Init()
            {
                EditorWindow.GetWindow(typeof (BMFontEditor));
            }
    
            // layout window
            void OnGUI()
            {
                EditorGUILayout.BeginVertical();
                EditorGUILayout.LabelField("图集导出文件部分（如果字体相关资源已经准备完毕，请忽略这一部分）", EditorStyles.label);
                if (GUILayout.Button("在Project视图选中要导出文件的图集，然后点击此按钮"))
                {
                    this.ProcessToSprite();
                }
                EditorGUILayout.Space();
                EditorGUILayout.Space();
                EditorGUILayout.Space();
                EditorGUILayout.LabelField("正式生成艺术字部分", EditorStyles.label);
    
                fontTexture = (Texture) EditorGUILayout.ObjectField("选择BMFont生成的png文件", fontTexture, typeof (Texture), false);
    
                EditorGUILayout.Space();
    
                EditorGUILayout.LabelField("选择BMFont生成的fnt文件", EditorStyles.label);
    
                fontPosTbl = (TextAsset) EditorGUILayout.ObjectField("    ", fontPosTbl, typeof (TextAsset), false);
                if (GUILayout.Button("开始生成字体"))
                {
                    if (fontTexture == null) this.ShowNotification(new GUIContent("No Font Texture selected"));
                    else if (fontPosTbl == null) this.ShowNotification(new GUIContent("No Font Position Table file selected"));
                    else
                    {
                        CalcChrRect(fontPosTbl, fontTexture);
                    }
                }
    
                EditorGUILayout.EndVertical();
            }
    
            private void ProcessToSprite()
            {
                Texture2D image = Selection.activeObject as Texture2D;//获取选择的对象
                
                string rootPath = System.IO.Path.GetDirectoryName(AssetDatabase.GetAssetPath(image));//获取路径名称
                
                string path = rootPath + "/" + image.name + ".PNG";//图片路径名称
        		
                TextureImporter texImp = AssetImporter.GetAtPath(path) as TextureImporter;//获取图片入口
        		
        		
                AssetDatabase.CreateFolder(rootPath, image.name);//创建文件夹
        		
        		
                foreach (SpriteMetaData metaData in texImp.spritesheet)//遍历小图集
                {
                    Texture2D myimage = new Texture2D((int)metaData.rect.width, (int)metaData.rect.height);
        			
                    for (int y = (int)metaData.rect.y; y < metaData.rect.y + metaData.rect.height; y++)//Y轴像素
                    {
                        for (int x = (int)metaData.rect.x; x < metaData.rect.x + metaData.rect.width; x++)
                            myimage.SetPixel(x - (int)metaData.rect.x, y - (int)metaData.rect.y, image.GetPixel(x, y));
                    }
        			
        			
                    if(myimage.format != TextureFormat.ARGB32 && myimage.format != TextureFormat.RGB24){
                        Texture2D newTexture = new Texture2D(myimage.width, myimage.height);
                        newTexture.SetPixels(myimage.GetPixels(0),0);
                        myimage = newTexture;
                    }
                    var pngData = myimage.EncodeToPNG();
        			
                    File.WriteAllBytes(rootPath + "/" + image.name + "/" + metaData.name + ".PNG", pngData);
                    // 刷新资源窗口界面
                    AssetDatabase.Refresh();
                }
            }
            
            void OnInspectorUpdate()
            {
                this.Repaint();
            }
    
            void CalcChrRect(TextAsset posTbl, Texture tex)
            {
                string fileName = AssetDatabase.GetAssetPath(fontPosTbl);
                string texName = AssetDatabase.GetAssetPath(tex);
                string fontName = System.IO.Path.GetFileNameWithoutExtension(fileName);
                string fontPath = fileName.Replace(".fnt", ".fontsettings");
                string matPath = fileName.Replace(".fnt", ".mat");
                float imgw = tex.width;
                float imgh = tex.height;
                string txt = posTbl.text;
    
                List<ChrRect> tblList = new List<ChrRect>();
                foreach (string line in txt.Split('\n'))
                {
                    if (line.IndexOf("char id=") == 0)
                    {
                        ChrRect d = GetChrRect(line, imgw, imgh);
                        tblList.Add(d);
                    }
                }
    
                if (tblList.Count == 0)
                {
                    new GUIContent("Failed");
                    return;
                }
    
                ChrRect[] tbls = tblList.ToArray();
                Font font = new Font();
                font.name = fontName;
                SetCharacterInfo(tbls, font);
    
                Material mat = new Material(Shader.Find("UI/Default"));
                mat.mainTexture = tex;
                mat.name = fontName;
                font.material = mat;
    
                Debug.Log(System.IO.Path.GetFileNameWithoutExtension(fileName));
                Debug.Log(fileName);
    
                AssetDatabase.CreateAsset(mat, matPath);
                AssetDatabase.CreateAsset(font, fontPath);
                AssetDatabase.SaveAssets();
                this.ShowNotification(new GUIContent("Complete"));
                AssetDatabase.Refresh(ImportAssetOptions.ForceUpdate);
            }
    
            // over write custom font by new CharacterInfo
            void SetCharacterInfo(ChrRect[] tbls, Font fontObj)
            {
                CharacterInfo[] nci = new CharacterInfo[tbls.Length];
                for (int i = 0; i < tbls.Length; i++)
                {
                    nci[i].index = tbls[i].index;
                    nci[i].advance = (int) tbls[i].width;
                    nci[i].uv.x = tbls[i].uvX;
                    nci[i].uv.y = tbls[i].uvY;
                    nci[i].uv.width = tbls[i].uvW;
                    nci[i].uv.height = tbls[i].uvH;
                    nci[i].vert.x = tbls[i].vertX;
                    nci[i].vert.y = tbls[i].vertY;
                    nci[i].vert.width = tbls[i].vertW;
                    nci[i].vert.height = tbls[i].vertH;
                }
    
                fontObj.characterInfo = nci;
            }
    
            // get font table one line. 重点在这
            ChrRect GetChrRect(string line, float imgw, float imgh)
            {
                ChrRect d = new ChrRect();
    
                foreach (string s in line.Split(' '))
                {
                    if (s.IndexOf("id=") >= 0) d.id = GetParamInt(s, "id=");
                    else if (s.IndexOf("x=") >= 0) d.x = GetParamInt(s, "x=");
                    else if (s.IndexOf("y=") >= 0) d.y = GetParamInt(s, "y=");
                    else if (s.IndexOf("width=") >= 0) d.w = GetParamInt(s, "width=");
                    else if (s.IndexOf("height=") >= 0) d.h = GetParamInt(s, "height=");
                    else if (s.IndexOf("xoffset=") >= 0) d.xofs = GetParamInt(s, "xoffset=");
                    else if (s.IndexOf("yoffset=") >= 0) d.yofs = GetParamInt(s, "yoffset=");
                    else if (s.IndexOf("xadvance=") >= 0) d.width = GetParamInt(s, "xadvance=");
                }
    
                d.index = d.id;
                d.uvX = d.x / imgw;
                d.uvY = (imgh - (d.y)) / imgh;
                d.uvW = d.w / imgw;
                d.uvH = -d.h / imgh;
                d.uvH = d.h / imgh;
    
                d.vertX = d.xofs;
                d.vertY = -d.yofs;
                d.vertW = d.w;
                d.vertH = d.h;
    
                return d;
            }
    
            int GetParamInt(string s, string wd)
            {
                if (s.IndexOf(wd) >= 0)
                {
                    int v;
                    if (int.TryParse(s.Substring(wd.Length), out v)) return v;
                }
    
                return int.MaxValue;
            }
        }
    }

### 正式开始  ###

**选择要制作字体的图片，并分割好sprites**

![20190423222323536.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70][]

**打开****自定义字体生成工具，根据说明生成图集文件**

![20190425120914581.png][]

**打开BMFront工具**

![20190423222454868.png][]

![20190423222524219.png][]

![20190423222535620.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 1][]

![20190423222620775.png][]

**注意填写图片对应的Ascall码，0-48，1-49.。。。以此类推，不知道的可以百度，按照表对着填**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 2][]

![2019042322301653.png][]

**全部填写完毕**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 3][]

![20190423231121904.png][]

**打开Unity**

![20190423231140545.png][]

**这时候我们要修改一下BMFront生成的位图文件**

**如下（不要问我为什么，因为我也不知道）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 4][]

**因为我们使用了镜像模式，所以y轴的值需要翻转，修改翻转y轴的值（原本是37，这里要改成-37）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 5][]

**再打开自定义字体生成工具，根据说明添加png和fnt文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 6][]

**在场景新建Text**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 8][]

**OK**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 9][]

[http_www.angelcode.com_products_bmfont]: http://www.angelcode.com/products/bmfont/
[20190423222323536.png]: /images/20220215/713d98fe3d944e7698cb8bd3f3f56824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70]: /images/20220215/8fcf265c074c40e1add793dab23c34c3.png
[20190425120914581.png]: /images/20220215/679f55b1ece14fe1aba5b0f2d96dfc99.png
[20190423222454868.png]: /images/20220215/9fd303c438fb419fbc759c2e99ae7d99.png
[20190423222524219.png]: /images/20220215/61574e4b767945fc87dad0d2a6eaa9ec.png
[20190423222535620.png]: /images/20220215/3cd261750a8e46f58eb4f73e8e866ce7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 1]: /images/20220215/7ae7ebc0028c435e8cc2486938c1df73.png
[20190423222620775.png]: /images/20220215/12c42d83c47947da9e5329a8c55206ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 2]: /images/20220215/6c291cf3d37640ad8964b542962e6295.png
[2019042322301653.png]: /images/20220215/cf51bd55dbfb41a4b2d177a0d6eaf620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 3]: /images/20220215/d77bad4049e34629a147946b82bde58f.png
[20190423231121904.png]: /images/20220215/04f300be91ae469096d9ff5cfd99dcec.png
[20190423231140545.png]: /images/20220215/7f1942f22a0447e4a3937757cef00575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 4]: /images/20220215/5dc83cf6cf784ba68197f1e9deb3f8a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 5]: /images/20220215/e1e36035601c4f4b8e6eeac61766f68b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 6]: /images/20220215/f0ea4b1ae6554c8b9077515cb2169e58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 7]: /images/20220215/597f2df4f9dc48c1ac4636593ceb44b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 8]: /images/20220215/b4be8b2ee10c47488e8c29f73182f0da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1MDIwNTQz_size_16_color_FFFFFF_t_70 9]: /images/20220215/95378aabf22b4b2f82c7692d74c2dc71.png