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。
每当你成功导入一个数字,在背后的字符面板相应数字框的右下角都会有一个亮起的小点点。
![这里写图片描述](https://img-blog.csdn.net/20160227150812987)
或许你像我一样很懒,觉得这样导入好累好蠢。那你可以马上把这软件关了,然后打开 位图制作工具的安装目录并找到名为:bmfont.bmfc 的文件
![这里写图片描述](https://img-blog.csdn.net/20160227150907648)
用你喜欢的文本编辑器打开它。打开后它是长这样的:
![这里写图片描述](https://img-blog.csdn.net/20160227151010973)
细心的你肯定发现了最后一行的内容,这记录了我刚才导入的数字图片的位置,和一些信息。之后你就会 Ctrl + C,Ctrl+V,。。。,。。。,。。。Ctrl + S,然后这个文件就长这样了:(别问我为什么只弄了两个,懒)
![这里写图片描述](https://img-blog.csdn.net/20160227151120457)
在打开工具你就会发现
![这里写图片描述](https://img-blog.csdn.net/20160227151204067)
这两个数字已经被成功导入了。(别问为什么,反正偷懒的目的达到了就行)
到此,我需要的 0,1,2数字都已经完全导入,接下来就是要导出。
导出之前先要设置一些参数
![这里写图片描述](https://img-blog.csdn.net/20160227151251224)
![这里写图片描述](https://img-blog.csdn.net/20160227151346077)
设置完了之后:
![这里写图片描述](https://img-blog.csdn.net/20160227151518641)
给好名字后将得到两个文件:
![这里写图片描述](https://img-blog.csdn.net/20160227151600423)
这样我们的位图字体就制作完成了。接下来让我们把这位图字体运用到UGUI的Text控件里去。
2、应用位图字体
把刚才得到的两个文件导入到unity合适的目录中。
先在Unity里创建一个自定义字体MyFont,和一个空的材质球MyFont,材质球的shader用UI/Default Font。
![这里写图片描述](https://img-blog.csdn.net/20160227152427419)
只要我们把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")
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
好的,代码写好了,就可以到Unity里验证了(以上代码仅是验证代码,请捡而用之)。切回Unity,点击 Tools/Font
![这里写图片描述](https://img-blog.csdn.net/20160227154114707)
再看看我们刚创建的材质球
![这里写图片描述](https://img-blog.csdn.net/20160227154240001)
说明图片已给上。和字体MyFont
![这里写图片描述](https://img-blog.csdn.net/20160227154425361)
MyFont的Character Rects信息也有了,再把材质球拖到MyFont的Default Material中
![这里写图片描述](https://img-blog.csdn.net/20160227154620245)
到此,一切就准备就绪了,激动时刻到来了。在Hierarchy里创建一个Text控件
![这里写图片描述](https://img-blog.csdn.net/20160227154853717)
并把MyFont拖到Text的Font中
![这里写图片描述](https://img-blog.csdn.net/20160227155110267)
修改文本为 0~2的数字(因为就只做了0,1,2),并把Text的颜色值调到最左上角,效果出现了
![这里写图片描述](https://img-blog.csdn.net/20160227155415896)
![这里写图片描述](https://img-blog.csdn.net/20160227155507584)
完了!!!!