In this recipe, you will learn how to create an extendable and rotating UI element with a final fade effect. This recipe is an extension of the previous one. In fact, we will add some controllers to the rotation. By extending the script that we made in the previous recipe, we can create more complex decorating elements for our UIs.
using UnityEngine.UI;
statement at the beginning of the script, since we are going to use the Image
class, and it is not included within the body of script that we just copied. As before, we can also add [RequireComponent(typeof(Image))]
to say that to use this script, it requires an Image component attached to the same game object of this script.public float rotationSpeed;
Update()
function, we have to change not only SizeDelta
, but also its rotation. For this reason, we add this line at the bottom of the function:rectTransform.Rotate (0,0 , Time.deltaTime * rotationSpeed);
rotationSpeed
as well as the speed and surviveTime
, if we didn't do it before. Just to test, we can set the speed to 20
, rotationSpeed
to 30
, and surviveTime
to 10
. Finally, we can check whether everything works as it should. In the following screenshot, you can see a frame that shows this effect:This script works in the same way as the one in the previous recipe. However, here we can also change the rotation. With the rectTransform.Rotate()
function, we can modify the orientation of the object within the space. This is done according to these variables: Time.deltaTime
, which is the time passed since the last frame, and rotationSpeed
. If the latter has a positive value, the UI element will rotate clockwise. But if it has a negative value, the element will rotate anticlockwise. Therefore, designers can choose which is best for the UI. This is because the sign of the variable changes the direction of the rotation made by the rectTransform.Rotate()
function.
We can definitely improve the effect with slight variations, which can be learnt in the following sections.
In order to create a shining effect, we can use an image of a shining star. We also need a transparent background for this image. After we have placed the image in Extendable and Rotating Element, let's rescale the image and place it in our UI, where we want to have the shining effect. Set speed
to 10
, rotationSpeed
to 30
, and surviveTime
to 1
. Next, press the play button to see the shining effect. If our image is unique, or if we are not completely satisfied with the effect, we can tweak the variables until we reach a good effect that suits our needs. Otherwise, we can refer to the following section.
In this section, we will see how to improve our shining effect by making it appear and then disappear. To do this, we need to rewrite the code using a coroutine.
To begin, let's add a new public bool
variable. Thus, we can set it in the Inspector. It will store information on whether we want to reverse the rotation or not. Therefore, we can add this line:
public bool reverseRotation;
In the Start()
function, let's consider this line:
GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false);
Substitute it with these two:
GetComponent<Image>().CrossFadeAlpha(0f, 0f, false); GetComponent<Image>().CrossFadeAlpha(1f, surviveTime, false);
The explanation of this can be found in the previous recipe, in the Fade in instead of fade out section.
Next, we have to double the time before the object is destroyed, so we rewrite the Destroy()
function in this way:
GameObject.Destroy(gameObject, surviveTime*2);
Finally, at the end of the Start()
function, we have to call our coroutine, even if we haven't created it yet, like this:
StartCoroutine ("fadeAway");
After we have done this, we need to write our coroutine. Hence, we can add this portion of code at the end of our script:
IEnumeratorfadeAway(){ yield return new WaitForSeconds(surviveTime); GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false); if(reverseRotation) rotationSpeed = -rotationSpeed; }
The first instruction waits for the initial fade effect to finish. Then, in the second line of the script, we launch another fade effect to make our extendable and rotating UI element fade away. In the if
statement, we check whether the variable that we have set in the Inspector is true
, and if it is, it will reverse the sign of the rotationSpeed
variable in order to change the direction of rotation.
Let's save the script and finally test whether everything works as expected.
We are not limited to using only one axis of rotation. In fact, we can substitute the following line with the next one:
rectTransform.Rotate (0, 0 , Time.deltaTime * rotationSpeed);
Here is the line that we can use instead of the preceding one:
rectTransform.Rotate (Time.deltaTime * rotationSpeed, 0 , Time.deltaTime * rotationSpeed);
In this case, we are rotating the object along the x axis as well. But feel free to test different combinations as you wish, such as this one:
rectTransform.Rotate (Time.deltaTime * rotationSpeed, Time.deltaTime * rotationSpeed , 0);
In the preceding case, we are rotating only on the x and y axes.
We may want to make the effect more customizable in order to get very nice variations. To do this, we can add more variables to be set in the Inspector, and control each axis of rotation. Along with the Changing the speed for each axis subsection in the There's more… section of the previous recipe, this allows us to gain full control over the effect. If we use our imagination, the number of beautiful effects that we can create is endless.
Let's start! First of all, we have consider the following variable:
public float rotationSpeed;
Substitute it with these:
public float rotationSpeedX; public float rotationSpeedY; public float rotationSpeedZ;
By doing this, we can control each axis independently of the others, whereas this didn't happen in the previous section.
Now, let's look at the following line in the Update()
function:
rectTransform.Rotate (0, 0, Time.deltaTime * rotationSpeed);
Substitute it with this one, in which the speed
variable is different for each axis:
rectTransform.Rotate (Time.deltaTime * rotationSpeedX, Time.deltaTime * rotationSpeedY , Time.deltaTime * rotationSpeedZ);
Save the script, and try different numbers along all the rotation speed variables. Of course, don't forget to use a nice image. Refer to the next section to get an idea on how to use this script.
If we made the changes in the previous section, creating a butterfly should not be a problem. In fact, simply use a symmetric image of a butterfly and set both rotationSpeedX
and rotationSpeedZ
to 0
. Now, just set a positive number for rotationSpeedY
, maybe more (around 300
). Remember that the higher the value, the faster the butterfly's wings flap.
3.146.176.88