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.
- First of all, we need to create a new UI text. In order to do this, right-click on the Hierarchy panel and then navigate to UI | Panel. Finally, name it Text with Outline.
- After this, we can regulate all the parameters in the Inspector as we want. However, in order to be sure that we notice the nice effect, we can enlarge Text with Outline with Rect tool (which can be used quickly with the T hotkey), increase the Font Size variable to 100, and change its Color in cyan. Of course, we can change the Text variable to Text with Outline, for instance.
- The next step is to add the Outline (Script) component. To do this, navigate to Add Component | UI | Effects | Outline.
- Now we can leave the Effect Color variable as default and change Effect Distance. For the X axis, we can enter -2, and for the Y axis -2. Then, Outline (Script) should appear like this:
- If we look at the scene view panel, we can see the final effect, as displayed in this screenshot:
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:
- This is not the only UI Effect component that you will find in Unity. Therefore, for more information about these components, you should refer to the previous recipe, Adding shadows to text.
- Other than this, the official documentation with all the UI effects can be found at http://docs.unity3d.com/Manual/comp-UIEffects.html.