In this recipe, you will learn how to add a shadow to a Text (Script) component. In order to achieve this, you will learn how to use a UI Effect component of the new UI system of Unity — the Shadow (Script) component. This kind of effect can add a dramatic touch to text and, as a result, make it stand out among other elements that may be in the UI. In addition to this, when there are many elements in the background, it is possible that a piece of text may seem lost. As such, adding a shadow to the text can also improve its legibility.
- First of all, we need to create a new UI text. To do this, right-click on the Hierarchy panel and then navigate to UI | Panel. Finally, rename it Text with Shadow.
- Then, we can regulate all the parameters in the Inspector as we want. However, in order to make sure that we notice the nice effect, we can enlarge Text with Shadow with Rect tool (which can be used quickly with the T hotkey), increase the Font Size variable to 100, and change its Color to cyan. Of course, we can change the Text variable, such as in Text with Shadow.
- The next step is to add the Shadow (Script) component. So, let's navigate to Add Component | UI | Effects | Shadow.
- Now, we can leave the Effect Color variable as default and change Effect Distance. For the X axis we, can enter -7, and for the Y axis, -3. In the end, the Shadow (Script) component should appear like this:
- If we look at the scene view panel, we can see the final effect, as follows:
The Shadow (Script) component replicates the text that it is attached to. It changes its color to the one that is specified in the Effect Color variable, and moves it from the center with a phase displacement specified in the Effect Distance vector. Therefore, if this displacement is not too far, which means small values for the Effect Distance vector, the new text will form a shadow of the original text.
We can also use this component to quickly create 3D letters, which we will explain in the following section.
With this component, it is also easy to create an illusion of 3D letters. This method doesn't work every time. It depends on the font we use, but most of the time we can achieve nice 3D letters without other graphical efforts.
To use this trick, we need to change the Effect Color variable to almost the same color that we set for the original text, but this time just a little darker. Then, change the Alpha channel of the color to a lower level of the one in the Text component. For instance, if the Alpha channel of the text is at 255, it is probably a good compromise to set the Alpha of the shadow to 60. The only reason for using this number is that it is empirical. In fact, it produces a nice effect, but we need to tweak this value according to our needs.
Therefore, you can achieve this kind of effect:
- This is not the only UI Effect component that we can find in Unity. Therefore, to obtain more information about other UI Effect components, you can refer to the next recipe, Adding outlines to text.
- The official documentation with all the UI effects can be found at http://docs.unity3d.com/Manual/comp-UIEffects.html.
- Furthermore, in order to create better 3D letters, you should check out the Creating better 3D letters section in the next recipe.