Use picture text (numbers, calligraphy instruction) in Ngui (directly available for uilable)

This article permanent address: http://www.omuying.com/article/24.aspx,"The article reproduced please indicate the source!" "

In the Unity development process, we often use the art to provide the picture text (number) to beautify our game interface, with the help of powerful NGUI plug-in support, we can easily display calligraphy instruction on the interface! The specific steps can be taken to take the following actions:

Description: The NGUI plug-in version used is NGUI Next-gen UI v3.5.8, the steps may vary depending on the version, please select the appropriate step according to the plugin version.

1, NGUI support picture font (calligraphy instruction), we can see how the font atlas is generated by Ngui->open->font Maker, in the Input option, when you select the Type imported Bitmap option, we can see that the Fo NT Data, and a Texture option, according to the following instructions, we can see that Fontdata needs to use FNT files, and Fnt's production needs to be created with the help of the Bmfont software. ：

2, first download Bmfont software, the official: http://www.angelcode.com/products/bmfont/

3. After the installation is completed, the interface is as follows:

4, we first cancel the default selection of the font library, you can click on the arrow location deselect/SELECT, set the following interface:

5, then we choose options->export options, open the export settings, in the bit depth option, we select 32 bits, above the Width and Height can be adjusted according to the text, set up after clicking the OK button to save, the interface is as follows:

6, then we choose Edit->open Image Manager, open the image management interface, continue to select Image->import image, select the text picture path to import, double-click the selected text image, the interface is as follows:

7, this time appears Icon Image interface, this interface we need to set the main place is the ID,:

8, the ID number can be selected (hover mouse) to the left of the text to view,:

9, find the number, fill in the ID location click OK button, we can see the left side of the corresponding text changes in the lower right corner, after the operation of the interface:

10, repeat to add the picture text, until all the picture text has been added, the final result:

11. We can preview the result by options->visualize:

12, after choosing Options->save Bitmap font As, save the font, choose a good location after saving,:

13. Copy the generated files into Unity:

14. Open Ngui->open->font Maker, then Type Select Imported Bitmap, select the file that we just copied, click the Create the Font button created font, font creation can be done in NGUI Used,:

15, we create a Label to display the picture text, set:

16. Final Result

(go) Use picture text (numbers, calligraphy instruction) in Ngui (directly available for uilable)