可爱的动物数字,教你在Unity中自制UGUI艺术字体(位图字体)(Bitmap Font Generator)

Posted 林新发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可爱的动物数字,教你在Unity中自制UGUI艺术字体(位图字体)(Bitmap Font Generator)相关的知识,希望对你有一定的参考价值。

一、前言

点关注不迷路,持续输出Unity干货文章。
嗨,大家好,我是新发。
Unity项目开发过程中,我们经常需要使用一些艺术性比较强的字体,特别是数字。这个时候,就需要我们制作自定义字体了。本文我就来教教大家如何制作吧。

二、最终效果

本文制作的最终效果如下:
在这里插入图片描述
本文Demo工程已上传到CodeChina,感兴趣的同学可自行下载学习。
地址:https://codechina.csdn.net/linxinfa/UnityUGUICustomFontDemo
注:我使用的Unity版本:2020.2.7f1c1 (64-bit)

在这里插入图片描述

三、Bitmap Font Generator制作字体

1、准备字体图片

准备字体图片,如下:
在这里插入图片描述

2、下载Bitmap Font Generator

地址:http://www.angelcode.com/products/bmfont/
在这里插入图片描述

3、bmfont64.exe导入图片

运行bmfont64.exe
在这里插入图片描述
点击菜单Edit / Open Image Manager
在这里插入图片描述
此时会弹出Image Manager窗口,点击Image / Import image...
在这里插入图片描述
选择数字0的的图片,在Id输入框中输入0对应的ASCII编码:48
在这里插入图片描述

ASCII编码对照表见文章末尾附录

以此类推,把所有数字都导入进来。
在这里插入图片描述
完成后,可以看到主窗口中数字0~9的小格子右下角有个小小的标志。
在这里插入图片描述

4、配置设置

点击菜单Options / Export options
在这里插入图片描述
设置导出图片的宽高(WidthHeight),如果设置得过小,则会生成多种图片,设置过大则会浪费空间;
设置字体描述文件格式为XML
设置字体图片格式为png
最后点击OK
在这里插入图片描述

5、保存字体,生成.fnt和.png

点击菜单Options / Save bitmap font as...

在这里插入图片描述
此时会生成两个文件:.fnt.png,如下:
在这里插入图片描述
其中.fnt记录了字体中每个字符的的坐标信息。

<?xml version="1.0"?>
<font>
  <info face="Arial" size="32" bold="0" italic="0" charset="" unicode="1" stretchH="100" smooth="1" aa="1" padding="0,0,0,0" spacing="1,1" outline="0"/>
  <common lineHeight="32" base="26" scaleW="512" scaleH="256" pages="1" packed="0" alphaChnl="1" redChnl="0" greenChnl="0" blueChnl="0"/>
  <pages>
    <page id="0" file="number_0.png" />
  </pages>
  <chars count="10">
    <char id="48" x="0" y="0" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="49" x="100" y="0" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="50" x="200" y="0" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="51" x="300" y="0" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="52" x="400" y="0" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="53" x="0" y="97" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="54" x="100" y="97" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="55" x="200" y="97" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="56" x="300" y="97" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
    <char id="57" x="400" y="97" width="99" height="96" xoffset="0" yoffset="0" xadvance="99" page="0" chnl="15" />
  </chars>
</font>

四、Unity使用自定义字体

1、BitmapFontImporter插件

UGUI制作自定义字体比较繁琐,为了简化操作步骤,我使用一个开源的BitmapFontImporter插件。
只需将com.litefeel.BitmapFontImporter.Editor.dll放在Editor目录中即可。
在这里插入图片描述

2、导入.fnt和.png图片

将刚刚使用Bitmap Font Generator制作生成的.fnt.png文件导入到Unity工程中。
插件就会自动帮我们生成Unity UGUI可用的字体文件:Aa number
在这里插入图片描述
我们也可以手动点击菜单生成Aa number文件,只需右键.png文件,点击菜单Bitmap Font / Rebuild All Bitmap Font即可。
在这里插入图片描述

3、使用自定义字体

创建一个Text,字体使用刚刚的Aa number,测试一下数字的显示。
在这里插入图片描述
运行效果如下:
在这里插入图片描述

五、结束语

完毕。
喜欢Unity的同学,不要忘记点击关注,如果有什么Unity相关的技术难题,也欢迎留言或私信~

六、附录:ASCII 编码一览表

二进制十进制十六进制字符/缩写解释
00000000000NUL (NULL)空字符
00000001101SOH (Start Of Headling)标题开始
00000010202STX (Start Of Text)正文开始
00000011303ETX (End Of Text)正文结束
00000100404EOT (End Of Transmission)传输结束
00000101505ENQ (Enquiry)请求
00000110606ACK (Acknowledge)回应/响应/收到通知
00000111707BEL (Bell)响铃
00001000808BS (Backspace)退格
00001001909HT (Horizontal Tab)水平制表符
00001010100ALF/NL(Line Feed/New Line)换行键
00001011110BVT (Vertical Tab)垂直制表符
00001100120CFF/NP (Form Feed/New Page)换页键
00001101130DCR (Carriage Return)回车键
00001110140ESO (Shift Out)不用切换
00001111150FSI (Shift In)启用切换
000100001610DLE (Data Link Escape)数据链路转义
000100011711DC1/XON (Device Control 1/Transmission On)设备控制1/传输开始
000100101812DC2 (Device Control 2)设备控制2
000100111913DC3/XOFF (Device Control 3/Transmission Off)设备控制3/传输中断
000101002014DC4 (Device Control 4)设备控制4
000101012115NAK (Negative Acknowledge)无响应/非正常响应/拒绝接收
000101102216SYN (Synchronous Idle)同步空闲
000101112317ETB (End of Transmission Block)传输块结束/块传输终止
000110002418CAN (Cancel)取消
000110012519EM (End of Medium)已到介质末端/介质存储已满/介质中断
00011010261ASUB (Substitute)替补/替换
00011011271BESC (Escape)逃离/取消
00011100281CFS (File Separator)文件分割符
00011101291DGS (Group Separator)组分隔符/分组符
00011110301ERS (Record Separator)记录分离符
00011111311FUS (Unit Separator)单元分隔符
001000003220(Space)空格
001000013321!
001000103422"
001000113523#
001001003624$
001001013725%
001001103826&
001001113927
001010004028(
001010014129)
00101010422A*
00101011432B+
00101100442C,
00101101452D-
00101110462E.
00101111472F/
0011000048300
0011000149311
0011001050322
0011001151333
0011010052344
0011010153355
0011011054366
0011011155377
0011100056388
0011100157399
00111010583A:
00111011593B;
00111100603C<
00111101613D=
00111110623E>
00111111633F?
010000006440@
010000016541A
010000106642B
010000116743C
010001006844D
010001016945E
010001107046F
010001117147G
010010007248H
010010017349I
01001010744AJ
01001011754BK
01001100764CL
01001101774DM
01001110784EN
01001111794FO
010100008050P
010100018151Q
010100108252R
010100118353S
010101008454T
010101018555U
010101108656V
010101118757W
010110008858X
010110018959Y
01011010905AZ
01011011915B[
01011100925C\\
01011101935D]
01011110945E^
01011111955F_
011000009660`
011000019761a
011000109862b
011000119963c
0110010010064d
0110010110165e
0110011010266f
0110011110367g
0110100010468h
0110100110569i
011010101066Aj
011010111076Bk
011011001086Cl
011011011096Dm
011011101106En
011011111116Fo
0111000011270p
0111000111371q
0111001011472r
0111001111573s
0111010011674t
0111010111775u
0111011011876v
0111011111977w
0111100012078x
0111100112179y
011110101227Az
011110111237B{
011111001247C|
011111011257D}
011111101267E~
011111111277FDEL (Delete)删除

以上是关于可爱的动物数字,教你在Unity中自制UGUI艺术字体(位图字体)(Bitmap Font Generator)的主要内容,如果未能解决你的问题,请参考以下文章

Unity教程之-UGUI美术字体的制作与使用

如何在unity3d的UGUI中给Text添加材质和艺术字

[oeasy]python0037_字符画艺术_asciiview_自制小动物_imagick_asciiart

游戏开发进阶教你自制离线Maven仓库,实现Unity离线环境使用Gradle打包(Unity | Android | 谷歌 | Gradle)

游戏开发进阶教你自制离线Maven仓库,实现Unity离线环境使用Gradle打包(Unity | Android | 谷歌 | Gradle)

游戏开发解答教你在Unity中使用LineRenderer制作行军蚂蚁线(行军 | 虚线 | 路径 | 线段)