UGUI制作与运用美术字体

最新推荐文章于 2023-05-04 16:16:13 发布

dk_0520

最新推荐文章于 2023-05-04 16:16:13 发布

阅读量438

点赞数

分类专栏： Unity

Unity 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在Unity中使用BMFont工具制作并应用位图字体到UGUI Text控件，包括道具准备、字体导出及代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在游戏的制作中，美术字的运用是美化游戏的常用手段。比如普攻，暴击打出的战斗飘字就常常利用不同的美术字来做出区别。那么在Unity中如何把美术字运用起来呢?且看下文：

1、道具准备。
BMFont：位图字体制作工具。这是我收藏的一个，下载地址：http://pan.baidu.com/s/1pKs8bMz
安装好之后，打开位图字体制作工具，长这样的：
这里写图片描述
菜单栏上单击 Edit -> Open Image Manager

打开之后长这样的：

再单击 Image -> Import image,把你要做成位图字体的图片依次导入进来。

注意下这个：
这个Id填的是你导入数字的ASCII，我导入的是数字 “0” 所以我填48。
每当你成功导入一个数字，在背后的字符面板相应数字框的右下角都会有一个亮起的小点点。若导入不成功，则可能是因为png里png8格式和png24格式是不一样的，若导入图片格式为png8，bmfont是不加载的，因此图片应设置成png24！！！
这里写图片描述

或许你像我一样很懒，觉得这样导入好累好蠢。那你可以马上把这软件关了，然后打开位图制作工具的安装目录并找到名为：bmfont.bmfc 的文件
这里写图片描述

用你喜欢的文本编辑器打开它。打开后它是长这样的：
这里写图片描述

细心的你肯定发现了最后一行的内容，这记录了我刚才导入的数字图片的位置，和一些信息。之后你就会 Ctrl + C，Ctrl+V，。。。，。。。，。。。Ctrl + S,然后这个文件就长这样了：(别问我为什么只弄了两个，懒）

这里写图片描述

在打开工具你就会发现

这里写图片描述

这两个数字已经被成功导入了。（别问为什么，反正偷懒的目的达到了就行）
到此，我需要的 0,1,2数字都已经完全导入，接下来就是要导出。
导出之前先要设置一些参数

这里写图片描述

设置完了之后：

这里写图片描述

给好名字后将得到两个文件：

这里写图片描述

这样我们的位图字体就制作完成了。接下来让我们把这位图字体运用到UGUI的Text控件里去。
2、应用位图字体

把刚才得到的两个文件导入到unity合适的目录中。
先在Unity里创建一个自定义字体MyFont，和一个空的材质球MyFont，材质球的shader用UI/Default Font。

这里写图片描述

只要我们把MyFont里的Default Material 和 Character Rects 用上我们刚制作好的字体信息即可。下面写代码验证：

using UnityEngine;
using System.Collections.Generic;
using UnityEditor;
using System.IO;
using System.Xml;

public class BMFont {
    [MenuItem("Tools/Font")]
    static void Font()
    {
        Material mtr = Resources.Load<Material>("Fonts/MyFont"); //把我们创建的材质球加载进来
        Texture2D texture = Resources.Load<Texture2D>("Fonts/MyFont_0"); //把我们在位图制作工具生成的图片加载进来
        mtr.SetTexture(0, texture);//把图片赋给材质球

        Font font = Resources.Load<Font>("Fonts/MyFont"); //把我们创建的字体加载进来
        XmlDocument xml = new XmlDocument();
        xml.Load(Application.dataPath + "/Resources/Fonts/MyFont.fnt");//这是在BMFont里得到的那个.fnt文件,因为是xml文件，所以我们就用xml来解析
        List<CharacterInfo> chtInfoList = new List<CharacterInfo>();
        XmlNode node = xml.SelectSingleNode("font/chars");
        foreach (XmlNode nd in node.ChildNodes)
        {
            XmlElement xe = (XmlElement)nd;
            int x = int.Parse(xe.GetAttribute("x"));
            int y = int.Parse(xe.GetAttribute("y"));
            int width = int.Parse(xe.GetAttribute("width"));
            int height = int.Parse(xe.GetAttribute("height"));
            int advance = int.Parse(xe.GetAttribute("xadvance"));
            CharacterInfo chtInfo = new CharacterInfo();
            float texWidth = texture.width;
            float texHeight = texture.width;

            chtInfo.glyphHeight = texture.height;
            chtInfo.glyphWidth = texture.width;
            chtInfo.index = int.Parse(xe.GetAttribute("id"));
            //这里注意下UV坐标系和从BMFont里得到的信息的坐标系是不一样的哦，前者左下角为（0,0），
            //右上角为（1,1）。而后者则是左上角上角为（0,0），右下角为（图宽，图高）
            chtInfo.uvTopLeft = new Vector2((float)x / texture.width, 1 - (float)y / texture.height);
            chtInfo.uvTopRight = new Vector2((float)(x + width) / texture.width, 1 - (float)y / texture.height);
            chtInfo.uvBottomLeft = new Vector2((float)x / texture.width,1 - (float)(y + height) / texture.height);
            chtInfo.uvBottomRight = new Vector2((float)(x + width) / texture.width,1 - (float)(y + height) / texture.height);

            chtInfo.minX = 0;
            chtInfo.minY = -height;
            chtInfo.maxX = width;
            chtInfo.maxY = 0;

            chtInfo.advance = advance;

            chtInfoList.Add(chtInfo);
        }
        font.characterInfo = chtInfoList.ToArray();
        AssetDatabase.Refresh();
    }
}

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55