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:
- In Hierarchy, select our
UI Root|MainGameObject. - At the bottom of the Inspector view, click on the Add Component button.
- Type
scalewith your keyboard to search for components with that word. - Select Tween Scale and hit Enter or click on it with your mouse.
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:
- From: The X, Y, and Z values for the initial local scale at the start of the tween.
- To: Set here the X, Y, and Z values for the final local scale at the end of the tween.
- Update Table: If checked, the
Tablecomponent will be updated during the tween. TheTablecomponent is used to align objects in a grid. We will use this component later on. - Play Style: Choose one of these three play styles:
Once: The tween is played only onceLoop: The tween plays in a loop indefinitelyPingPong: The tween plays back and forth indefinitely
- Animation Curve: This is the curve used to define the tween's acceleration. Click on the displayed curve to display Unity's Animation Curve editor. At the bottom of the animation curve editor, you can choose one of the presets—they are usually enough to define a tween acceleration method.
- Duration: You can define here the tween's duration.
- Start Delay: Enter here the desired delay before the tween starts playing.
- Tween Group: Set here the group ID for this tween. A tween group is used to differentiate multiple tweens attached to the same GameObject (different groups) or play multiple tweens at once (same group).
- Ignore TimeScale: If checked, the tween will always play at normal speed even if
Time.timeScaleis not at 1. It can be useful to play tweens even when the game is paused usingTime.timeScale = 0. - On Finished: Here, you can choose which method you want to call as soon as the tween is finished.
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:
- Set the From values to {0, 0, 0}.
- Leave the To values to {1, 1, 1}.
- Set a smoother Animation Curve:
- Click on the default linear animation curve (3)
- The Curve editing window appears
- At the bottom of the window, you'll find curve presets. Click on the one that matches the one on the previous image (3)
- Close the Curve editing window
- Set the Duration to 0.6 seconds.
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.