UGUI运用美术字体

转自博主:很强大: http://blog.csdn.net/akak2010110/article/details/50755270

UGUI运用美术字体

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

1、道具准备。 
BMFont:位图字体制作工具。这是我收藏的一个,下载地址:http://pan.baidu.com/s/1pKs8bMz 
安装好之后,打开位图字体制作工具,长这样的: 
这里写图片描述 
菜单栏上单击 Edit -> Open Image Manager 
这里写图片描述 
打开之后长这样的: 
这里写图片描述 
再单击 Image -> Import image,把你要做成位图字体的图片依次导入进来。 
这里写图片描述 
注意下这个: 
这个Id填的是你导入数字的ASCII,我导入的是 数字 “0” 所以我填48。 
每当你成功导入一个数字,在背后的字符面板相应数字框的右下角都会有一个亮起的小点点。 
这里写图片描述

或许你像我一样很懒,觉得这样导入好累好蠢。那你可以马上把这软件关了,然后打开 位图制作工具的安装目录并找到名为: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
  • 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

好的,代码写好了,就可以到Unity里验证了(以上代码仅是验证代码,请捡而用之)。切回Unity,点击 Tools/Font

这里写图片描述

再看看我们刚创建的材质球

这里写图片描述

说明图片已给上。和字体MyFont

这里写图片描述

MyFont的Character Rects信息也有了,再把材质球拖到MyFont的Default Material中

这里写图片描述

到此,一切就准备就绪了,激动时刻到来了。在Hierarchy里创建一个Text控件

这里写图片描述

并把MyFont拖到Text的Font中

这里写图片描述

修改文本为 0~2的数字(因为就只做了0,1,2),并把Text的颜色值调到最左上角,效果出现了

这里写图片描述

这里写图片描述

完了!!!! 
(接下来研究研究BMFont的使用命令行来制作字体,这样就可以完全自动化了,充分解放本人的懒惰基因。有成果了放出来)

unity测试版本:5.3.0f4

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值