一、需求

遊戲開發中經常遇到需要以美術字（而非字庫）做數字顯示的情況，通常美術會提供一組包含單個數字（也會有其它字符）的圖片，可能是一張整圖，也可能是每個數字分開的散圖。

在此我以一張整圖這種情況為例，來說明美術字體的具體制作流程。整圖如下：

二、準備

整個制作過程需要用到三樣工具：

• 字體數據制作工具
• 圖片切割工具
• 字體生成工具

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/Material和Create/Custom Font菜單，

創建一個空的材質ArtNum_mat和一個空的自定義字體ArtNum（後綴為.fontsettings，在Unity中不顯示），如下圖：

b) 點擊Tools/BMFont Maker菜單，在打開的窗口中，選擇相應的文件進行賦值，如下圖，

最後點擊Create BMFont按鈕，這樣一個美術字體就生成了。

點擊字體文件，能在Inspector面板的Character Rects中看到字體的映射信息。

c) 創建一個Text，輸入一些數字字母和符號，字體選擇為ArtNum，顏色選為白色，就能看到實際的效果。

美術字體制作完成。

後記

使用這種字體的一些小問題
1、字體不會換行，超出寬度的字體將會重疊顯示，需要預留出寬度。

2、字體不受Font Size的影響，無法動態調整大小，如有需要，可通過設置Scale來解決。

Unity3d之-使用BMFont制作美術字體