Animations with NGUI

One great aspect of NGUI is that you can use Unity's animation system on any kind of widget. There also are some Tween components that let you modify most values over time, such as dimensions, color, and scale. For example, you can change an object's color from color A to color B in 5 seconds.

We have a nice main menu. But we actually have our options that are constantly displayed. That is not very user friendly.

We will use animations and tweens to hide our options and show them only when the user clicks on the Options button. With options hidden, our menu will look as shown in the following screenshot:

Animations with NGUI

But first, let's make our powers' apparition smoother.

Smooth powers apparition

Let's add Scale Tweens on our prefabs to make them appear smoothly by performing the following steps:

  1. In the Project view, select our SelectedBomb prefab.
  2. Attach a Scale Tween component by navigating to Component | NGUI | Tween and perform the following steps:
    1. Set its From parameter to {0, 0, 0,}.
    2. Set its Duration to 0.2.
  3. Right-click on the Tween Scale component and then click on Copy Component.
  4. Select our SelectedTime, Bomb, and Time prefabs.
  5. In the Inspector view, right-click on any existing component name and click on Paste Component As New.

Now, as soon as these widgets are created, they scale from 0 to 1 in 0.2 seconds, which makes them appear smoothly.

We can now see how we'll hide and show options using a button.

Clipping to hide options

First, we have to hide our option boxes. To do that, we will use Panel Clipping and increase their width when we need to show them. Let's set up the Clipping option:

  1. Select our Window GameObject from MainMenu and set its Dimensions to 515 x 850.
  2. Select the MainMenu GameObject and perform the following steps:
    1. Set its Depth in UIPanel to -1.
    2. Create a new child for MainMenu with Alt + Shift + N.
    3. Rename this new child as Container.
  3. Select our new Container GameObject.
  4. Attach a Panel component to it by navigating to Component | NGUI | UI. Then perform the following steps:
    1. Set its Depth to 0.
    2. Set its Clipping parameter to Alpha Clip.
    3. Set its Size to 515 x 1080.
  5. Fold all the children of MainMenu using the arrow next to each of them.
  6. Select every child of MainMenu, except the new Container child, and drag them all inside our new Container GameObject.

Good, our options are now hidden. Your Hierarchy should look as shown in the following screenshot:

Clipping to hide options

Let's add an Options button that will show or hide these options:

  1. Select and duplicate our Play GameObject from Buttons and rename this new duplicate as Options.
  2. Select our new Options GameObject from Buttons and perform the following steps:
    1. Set its Side parameter in UIAnchor to Bottom.
    2. Reset its Pixel Offset in UIAnchor to {0, 0}.
    3. Set its Size in Box Collider to {140, 40, 0}.
    4. Remove its Load Level On Click component.
  3. Select our Background GameObject from Options and set its Dimensions to 140 x 40.
  4. Select our Label GameObject from Options:
    1. Change its text to Options.
    2. Set its Overflow parameter to Shrink Content.
    3. Set its Dimensions to 90 x 25.

Ok, so now we have an Options button. Next, we want it to enlarge our Window and the Panel Clipping width of Container when clicked. We can do this using code, but we will use tweens and animations in the following manner to see how they work:

  1. Select our Window GameObject in Container.
  2. Attach a Tween Width component to it by navigating to Component | NGUI | Tween. Then perform the following steps:
    1. Set its From parameter to 515.
    2. Set its To parameter to 1300.
    3. Set Duration to 0.5.
    4. Reset Dimensions to 515 x 850.
    5. Disable the Tween Width component to prevent it from tweening at start.

We have a Tween component that will resize the width of Window when activated. Let's use the UIPlay Tween component to start it when the Options button is clicked on:

  1. Select our Options button GameObject.
  2. Attach a Play Tween component by navigating to Component | NGUI | Interaction. Then perform the following steps:
    1. Drag our Window GameObject from Container in the Tween Target field.
    2. Set the Play direction to Toggle.

Click on play. You will see that the window resizes as needed when Options is clicked. However, the Clipping parameter doesn't. Let's correct this using a Unity animation:

  1. Select our Container GameObject from MainMenu.
  2. Open the Animation window by navigating to Window | Animation.
  3. Click the red record button.
  4. Save the animation as ShowOptions.anim and perform the following steps:
    1. Re-enter 515 for the clipping X Size from UIPanel to add a key.
    2. Move the time cursor in the Animation window to 0:30.
    3. Enter 1300 for the clipping X Size from UIPanel to add a key.
    4. Click on the red record button again to finish.
  5. Uncheck its Play Automatically Boolean in the Animation component.

We have our animation ready. Now, let's link the button to the animation in the following manner:

  1. Select our Options GameObject from Buttons.
  2. Attach a Play Animation component to it by navigating to Component | NGUI | Interaction. Then perform the following steps:
    1. Drag our Container GameObject from MainMenu in the Target field.
    2. For the Clip Name parameter, type in ShowOptions.
    3. Set the Play direction to Toggle.

Click on play. Our window and clipping both resize perfectly in both directions when the Options button is clicked.

But you can see that our Options widgets aren't visible until you actually drag the main menu around; that's because the clipping is not refreshed after the animation.

  1. To solve this, we can simply force a Drag at the end of the Animation option.
  2. Select our MainMenu GameObject and perform the following steps:
    1. Create and add a new UpdatePanel.cs script to it.
    2. Open our new UpdatePanel.cs script.
  3. Now, add this new UpdateNow() method to the script that will force a drag of (0, 0, 0) value on our MainMenu:
    public void UpdateNow()
{
  //Force a drag of {0, 0, 0} to update Panel
  GetComponent<UIDraggablePanel>().MoveRelative(Vector3.zero);
}
  4. Save the script and then perform the following steps:
    1. Select our Options GameObject in Buttons.
    2. Drag our MainMenu GameObject in the Notify field of the UIPlay Animation component.
    3. Choose our new UpdatePanel.UpdateNow method for the Method field.
  5. Click on the play button. The Options boxes now appear after the animation!

Great! We have used NGUI's Tween and Play Animations components to enhance our UI and make it nicer and more user friendly.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.188.138