本文内容

开发过程有个很常见的需求：使用美术提供的图片来表现美术字体。

Unity官方为此提供了一个自定义字体，用于在UI上显示图片字体，具体各参数意义可以参考https://docs.unity3d.com/2022.2/Documentation/Manual/class-Font.html。

效果

如下，我们可以很自由的展示图片字体。

工具代码

using System.Collections.Generic;
using System.IO;
using UnityEditor;
using UnityEngine;public class CrisFontWindow: EditorWindow
{private string fontPath = "Assets/crisFont.fontsettings";private Font font;private Rect[] rects;private TextAsset characterCfg;void OnGUI(){GUILayout.BeginVertical();GUILayout.BeginHorizontal();GUILayout.Label("字体：", GUILayout.Width(100.0f));font = (Font)EditorGUILayout.ObjectField(font, typeof(Font), true);GUILayout.EndHorizontal();if (font == null){EditorGUILayout.BeginHorizontal();GUILayout.Label("字体路径", GUILayout.Width(100));fontPath = GUILayout.TextField(fontPath);EditorGUILayout.EndHorizontal();if (GUILayout.Button("新建字体")){Font newFont = new Font();try{AssetDatabase.CreateAsset(newFont, fontPath);font = AssetDatabase.LoadAssetAtPath<Font>(fontPath);}catch{}if (font == null) Debug.LogError("路径错误：" + fontPath);}}else{GUILayout.BeginHorizontal();GUILayout.Label("字体配置：", GUILayout.Width(100.0f));characterCfg = (TextAsset)EditorGUILayout.ObjectField(characterCfg, typeof(TextAsset), true);GUILayout.EndHorizontal();GUILayout.Label("请选中需要打入的字体文件");GUILayout.BeginHorizontal();if (GUILayout.Button("更新文本")) UpdateFont();GUILayout.EndHorizontal();}GUILayout.EndVertical();}void UpdateFont(){string fontPath = AssetDatabase.GetAssetPath(font);string fontDir = Path.GetDirectoryName(fontPath);var texSavePath = Path.Combine(fontDir, Path.GetFileNameWithoutExtension(fontPath) + ".png");CombineTexture(texSavePath);var tex = AssetDatabase.LoadAssetAtPath<Texture2D>(texSavePath);if (tex == null) Debug.LogError("未发现生成的图集");var matPath = Path.Combine(fontDir, Path.GetFileNameWithoutExtension(fontPath) + ".mat");var mat = AssetDatabase.LoadAssetAtPath<Material>(matPath);if (mat == null){var newMat = new Material(Shader.Find("GUI/Text Shader"));AssetDatabase.CreateAsset(newMat, matPath);mat = newMat;}mat.SetTexture("_MainTex", tex);EditorUtility.SetDirty(mat);var list = new List<CharacterInfo>();float maxHeight = 0;for (int i = 0; i < rects.Length; i++){if (rects[i].height > maxHeight) maxHeight = rects[i].height;}for (int i = 0; i < rects.Length; i++){Rect rect = ConvertToPixels(rects[i], tex.width, tex.height);int asciiIndex = ac[i];var charInfo = new CharacterInfo();charInfo.index = asciiIndex;Rect uv = ConvertToTexCoords(rect, tex.width, tex.height);charInfo.uvBottomLeft = new Vector2(uv.x, uv.y);charInfo.uvTopLeft = new Vector2(uv.x, uv.y + uv.height);charInfo.uvBottomRight = new Vector2(uv.x + uv.width, uv.y);charInfo.uvTopRight = new Vector2(uv.x + uv.width, uv.y + uv.height);charInfo.minX = 0;charInfo.maxX = (int)rect.width;charInfo.minY = (int)(tex.height / 2 - (maxHeight - rect.height) / 2 - rect.height);charInfo.maxY = (int)(tex.height / 2 - (maxHeight - rect.height) / 2);charInfo.advance = (int)rect.width;list.Add(charInfo);}font.material = mat;font.characterInfo = list.ToArray();EditorUtility.SetDirty(font);AssetDatabase.SaveAssets();AssetDatabase.Refresh();Debug.Log("更新成功");}Rect ConvertToPixels(Rect rect, int width, int height){Rect r = rect;r.xMin = Mathf.RoundToInt(rect.xMin * width);r.xMax = Mathf.RoundToInt(rect.xMax * width);r.yMin = Mathf.RoundToInt((1 - rect.yMax) * height);r.yMax = Mathf.RoundToInt((1 - rect.yMin) * height);return r;}Rect ConvertToTexCoords(Rect rect, int width, int height){Rect r = rect;if (width != 0 && height != 0){r.xMin = rect.xMin / width;r.xMax = rect.xMax / width;r.yMin = 1 - rect.yMax / height;r.yMax = 1 - rect.yMin / height;}return r;}List<int> ac = new List<int>();void CombineTexture(string texSavePath){ac.Clear();int num = Selection.objects.Length;if (num <= 0){Debug.LogError("请选中需要合并的数字图片");return;}Dictionary<string, object> cfgDic = null;if (characterCfg != null){cfgDic = MiniJSON.Json.Deserialize(characterCfg.text) as Dictionary<string, object>;}for (int i = 0; i < num; ++i){Texture2D tex = Selection.objects[i] as Texture2D;string name = Path.GetFileNameWithoutExtension(tex.name);if (cfgDic != null && cfgDic.ContainsKey(name))ac.Add((int)(cfgDic[name].ToString()[0]));elseac.Add((int)(name[0]));}Texture2D r = new Texture2D(2, 2, TextureFormat.RGBA32, false);Texture2D[] textures = new Texture2D[num];for (int i = 0; i < num; i++){Texture2D tex = Selection.objects[i] as Texture2D;textures[i] = tex;}rects = r.PackTextures(textures, 1);r.Apply();SaveTexture(r, texSavePath);}void SaveTexture(Texture2D texture, string path){if (texture == null) return;File.WriteAllBytes(path, texture.EncodeToPNG());AssetDatabase.ImportAsset(path);AssetDatabase.Refresh();}[MenuItem("CrisTools/UI/美术字体", false, 1102)]public static void OpenWin(){EditorWindow.GetWindow<CrisFontWindow>("美术字体");}
}

制作美术字体

1 资源

1.1 资源方式

美术提供所有字的单个图片，大小一致

重点注意：单个图片必须打开读写和关闭压缩，否则会出现打包失败或打包卡死的情况。

1.2 资源命名

图片名字使用图片对应的字，比如：表示“1”的图片命名就为1,表示“+”的图片命名就为+

1.3 资源命名配置

如果出现图片表示的字不能当做文件名时，则可以使用json配置。
比如表示“%”的图片文件名可以叫做“baifenhao”，“@”的图片叫做“at”，在json配置中
{
“baifenhao”：“%”,
“at”:“@”
}

2 打包字体

2.1 创建字体

如果需创建一个新字体，输入创建字体的路径即可。

如下，我们在测试路径下生成了一个font字体文件。

2.2 更新字体

当创建了一个新字体，或者将一个已有的字体拖到字体框中后，选中碎片资源，就可以对字体进行打包更新了。
注：如有特殊字符，使用了1.3中json配置，则将对应json拖至字体配置选框中。

更新过后，就能得到字体所需的图集和材质了。

3 字体使用

在支持富文本组件的font处选择刚生成的字体文件即可正常使用。

注：笔者的富文本组件包含内容过于繁多，在此就不贴出了。如果有需要且不知道富本文组件怎么制作的，可以使用hub上大佬们写的富文本组件。(https://github.com/wuxiongbin/uHyperText)

Unity自定义美术字体(图片字体fontsettings)相关推荐

Unity制作美术字体、图片转字体库C#
前言:在遇到Unity支持的字体库之外的字体时,可以将每个字的图片集中生成一个字体库,用来Unity文本使用. 一.功能 1.字体图片设置字体图片等比等分在一张图片上,方便Unity系统自处理 2. ...
unity中美术字体的制作
unity中美术字体的制作本次总结:客户端制作美术字体.我已知的两种方式:1.FontSetter插件.2.BMFont工具.这里比较推荐第一种插件,方便.快捷.简单. FontSetter插件 F ...
unity 字体width_unity制作图片字体
有时候美术会给出一系列的艺术字,例如数字0,1,2,3,4,5,6,7,8,9,这些字以图片的形式给开发人员,这时候图片的用法怎么用呢? 第一种想到的方法是把图片按字命名,然后以字为key存成字典,获 ...
unity动态美术字体制作
使用工具bmfont 把需要的文字写到一个文本文件,选择Edit->Select Chars from file. 可以看到文本里的字已经被选中了,然后Edit->Open Image M ...
Unity 自定义字体新功能一
Unity 自定义字体新功能一首先找一个字体库,我用的 Windws 系统,直接找微软的字拿来用, 在目录下 C:\Windows\Fonts 随便找一个字体在此我就拿华为琥珀字体(字体 ...
【游戏开发实战】可爱的动物数字，教你在Unity中自制UGUI艺术字体（位图字体）（Bitmap Font Generator）
文章目录一.前言二.最终效果三.Bitmap Font Generator制作字体 1.准备字体图片 2.下载Bitmap Font Generator 3.bmfont64.exe导入图片 4 ...
【unity 笔记】ugui艺术字体
一.准备工具美术字体图片和bmfont(注意下64位还是32位) 注意:和美术沟通图片大小 ,尽量贴着字切不要留太大缝隙,因为间隔打包出来固定,无法调小间隔,如下图对比这是有缝隙的情况: 这是缝 ...
Android 为应用或Textview设置自定义字体,主流字体包
文章目录前言一.assets是什么? 二.APP全局字体 2.1.引入库 2.2.在Application中初始化calligraphy 2.3.让指定的Activity配置自定义字体 2.3.1 ...
cocos-creator使用记录20_创建数字字体和图片字体
1.官方创建艺术数字字体 http://docs.cocos.com/creator/manual/zh/asset-workflow/label-atlas.html 需要准备一张按从0到9的顺序排 ...

Unity自定义美术字体(图片字体fontsettings)

目录