NGUI WYSIWYG UIFont, UIFontMaker

In the last blog, I introduced the structure of UIAtlas and the principle of UIAtlasMaker generating Atlas.( NGUI WYSIWYG UIAtlasMaker, UIAtlas According to the behavioral context of UIAtlas, we should first introduce UIFont, but find that UIFont script is very long and a little scared. This is mainly because UIFontMaker has not been used before. It is simple to create Dynamic fonts, and then another improvement is that we do not need to generate different presets for different font sizes. Now we only need TTF and setting font sizes. That's OK. It's much more convenient and intuitive. Look at the picture below.
FontMaker interface

Since it's difficult to get a clue from the code, UIFont has too many member variables to play FontMaker first, because Dynamic fonts are no longer created, just change Font Type to Dynamic, so just look at the form of Bitmap.

Font Data is actually information about the size of the offset of each word in the specified Texture (Font Data can be generated by software such as BM Font). Look at the Output column. Choosing UIFont is to add the newly generated font to the selected UIFont. As for the Atlas option, it is important (because you see DrawCall), that is, to put a Texture image into the selected Atlas and reduce DrawCall.

After going through the above operation, you will not be puzzled by a bunch of member variables of UIFont, which is also because UIFont combines a lot of things, so it will be more complex.

UIFontMaker

Next, let's look at UIFontMaker first. People's thinking habits are from easy to difficult, so learning must be the most step-by-step. Okay, no nonsense, get to the point. Look at MakeAsChanged():

1. void MarkAsChanged ()  
2.     {  
3.         if (NGUISettings.font != null)  
4.         {  
5.             List<UILabel> labels = NGUIEditorTools.FindAll<UILabel>();  
6.   
7.             foreach (UILabel lbl in labels)  
8.             {  
9.                 if (lbl.bitmapFont == NGUISettings.font)  
10.                 {  
11.                     lbl.bitmapFont = null;  
12.                     lbl.bitmapFont = NGUISettings.font;  
13.                 }  
14.             }  
15.         }  
16.     }  

As an appetizer, this function is very simple. It replaces UIFont of UILabel, that is to say, NGUISettings.font is currently modified, and only Select of UIFontMaker is a change to UIFont (adding a newly generated font), so it is natural to guess that MakeAsChange will be called only when Select of UIFont is selected. Execution.

1. static void CreateFont (UIFont font, int create, Material mat)  
2.     {  
3.         if (create == 1)  
4.         {  
5.             // New dynamic font  
6.             font.atlas = null;  
7.             font.dynamicFont = NGUISettings.dynamicFont;  
8.             font.dynamicFontStyle = NGUISettings.dynamicFontStyle;  
9.         }  
10.         else  
11.         {  
12.             // New bitmap font  
13.             font.dynamicFont = null;  
14.             BMFontReader.Load(font.bmFont, NGUITools.GetHierarchy(font.gameObject), NGUISettings.fontData.bytes);  
15.   
16.             if (create == 2)  
17.             {  
18.                 font.atlas = null;  
19.                 font.material = mat;  
20.             }  
21.             else if (create == 3)  
22.             {  
23.                 font.spriteName = NGUISettings.fontTexture.name;  
24.                 font.atlas = NGUISettings.atlas;  
25.             }  
26.         }  
27.     }  

The most important is BMFontReader.Load, and then you can look at the three scripts BMFontReader,BMFont,BMGlphy. In fact, when you see the annotations of these three scripts, you can see that NGUI is actually transplanting BMFont:

                    BMFont reader. C# implementation of http://www.angelcode.com/products/bmfont/

Because of the length and theme, there is no introduction here, but at least you can understand the font production method, next time you can write an art font production process.

There is no need to introduce the remaining OnGUI, just a condition jump and a detailed judgment.

UIFont

When you see UIFontMaker's interface operations (more options), you know that UIFont's membership variables or attributes will be a little more, including mMat and mReplacement mSprite in UIAtlas.   

1.        [HideInInspector][SerializeField] Material mMat;  
2. [HideInInspector][SerializeField] Rect mUVRect = new Rect(0f, 0f, 1f, 1f);  
3. [HideInInspector][SerializeField] BMFont mFont = new BMFont();  
4. [HideInInspector][SerializeField] int mSpacingX = 0;  
5. [HideInInspector][SerializeField] int mSpacingY = 0;  
6. [HideInInspector][SerializeField] UIAtlas mAtlas;  
7. [HideInInspector][SerializeField] UIFont mReplacement;  
8. [HideInInspector][SerializeField] float mPixelSize = 1f;  
9.   
10. // List of symbols, such as emoticons like ":)", ":(", etc  
11. [HideInInspector][SerializeField] List<BMSymbol> mSymbols = new List<BMSymbol>();  
12.   
13. // Used for dynamic fonts  
14. [HideInInspector][SerializeField] Font mDynamicFont;  
15. [HideInInspector][SerializeField] int mDynamicFontSize = 16;  
16. [HideInInspector][SerializeField] FontStyle mDynamicFontStyle = FontStyle.Normal;  
17.   
18. // Cached value  
19. UISpriteData mSprite = null;  
20. int mPMA = -1;  
21. bool mSpriteSet = false;  
22.   
23. // I'd use a Stack here, but then Flash export wouldn't work as it doesn't support it  
24. static BetterList<Color> mColors = new BetterList<Color>();  

The following is an annotative introduction to some variables:

mUVRect

1. public Rect uvRect  
2.     {  
3.         get  
4.         {  
5.             if (mReplacement != null) return mReplacement.uvRect;  
6.   
7.             if (mAtlas != null && (mSprite == null && sprite != null))  
8.             {  
9.                 Texture tex = mAtlas.texture;  
10.   
11.                 if (tex != null)  
12.                 {  
13.                     mUVRect = new Rect(  
14.                         mSprite.x - mSprite.paddingLeft,  
15.                         mSprite.y - mSprite.paddingTop,  
16.                         mSprite.width + mSprite.paddingLeft + mSprite.paddingRight,  
17.                         mSprite.height + mSprite.paddingTop + mSprite.paddingBottom);  
18.   
19.                     mUVRect = NGUIMath.ConvertToTexCoords(mUVRect, tex.width, tex.height);  
20. #if UNITY_EDITOR  
21.                     // The font should always use the original texture size  
22.                     if (mFont != null)  
23.                     {  
24.                         float tw = (float)mFont.texWidth / tex.width;  
25.                         float th = (float)mFont.texHeight / tex.height;  
26.   
27.                         if (tw != mUVRect.width || th != mUVRect.height)  
28.                         {  
29.                             //Debug.LogWarning("Font sprite size doesn't match the expected font texture size.\n" +  
30.                             //  "Did you use the 'inner padding' setting on the Texture Packer? It must remain at '0'.", this);  
31.                             mUVRect.width = tw;  
32.                             mUVRect.height = th;  
33.                         }  
34.                     }  
35. #endif  
36.                     // Trimmed sprite? Trim the glyphs  
37.                     if (mSprite.hasPadding) Trim();  
38.                 }  
39.             }  
40.             return mUVRect;  
41.         }  
42.         set  
43.         {  
44.             if (mReplacement != null)  
45.             {  
46.                 mReplacement.uvRect = value;  
47.             }  
48.             else if (sprite == null && mUVRect != value)  
49.             {  
50.                 mUVRect = value;  
51.                 MarkAsDirty();  
52.             }  
53.         }  
54.     }  

For a long period of code, the offset and width of the text set pictures represented by mUVRect.

UIFont provides three display types for UILabel, and three methods for computing string Dimension (pixels). These three methods also occupy a considerable space of UIFont:

                public Vector2 CalculatePrintedSize (string text, int size, bool encoding, SymbolStyle symbolStyle)

                public string GetEndOfLineThatFits (string text, int size, int lineWidth, bool encoding, SymbolStyle symbolStyle)

                public int CalculateOffsetToFit (string text, int size, int lineWidth, bool encoding, SymbolStyle symbolStyle)

BMSymbol

It has long been said that NGUI supports facial expression input. Although in previous projects, colleagues used NGUIHtml as a plug-in to make chat boxes, this is not to make NGUI extremely useless and a little wasteful. In fact, the principle is to find pictures according to the strings of symbols.

Summary:

This evening, it's a bit awkward to see UIFont code like this at first. After watching some videos, I think I'll write it again. Although the BMFont and BMSymbol parts are hardly introduced, there are two reasons: 1) if it's not necessary to write NGUI plug-ins automatically in the actual project, 2) It's a little late now at 2:10 a.m., and it's not in school before. What do you think? Now that you are working, you feel that the farmer is a high-risk profession, and his body is his own, so I have repeatedly stressed that we should have an early rest (although at this time, forgive me). I really feel dizzy now.

Suddenly I heard Beyond's "No More hesitation" and I was bored to see hesitation. It's not easy to reach my ideal. Even if I have confidence, my fighting spirit is suppressed. "It deeply depicts my state all the time, so I insist on writing it. Come on and work hard!

If you have any suggestions or comments on D.S.Qiu, you can comment at the end of the article or send an email (gd.s.qiu@gmail.com) to communicate. Your encouragement and support are the driving force for me to move forward, and I hope to share more and better.

For reprinting, please indicate the origin at the beginning of the article: http://dsqiu.iteye.com/blog/1968002

For more excitement, please pay attention to D.S.Qiu'sBlog And Weibo (ID: Still Water Driving Wind)

Good night, get up early tomorrow and run!