[Unity's Evolution 4.6 Billion Ensemble] Chapter 2 Learn to use (Bitmap Font Generator) to make bitmap text


foreword

In order to become "the main program of Unity in the future", learn the realization of various basic functions, deeply understand and understand performance optimization methods, etc., this series is a series of realizing a certain function and a certain logical operation, so that each little knowledge becomes The nourishment of our evolution.


提示:以下是本篇文章正文内容,下面案例可供参考

1. What is a bitmap?

This article is mainly to share how to make Bitmap fonts (picture fonts) in Unity. I assume that people who read this article already know what making Bitmap fonts is. Many times you encounter problems and no one can help you. You are only on your own. If you don't know what making Bitmap fonts is, please Google it first (resist Baidu from me).

2. Use steps

1. Art resources

This resource varies from person to person, I use the most commonly used digital UI art resources here
Please add a picture description


2. Use the slice tool or other tools with the same effect to process the picture

Here I use the slice tool of PS. It is also the first time for me to use the drawing. The drawing is not very regular. Try to make each picture the same size, otherwise the subsequent rendering effect will be a bit abstract. (Go to Google if you don’t know the slicing tool!)
insert image description hereAfter processing, export the format used by the Web
insert image description hereto select the folder you exported, and PS will automatically export it, as shown in the figure

insert image description hereIn this way, the picture resources have been made, of course, if there are ready-made ones, use the ready-made ones, and make them for the artists if they can do it ()


3. Download and use Bitmap Font Generator

1. Program download

Bitmap Font Generator: download address
insert image description here

2. Program use

After running bmfont64.exe
insert image description hereand starting, click the option in the upper left corner Edit/Open Image Manager
insert image description here. In the pop-up window, click Image/Import image..to import the picture

insert image description here
Select 0the picture of the number and Identer 0the corresponding ASCII code in the input box: 48click OKthe button to import

insert image description hereImport all the digital pictures exported by PS.
insert image description here
The imported pictures will display sky blue square dots
insert image description here

The ASCLL coding comparison table is at the end of the article

3. Configuration settings

Click the menu Options/Export options
insert image description here
in the upper left corner and set the width and height ( ) of the final exported image in the pop-up window Wideth、Height. This size depends on the art resources. In normal use, it is set to be an image after export, and the numbers on the image are all the numbers set before; set the font
description The file format is XML;
set the font image format to png;
finally clickok
insert image description here

4. Export

click menuOptions/Save bitmap font as...

insert image description here
Select the export path in the pop-up page.
After export, two files will be generated: .fntand .png, as follows. The files
如果发现生成了多张PNG图片 请重新设置图片宽高
here .fntrecord the coordinate parameters of each number in the picture.

insert image description here


4. Use the exported custom fonts in Unity

Download the BitmapFontImporter plugin

In this way, you can directly drag in and use
the BitmapFontImporter plug-in

After Unity is installed, drag the exported two files into it and you can use it
insert image description here

5. ASCLL code comparison table

insert image description here

6. Summary

The bitmap is basically provided by the art side, but we also have to know it~
Bitmap Font Generator can also be imported into Chinese, if you are interested, you can Google Kangkang~

Guess you like

Origin blog.csdn.net/weixin_46172181/article/details/126412148