【游戏开发实战】可爱的动物数字，教你在Unity中自制UGUI艺术字体（位图字体）（Bitmap Font Generator）

news/2024/11/23 2:50:34/

文章目录

      • 一、前言
      • 二、最终效果
      • 三、Bitmap Font Generator制作字体
        • 1、准备字体图片
        • 2、下载Bitmap Font Generator
        • 3、bmfont64.exe导入图片
        • 4、配置设置
        • 5、保存字体，生成.fnt和.png
      • 四、Unity使用自定义字体
        • 1、BitmapFontImporter插件
        • 2、导入.fnt和.png图片
        • 3、使用自定义字体
      • 五、结束语
      • 六、附录：ASCII 编码一览表

一、前言

点关注不迷路，持续输出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。
在这里插入图片描述
设置导出图片的宽高（Width、Height），如果设置得过小，则会生成多种图片，设置过大则会浪费空间；
设置字体描述文件格式为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)删除

http://www.ppmy.cn/news/449053.html

相关文章

ios css引用外部字体,CSS 引用外部字体

ios css引用外部字体,CSS 引用外部字体

攻城狮在路上(叁)Linux(十六)--- 命令与文件的查找 一.脚本文件的查询: 1.命令格式:which [-a] command; <通过PATH来查找. -a:列出所有的,而不是仅列出第一个. 示例: which ifconfig; 注意:由于 ... POJ 2013 #include #include #define MAXN 20 using namespace std; stri…
阅读更多...
20款漂亮的免费英文字体下载

20款漂亮的免费英文字体下载

您可能还喜欢 20款最佳免费英文手写字体推荐向设计师推荐20款漂亮的免费英文字体分享最新36款高质量免费英文字体分享20款非常有趣的高质量免费字体专业设计师最常用的22款免费英文字体 本文收集了20款漂亮的免费英文字体&#xff0c;可以免费下载使用。这些免费英文字体特别适…
阅读更多...
几个特别棒的免费可商用字体

几个特别棒的免费可商用字体

免费可商用&#xff0c;且为规避版权风险&#xff0c;所有下载地址都为官方发布地址 站酷免费字体 https://www.zcool.com.cn/special/zcoolfonts/ 【设计师必备 超级棒&#xff0c;有艺术风也有可爱风 每次更新也都在这个地址里】 阿里巴巴普惠体 https://alibabafont.ta…
阅读更多...
html 好看的英文字体,23款网页设计师必备：经典私藏英文字体

html 好看的英文字体,23款网页设计师必备：经典私藏英文字体

作为网页设计师，对待字体设计也许并没有其他的平面设计师那般自由。例如，你没有办法在网页中使用其他中文的字体，受限于技术的原因，除了几款比较固定的中文字体(微软雅黑、宋体、黑体等)目前中文字体的特殊设计也只能以图片的方式展示。但是在英文的运用上，其实在网页设计…
阅读更多...
4款时尚优雅宋体Logo字体（可免费商用）

4款时尚优雅宋体Logo字体（可免费商用）

当我们设计女性logo、艺术logo以及时尚品牌logo时&#xff0c;基本上会倾向选择优雅高级的宋体作为logo字体使用&#xff0c;但是可免费商用的宋体字非常稀缺质量不齐&#xff0c;今天就给大家筛选了4款我认为最适合设计logo的宋体字体&#xff0c;全部是免费商用大家可以放心下…
阅读更多...
像中文的罗马音字体复制_罗马音字体复制大全

像中文的罗马音字体复制_罗马音字体复制大全

罗马音字体复制大全是一款非常好用的特殊文字管理软件，罗马音字体复制大全可以为用户提供各种奇特的文字和符号，各种稀奇古怪的文字都可以生成，绝对是你取ID取网名的神器，让自己成为人群中的焦点，赶快来下载吧！ 罗马音字体复制大全介绍 1.这款软件汇聚了各种各样的稀奇汉…
阅读更多...
appium定位元素

appium定位元素

代码规则 从示例代码&#xff0c;大家就可以发现&#xff0c;和Selenium Web自动化一样&#xff0c;要操作界面元素&#xff0c;必须先 定位&#xff08;选择&#xff09;元素。 Appium是基于Selenium的&#xff0c;所以 和 Selenium 代码 定位元素的 基本规则相同&#xff1…
阅读更多...
西数硬盘发生故障数据还能恢复吗

西数硬盘发生故障数据还能恢复吗

客户反馈西数硬盘中的数据无法识别取出&#xff0c;经朋友推荐将硬盘带到蓝梦数据恢复中心&#xff0c;首先蓝梦将硬盘做登记&#xff0c;然后将硬盘交给相应工程师做检测。工程师在接到盘后发现硬盘为原生USB接口的&#xff0c;经过加电硬盘出现了敲盘现象初步判断为磁头损坏。…
阅读更多...
最新文章

Copyright @ 2022~2023