In this recipe, you will learn how to create an extendable UI element with a final fade effect. These kinds of decorative elements are useful in the background with smaller graphics such as nice images or simple shapes. Often, they are used in main or pause menus in order to make the background dynamic and give more life to the menu. Additional techniques about how to animate the menu itself can be found in Chapter 6, Animating the UI.
- First of all, we need to create a UI element. In this example, we will use a square, but you can also use a decorative star or another shape that you prefer. To do this, right-click on the Hierarchy panel and then navigate to UI | Image. Rename it to Extendable Element. Of course, it is possible to resize, change the source image, and place an image that we have chosen.
- Next, we need to create a script that extends our image on the screen and gradually decreases the alpha channel of the color. By decreasing the alpha channel, it will begin to fade away. So, let's go to Add Component | New Script and name it to ExtendableElementScript. Then click on Create and Add.
- Now, double-click on the script in order to edit it. Since we are going to use the
Imageclass, we have to add theusing UnityEngine.UI;statement again at the beginning of the script. Before the beginning of the class, we can add this line:[RequireComponent(typeof(Image))](without the semicolon at the end). By doing this, we are saying that in order to use this script, it requires an Image component that is attached to the same game object of this script. In addition, this prevents designers from using this script without an Image (Script) component. - We need two public variables to be shown in the Inspector so that designers can tweak them, one for the speed and another for the amount of time the UI element continues to expand before it is destroyed. Thus, we can add the following lines to our script:
public float speed; public float surviveTime;
- Furthermore, we need three private variables, two of them to keep track of the
RectTransformcomponent, and the third one to keep track of the originalSizeDeltawithout seeking it every time. In addition, a couple of other variables are used to accumulate the time for every frame. So let's add the following:private float x, y; private RectTransform rectTransform; private Vector2 originalSizeDelta;
- As usual, in the
Start()function, we will store the reference of the game elements inside our variables. We assignRectTransform, attached to the same game object in which this script is placed, by calling theGetComponent<RectTransform>()function, to therectTransformvariable. Furthermore, we will set theoriginalSizeDeltavariable. Therefore, we can write this code:rectTransform = GetComponent<RectTransform> (); originalSizeDelta = rectTransform.sizeDelta;
- Inside the
Start()function, we have to start the fade effect by callingCrossFadeAlpha()and then passing some parameters. One is the final alpha value, which is0fin this case. Another is the time of the fading, which in this case is the entire span of time before the object is destroyed:GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false);
- In the last line of the
Start()function, we call theGameObject.Destroy()function to destroy the game object in which this script is attached after the time that we have specified in the Inspector through thesurviveTimevariable:GameObject.Destroy(gameObject, surviveTime);
- Now, in the
Update()function, we have to increase thexandyvariables by the time from the last frame multiplied by the speed. Finally, we set newsizeDeltaofrectTransformequal to aVector2withxandyas coordinates plusoriginalSizeDelta:x += speed * Time.deltaTime; y += speed * Time.deltaTime; rectTransform.sizeDelta = new Vector2(x, y) + originalSizeDelta;
- For the next step, we can save the script and come back to Unity. From the Inspector window we can tweak
speedandsurviveTime. These values depend on what we are trying to achieve, but let's set them to 20 and 10 respectively. We can test the script and see whether everything works as it should. In this screenshot, we can see a frame of the effect:
In the Start() function, we launch two Unity coroutines. The first one is launched from the GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false); line, and the second one is launched from GameObject.Destroy(gameObject, surviveTime);.
The first coroutine gradually changes the Alpha value to create the fade effect. The second destroys the game object when it is no longer required. As a result, it improves the performance of our game, because the scene doesn't contain futile objects.
By changing this effect, it is possible to achieve very interesting variations of it. This is what we are going to learn in the following sections.
We may want to let designers customize the effect more, for instance, by having different speeds for each axis. In order to implement this, we need to modify our script. Instead of a common speed variable, we need a speed variable for each axis. Therefore, we need a couple of variables. So, let's consider this line:
public float speed;
We replace it with these two lines:
public float speedX; public float speedY;
Now, in the Update() function, we have to change the way the x and y variables are updated. Thus, we can rewrite the code in the following way:
x += speedX * Time.deltaTime; y += speedY * Time.deltaTime;
When we do this,
x and y change accordingly to different speeds. We can set the variables again in the Inspector and check whether everything works.
We may want to reverse the process and have an element that appears instead of one that fades away. This could be a useful way of decorating our UIs differently. It is possible for us to mix the two ways in order to create a more decorative UI, where there are both elements that enter and elements that fade away. In order to do this, we need to change a couple of lines of code. Keep in mind that at the end, the object will be destroyed anyway.
First, we need to consider the CrossFadeAlpha() function:
GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false);
Change it to these two lines:
GetComponent<Image>().CrossFadeAlpha(0f, 0f, false); GetComponent<Image>().CrossFadeAlpha(1f, surviveTime, false);
In order to understand the previous lines, we need to remember that the CrossFadeAlpha() function doesn't take care of the initial Alpha value of the Canvas Renderer component. Therefore, the first function sets Alpha of the Canvas Renderer component to 0 immediately so that the image is not visible at the beginning. The second function increases the Alpha value until 1f over the time specified in the surviveTime variable, creating the fade-in effect.