Shadow and Outline effects in Unity GUI.

One of the ways to create a text with shadow is displaying the text two times, the second time – with a small shift and shadow colour behind the first one. This solution is widely used, if the graphic library does not provide own means for display of shadows.

Such a solution is inconvenient though, because you need to create two objects for each text with shadow effect, and if the text is dynamic, then you have to ensure updating of text in both objects.

Simple text and text with shadow created manually

Unity GUI available from 4.6 version, allows to match two effects on the text: «Shadow» and «Outline». As you can guess from the names – the first effect adds a shadow and the second one – outline.

But these effects can be applied not only to the text (Text), but also to the image (Image). And since the text and the image are key blocks of all other UI elements, these effects can be applied to any other UI element as well. For example to the button:

Buttons with Shadow and Outline effects

If we look in the initial code of Shadow and Outline components, we will see that these components, in a fact, do the same thing: Shadow creates a copy of UI component’s geometry and shifts it some pixels aside; Outline creates four copies and shifts them in four opposite directions on x and y axes which provide the outline effect.

Let’s ponder what else we can achieve using these components: Simple outline for the selected objects. You do not need to draw two conditions for each image or handle the colour, you can simply add Outline effect and enable it for the selected object.


Extracting of image by enabling Outline component

Shadows of objects which “go beyond” further than usual shadows of UI elements.

For example, you can display some planes and their shadows on the ground, and imitate sun motion by changing one parameter. (Of course you won’t create game mechanism on GUI elements, but if you need only one simple scene, then why not).

Planes shadows and their shift over time  

Effect of double objects.

For example, you want to apply doubling effect on HUD when your hero is heavily hit or drinks much alcohol. This simply script, applied to all UI objects of the window will help you to achieve the necessary result.

Doubling effect in UI element

You are welcome to write your own ideas on using Shadow, Outline and other effects to the maximum extent in comments.

Leave a Reply

avatar
  Subscribe  
Notify of