In this recipe, you will learn how to add an outline to a Text (Script) component. In order to achieve this, you will have to learn how to use a UI Effect component of the new UI system of Unity, the Outline (Script) component. Similar to text shadows, text outlines can also add an element of boldness to text that is displayed on the screen. This can be useful when there are many elements on the screen, or even if you just want a certain text element to appear more dominant than others. There are many uses for text outlines, and they can be useful to experiment with in order to find out what suits your game the most.
The Outline (Script) component replicates the text to which it is attached, in particular, four times. It changes the color of each of these four copies to the one specified in the Effect Color variable. Furthermore, it moves them symmetrically from the center with a phase displacement specified in the Effect Distance vector. If this displacement is not too far, which means small values in the Effect Distance vector, all the new text copies will form an outline around the original text.
Nice and soft outlines can be created by using this component. Furthermore, by combining this also with the Shadow component, we can create better 3D letters than in the previous recipe.
Through this component, we can also improve the graphical appearance of text very easily by adding a soft outline. In fact, this outline marks the text to make it more important without being visually overwhelming. We can achieve this by setting the distance on one axis in Effect Distance to zero. For instance, if we set the x axis to 0 and the y axis to -2, we obtain this effect:
We can extend the creation of 3D letters that we saw in the last recipe using both the Outline (Script) component and the Shadow (Script) component. In fact, if we add a soft outline to our text (as in the previous section) and a shadow component (as the one described in the Creating 3D letters section of the Adding shadows to text recipe), we can obtain a very nice and cool effect. Of course, this is without any graphical efforts. You can see the final result in the following screenshot:
18.117.138.104