Unity3d之-使用BMFont制作美术字体

一、需求

游戏开发中经常遇到需要以美术字(而非字库)做数字显示的情况,通常美术会提供一组包含单个数字(也会有其它字符)的图片,可能是一张整图,也可能是每个数字分开的散图。

在此我以一张整图这种情况为例,来说明美术字体的具体制作流程。整图如下:

二、准备

整个制作过程需要用到三样工具:

  • 字体数据制作工具
  • 图片切割工具
  • 字体生成工具

1、字体数据制作工具

字体数据制作工具名为BMFont,是一个Windows上的可执行软件,下载网址为:http://www.angelcode.com/products/bmfont/

  

  这里选择下载64位运行版(单体文件,无需安装)

  可也以点这里下载:BMFont64.exe

2、图片切割工具

图片切割工具是Unity中运行的一个工具类,类名为ImageSlicer,放在Editor目录下即可,代码如下:

 1 /**
 2 * UnityVersion: 2018.3.10f1
 3 * FileName:     ImageSlicer.cs
 4 * Author:       TYQ
 5 * CreateTime:   2019/04/19 00:04:26
 6 * Description:
 7 */
 8 /*
 9 * Author:
10 * Date:2019/01/30 10:24:22 
11 * Desc:图集切割器 (针对Multiple格式的图片)
12 * 操作方式:选中图片,选择编辑器的 Assets/ImageSlicer/Process to Sprites菜单
13 */
14
15 using UnityEngine;
16 using System.Collections;
17 using UnityEditor;
18 using System.IO;
19 using System.Collections.Generic;
20
21 public static class ImageSlicer
22 {
23     [MenuItem("Assets/ImageSlicer/Process to Sprites")]
24     static void ProcessToSprite()
25     {
26         Texture2D image = Selection.activeObject as Texture2D;//获取旋转的对象
27         string rootPath = Path.GetDirectoryName(AssetDatabase.GetAssetPath(image));//获取路径名称
28         string path = rootPath + "/" + image.name + ".PNG";//图片路径名称
29
30
31         TextureImporter texImp = AssetImporter.GetAtPath(path) as TextureImporter;//获取图片入口
32
33
34         AssetDatabase.CreateFolder(rootPath, image.name);//创建文件夹
35
36
37         foreach (SpriteMetaData metaData in texImp.spritesheet)//遍历小图集
38         {
39             Texture2D myimage = new Texture2D((int)metaData.rect.width, (int)metaData.rect.height);
40
41             //abc_0:(x:2.00, y:400.00, width:103.00, height:112.00)
42             for (int y = (int)metaData.rect.y; y < metaData.rect.y + metaData.rect.height; y++)//Y轴像素
43             {
44                 for (int x = (int)metaData.rect.x; x < metaData.rect.x + metaData.rect.width; x++)
45                     myimage.SetPixel(x - (int)metaData.rect.x, y - (int)metaData.rect.y, image.GetPixel(x, y));
46             }
47
48
49             //转换纹理到EncodeToPNG兼容格式
50             if (myimage.format != TextureFormat.ARGB32 && myimage.format != TextureFormat.RGB24)
51             {
52                 Texture2D newTexture = new Texture2D(myimage.width, myimage.height);
53                 newTexture.SetPixels(myimage.GetPixels(0), 0);
54                 myimage = newTexture;
55             }
56             var pngData = myimage.EncodeToPNG();
57
58
59             //AssetDatabase.CreateAsset(myimage, rootPath + "/" + image.name + "/" + metaData.name + ".PNG");
60             File.WriteAllBytes(rootPath + "/" + image.name + "/" + metaData.name + ".PNG", pngData);
61             // 刷新资源窗口界面
62             AssetDatabase.Refresh();
63         }
64     }
65 }

ImageSlicer.cs

编译完成后会在Assets菜单下生成一个ImageSlicer/Process to Sprites的菜单项,选中图片然后右键也可以看到。

3、字体生成工具

字体生成工具也是Unity3d中一个第三方插件,名字也是BMFont(不知道和第一个软件有什么关联)。原本是NGUI中的一个字体制作工具,现被大佬剥离出来,在UGUI中也可以使用。

下载地址:BMFont字体生成工具

解压到Assets目录下即可,编译完成后,会在Unity编辑器上生成一个Tools/BMFont Maker菜单。

三、开始制作

1、切割图片

在字体数据制作软件BMFont64中,需要使用单个数字的图片,而我这个是一张包含所有数字和字母符号的整图,就需要切成单张散图。

a) 把图片导入Unity,Sprite Mode选择Multiple模式,勾选Read/Write Enable选项。见下图:

然后点击Sprite Editor进行多图区域编辑,如下图。可以先按给定的三种方式进行划分,自己再做细微调整。注意每个字符边距不要太大,不然做成字体后显示起来就会很离散。

分割完成后,点击Apply保存操作。

b) 选中图片右键,执行ImageSlicer/Process to Sprites菜单,会生成一个与图片同名的目录,里边放着切割好的散图。见下图,

2、制作字体数据

a) 打开BMFont64软件,点击Edit下的Open Image Manager菜单。

在打开的Image Manager窗口有一个Image菜单,可以进行图片导入、编辑和删除操作。

操作方式:这里以逗号字符为例,鼠标放在主窗口逗号方格的位置,右下会显示其编号,记住这个编号。

然后在Image Manager窗口中选择导入图片,选中切割成散图的逗号图片,在Icon Image弹窗的Id中填入逗号方格的编号:44,点击Ok。

 

依样导入其它的图片,并填入Id值,最后的完成图如下:每个字符方格的编号,对应一个相应的图片。

b) 点击Options/Export options菜单,

打开导出选项窗口,这里边主要设置一个合成图片的宽和高,以及导出格式。

这个软件的最后一步操作是导出字体数据,包括一个字体数据文件(.fnt格式)和一张纹理图。这个纹理图会把所有的单图又合成一张。

这里的Width是指这张合成纹理的总宽度(最好比所有图片加起来的数值要大一点,因为每个数字图片合成时会有一个px的间隔),

Height是单个图片的高度(最好比图片高1像素以上)。

不能一次设置准确也没关系,可以点击Options/Visualize菜单预览合成效果,再微调高宽值,最终让所有图片都能刚刚显示为好。

导出格式格式设置为png。(如果图片有模糊可把Bit depth设置为32位试试,瞎猜的,不一定有用)

合成图预览如下:

c)  点击Options/Save bitmap font as..菜单,选择位置后进行保存操作,最终会得到两个文件(ArtNum.fnt和ArtNum_0.png),如下图:

字体名字可以自由定义,导出的时候,每个方格要处在选中状态(浅灰色)。

关于BMFont64软件的操作,也可以参考文章:Unity教程之-UGUI美术字体的制作与使用

3、生成字体

a)将上述两个文件导入到Unity中,在资源面板中鼠标右键,选择Create/MaterialCreate/Custom Font菜单,

创建一个空的材质ArtNum_mat和一个空的自定义字体ArtNum(后缀为.fontsettings,在Unity中不显示),如下图:

b) 点击Tools/BMFont Maker菜单,在打开的窗口中,选择相应的文件进行赋值,如下图,

最后点击Create BMFont按钮,这样一个美术字体就生成了。

点击字体文件,能在Inspector面板的Character Rects中看到字体的映射信息。

c) 创建一个Text,输入一些数字字母和符号,字体选择为ArtNum,颜色选为白色,就能看到实际的效果。

美术字体制作完成。

后记

使用这种字体的一些小问题
1、字体不会换行,超出宽度的字体将会重叠显示,需要预留出宽度。

2、字体不受Font Size的影响,无法动态调整大小,如有需要,可通过设置Scale来解决。

原文地址:https://www.cnblogs.com/imteach/p/10743725.html

时间: 2024-10-07 19:34:52

Unity3d之-使用BMFont制作美术字体的相关文章

UGUI使用BMFont制作美术字体&lt;一&gt;

不多说,先来效果图: 从头开始讲开发流程: 在Unity3d开发过程中,经常需要将美术提供的美术字组合成一个字体库,方便unity中的调用,BMFont则为此提供了不错的功能支持,它的下载地址在这里.它的使用方法网上有很多教程,这里不做解释,如果要使用此工具,要注意的是,这里记得使用xml格式,导出的图片为一张. 导出来的资源有:对应的图片,还有一个以fnt结尾的文件,如果打开此文件可以看到它就是一个xml文件: 在BMFont软件中我们这样操作:Options->Save configurat

Unity3D中使用BMFont制作图片字体 (NGUI版)

[旧博客转移 - 发布于2015年9月10日 16:07] 有时美术会出这种图片格式的文字,NGUI提供了UIFont来支持BMFont导出的图片字体 BMFont原理其实很简单,首先会把文字小图拼成一张大图(合成一张图上传GPU性能会高一些) 然后生成一份配置,描述了每张小图字符的Unicode编码(这里是10进制),坐标,宽高,偏移量,等等信息 下面说一下制作步骤 BMFont安装:http://pan.baidu.com/s/1jGvTAzc 打开BMFont 选择:Edit/Open I

BMFont制作美术字体

生成 Number.fnt.Number_0.png 两个文件,将其拖入Unity 相应位置,继续下一步 箭头所指就是我们要得到的最终目标,在文本处字体使用它就可以了. 在使用 Tools -> BMFont Maker 之前得先完成以下步骤: using UnityEngine;   using UnityEditor;     public class BMFontEditor : EditorWindow   {   [MenuItem("Tools/BMFont Maker&quo

Unity3d 使用 BMFONT 制作的艺术字体 不能居中 解决方法

文章转自http://blog.csdn.net/huutu 星环游戏 http://www.thisisgame.com.cn 转载请注明 在使用同事用 BMFONT 制作的 字体 时,在 Unity 3d 中发现,不能居中对齐. 在尝试 顶部对齐 中心对齐 底部对齐后发现,这个艺术字 是以 顶部 为锚点的. 所以结果就像上面的图片,我们选择 中心对齐,但是在 Unity3d 中看到却是 顶部 对齐了 文本框 的中心. 因为昨天正好简单学了下 Unity的 Custom Font,所以觉得可以

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

文章转载自:http://www.unity.5helpyou.com/3211.html 游戏制作中,经常需要使用各种花哨的文字或者数字,而字体库往往不能达到我们需要的效果,因此需要一种用图片替代文字的功能.ugui使用艺术字也比较简单,下面我们就来介绍下UGUI美术字体的制作与使用,本文使用BMFont作为字体制作工具,简单讲讲如何制作艺术字体:1.让美术提交分块后的文字: 2.打开BMFont工具,找到图片管理(Edit->Open Image Manager): 3.导入字体图片,并与文

Unity 使用BMFont制作字体

参考链接:http://blog.csdn.net/huang9012/article/details/32333913,作者:CSDN huang9012 NGUI版本:3.6.5 要自己制作字体,需要下载软件BMFont,下载BMFont 要制作的字体,这里以GOUDX-EXTRABOLD为例,下载字体 下载后安装,界面是这样的: 接下来开始制作字体: 1.打开Options——Font settings设置字体: 2.在Font Settings界面中设置如下: Font:要制作的字体名称

详解利用ShoeBox制作位图字体

http://childhood.logdown.com/posts/190580/-details-using-shoebox-produce-bitmap-fonts?utm_source=tuicool 1 ShoeBox 简介 ShoeBox官网 ShoeBox是一个基于AdobeAIR实现的免费跨平台的工具.这个工具使用拖放.剪切板的工作流程方式,能够很方便的处理游戏图片.创建位图字体等. 支持引擎 2 功能概括介绍 ShoeBox虽小,五脏俱全.作者做这个工具足见是用了心,如果各位想

unity制作图片字体

参考http://blog.sina.com.cn/s/blog_6768751b0101niao.html http://forum.china.unity3d.com/thread-20425-1-1.html 有时候美术会给出一系列的艺术字,例如数字0,1,2,3,4,5,6,7,8,9,这些字以图片的形式给开发人员,这时候图片的用法怎么用呢? 第一种想到的方法是把图片按字命名,然后以字为key存成字典,获取的时候通过字去获取(如代表数字1的图片命名为1,字典key为1,获取时通过Dict

基于cocoStudio和BMfont的艺术字体制作

http://blog.csdn.net/u011373759/article/details/44308455 我们在制作游戏的过程中经常要使用各式各样的艺术字体,这些字体让我们的游戏看起来更加美观更加的萌(- -!) 但是很多的新手都不知道这些字体是如何做出来的,这篇文章主要介绍的是基于cocos2dx它的配套UI制作工具cocostudio的艺术字体使用 字体的制作工具使用的是BMfont 下载地址:点击打开链接 首先我们制作我们想要的艺术字体(如果你有美工妹子的话,这应该轮不到你) 然后