It would be good to have our main menu window appear smoothly with a gradual scale increase. We'll do that using tweens.
Tweening is the process of automatically generating intermediate values between two start
and end
values. You define the start
and end
values manually, and let the computer do the calculations to go from start
to end
, applying smoothing methods if requested.
Considering this concept, you can tween scale, position, rotation, and more. Indeed, if we needed to tween our window's scale from 0 to 1, we could simply tween the three X
, Y
, and Z
scale values, and the window will gradually become bigger until it reaches its final size.
With NGUI, we have a component to do just that—the Tween Scale
component.
The Tween Scale
component can be added to any GameObject to configure a scale tween from one value to another within a given duration. Let's see how it works.
Add the Tween Scale
component to our main menu window:
UI Root
| Main
GameObject.scale
with your keyboard to search for components with that word.Ok, we've just added the Tween Scale
component to our main menu window. Let's see what its parameters are before we configure it.
Now added to our main menu window, the Tween Scale component has 10 parameters, as follows:
Table
component will be updated during the tween. The Table
component is used to align objects in a grid. We will use this component later on.Once
: The tween is played only onceLoop
: The tween plays in a loop indefinitelyPingPong
: The tween plays back and forth indefinitelyTime.timeScale
is not at 1. It can be useful to play tweens even when the game is paused using Time.timeScale = 0
.Now, we can configure it to smoothly enlarge our main menu at the start.
Let's configure it to enlarge our main menu window gradually. Set our Main
GameObject's Tween Scale component parameters as follows:
Hit Unity's play button. Now, our main menu window scales up from {0, 0, 0} to {1, 1, 1} in 0.6 seconds at start!
The Animation Curve we've set makes the ending of the tween smoother—it's called an Ease Out effect on the tween.
OK. Now, let's see how we can make this window scale down when we exit the game.
3.143.235.219