This is the 31st day of my participation in the August More Text Challenge

👉 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.)

Welcome to pay attention to the public account [Mr. Empty name] for more resources and communication!

👉 about to learn

Chat bubbles with UGUI, background adaptive zoom in and out

Use Text Mesh Pro to solve the font blur problem

👉 Practice

😜 Chat bubble

Is not determined, first look at a plate of effect:

​

The background changes when you type in more fonts, just like in a social chat

​

It is easy to implement, which requires Unity’s default Content Size Fitter component and Vertical Layout Group component, as shown in the figure

​

Add the Content Size Fitter component and the Vertical Layout Group component to the GameObject.

The Fitter script has two parameters, whether to set horizontal or vertical scaling. I chose vertical stretching adaptive, as shown in the renderings at the beginning of this article.

The Vertical Layout Group script sets the margins. This makes the text inside the Vertical Layout Group look like margins.

Text also mounts Content Size Fitter scripts, which are stretched horizontally or vertically depending on the actual needs of the project.

But see the effect of the implementation of the obvious font blur, so we have to solve the font blur.

😜 Font blur

In fact, I believe that many people now use Text Mesh Pro, there is almost no font blur problem. She can do lossless amplification, as well as achieve a variety of beautiful art Sprite text.

​

But we’re not talking about that, we’re talking about a little trick

In case your project doesn’t have an impact, the premise is: Create a new scenario and experiment.

You can change the width and Scale of the Text to make the Text clear (2x width and height, 2x Scale and 2x font size).

After that, are you still empty?

But, again, this doesn’t work for the chat bubble above, because it changes the font component’s scaling, and the chat bubble’s adaptive size dynamically changes the font’s scaling, which can cause conflict and chaos (the more words, the bigger the edges).

So TextMeshPro is still recommended.

👉 other

📢 author: Kom and Kom in Kom

📢 reprint instructions – be sure to specify the source: Zhim Granular’s personal home page – column – Nuggets (juejin. Cn)

📢 welcome to like 👍 collect 🌟 message 📝