This is the 20th day of my participation in the August Text Challenge.More challenges in August

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!! Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

👉 about to learn

Learn about FairyGUI in Unity from start to finish

👉 background

Unity 2019 x series

FairyGUI 2021.2 series

👉 Practice

Text and rich text and input text

Normal text does not have mouse/touch sensitivity, just plain text, of course text font style Settings, font size, color, line spacing, alignment, bold italic underline, and UBB syntax support

Rich text can be powerful, in addition to ordinary text functions, but also support click events, hyperlinks and text mix, more support HTML syntax, which can play a lot of tricks to go. You can do almost any text effect you’ve ever seen in a game.

Another practical application may be text templates, which, like the log output parameter in C, can be set to a variable in the entire text, so that you do not need to modify the entire text, only the corresponding text can be modified.

For example, to display “My money: 100 gold and 200 silver”, when the amount changes, use the template function does not need to re-assign irrelevant Chinese characters, only need to modify the text. SetVar(” Yin “, “500”).setvar (” Yin “, “500”).flushvars (); Make it 500 gold and 500 silver

For example, when playing a single player game, you need to input the character name at the beginning, the game character content will be changed to the character name you input, enhancing the authenticity of the game. And you only have to change this variable.

The font

In addition to the project described above that sets up a common system font file with the suffix TTF/TTC/OTF, FairyGUI also supports bitmap fonts and TextMeshPro support

What is a bitmap font?

Please look at the screenshot below:

GUI editor supports bitmap fonts. First, we create a font. Click on the main toolbarThen, the font editing window pops up. We drag the digital pictures made from the resource library into the window and set the corresponding characters of each picture. Click save, so our font is set up. To modify the image for each character, drag the image back in.

Using images instead of characters is handy for small amounts of text, but if you need to embed hundreds or thousands of words, make images for each word, and then set characters for each word, it’s a bit too much work. FairyGUI editor supports external bitmap font creation tools such as BMFont and ShoeBox. Please refer to the network for details on how to use these tools. Using an external tool, you will export an FNT file (note 1: the file format should be FNT, XML or JSON is not supported). Click Import material in the editor and select the FNT file to import the font into the editor.

TextMeshPro

There is a TextMeshPro plugin in Unity that renders text using SDF(signed-Distance-field) technology. Compared to conventional rendering methods, sdF-based rendering text can be infinitely enlarged and kept clear, achieving stroke, glow, anti-aliasing and other effects with almost no overhead. And it requires very little texture cache SDF information. FairyGUI has built-in support for the use of the TextMeshPro plug-in.

The steps to use TextMeshPro in the FairyGUI editor are as follows:

  1. Import a TTF/TTC/OTF file.
  2. Double-click on the font and set the render mode to SDFAA. The selection of sample font size can be specified according to the project requirements, which affects how much text can fit into a single texture. The higher the value, the better the rendering, but the less text a texture can hold. The recommended value ranges from 30 to 90.
  3. Use this font (or set it to a global font) for text elements.

As you can see from the steps above, TextMeshPro can be easily toggled in FairyGUI.

When the text uses the TextMeshPro font, additional options are added to the text’s properties, as shown below:

Adjust each attribute by yourself and feel its effect through the actual effect. It is generally recommended that as the stroke increases, the expansion value should also increase.

Something special needs to be done in the Unity engine:

  1. Verify that the TextMeshPro plug-in is installed.
  2. Drag the TTF file into the Unity editor. It is usually easiest to place the Resources directory or Resources/Fonts directory.
  3. Create a TextMeshPro FontAsset for the TTF file. Normally, the Asset is created with the name ‘XXX SDF’ and we need to change the name to ‘XXX’ to match the resource name in the FairyGUI editor.
  4. Configure the Sampling Point Size of this FontAsset to match the sample font Size in the FairyGUI editor.

Group (Normal and Advanced)

Combining disparate objects into a single unit, moving, copying, zooming, and hiding are all common. All subsequent actions will be taken as a whole. Subsequent actions are also divided into actions in the FairyGUI compiler and code operations in Unity. These operations lead to normal and advanced groups.

The normal group is implemented in FairyGUI compiler when you develop the edit, helps you quickly lay out the UI, and after release and runtime it doesn’t exist, so you can’t treat it as a whole anymore.

The advantage of the advanced group is that, apart from being effective in FairyGUI compiler to help you lay down the UI quickly, it retains the group relationship after release, such as when you change the position of the advanced group with code and everything in the group moves. Compared with the relative layout of Android, when modifying the overall group, the size of components in the group changes accordingly; When one element in the group changes, the others adapt to the change.

👉 other

📢 author: Xiaokong and Xiaoshi nakoko 📢 Reprint: be sure to indicate the source: Zhimen’s personal homepage (juejin. Cn). 📢 welcome to like 👍 collect 🌟 message 📝