
Unity UI Cookbook
By :

In this recipe, you will learn how to create a distance displayer, which can be a very useful feature. For instance, when we want to display the proximity of an object or a character, a visual displayer or even an auditory distance displayer can give us a better indication of how far or close we are from a particular thing. This is done in order to assist us during gameplay, for example, to avoid a particular enemy, or not enter a dangerous region of a game.
To begin, we have to create a UI image that will be our distance displayer. Right-click on the Hierarchy panel, then go to UI | Image, and rename it DistanceDisplayer. Of course, it is possible to resize the image, change Source Image, and then place it as we wish in Canvas.
We are going to change the color of the Image (Script) component. However, in order to avoid color distortion on our HUD component, we should make Source Image completely white, with the form of the part we want to change...
Change the font size
Change margin width
Change background colour