Close buttons

Our windows are draggable pop ups; we should add a close button in the top-right corner:

Close buttons

In order to do this quickly and easily, we can use a component called UIForward Events. It's a legacy component—it is now recommended that you use UIEvent Trigger instead. We'll try both because it's good that you understand how they work.

Before we continue, let's create the close button for our main menu:

  1. Select our UI Root | Main | Buttons | Exit GameObject.
  2. Hit Ctrl + D to duplicate it.
  3. Rename the new duplicate to Close.
  4. Remove its attached UIPlay Tween component.
  5. Change the UISprite Size to 100 x 100.
  6. Set its Transform position to {800, 400, 0}.
  7. Select our UI Root | Main | Buttons | Close | Label GameObject.
  8. Rename it to X.
  9. Set its UILabel Text to a lowercase x character to look like a cross.
  10. Change its UILabel Font Size to 55.

The close button is ready. Let's see how the UIForward Events component works.

UIForward events

This (legacy) component is very simple to use. You just have to select which events you want to forward to another target GameObject.

Closing the main menu

Let's create the close button for our main menu:

  1. Select our UI Root | Main | Buttons | Close button GameObject.
  2. In the Inspector view, click on the Add Component button.
  3. Type forward to search for components with that word.
  4. Select Forward Events (Legacy) and hit Enter.

We've added the Forward Events component to the close button. Configure it like this:

Closing the main menu

In this configuration, we've dragged our main menu's Exit button in the Target field and checked the On Click option.

Consequently, when the Close button is clicked, the OnClick() event is forwarded to our Exit button.

If you hit Unity's play button and click on the Close button (cross), you'll see that it's exactly the same as if you clicked on the Exit button. That's an easy event forwarding!

Closing options

Let's do the same for our options window:

  1. Select our UI Root | Main | Buttons | Close button GameObject.
  2. Hit Ctrl + D to duplicate it.
  3. In the Hierarchy view, drag it inside our UI Root | Options GameObject.
  4. For its attached UIForward Events component:
    • Drag our Options | Confirm GameObject in the Target field

OK, so we have created two close buttons for our windows. Let's see what the UIEvent Trigger component is.

UIEvent Trigger

The UIEvent Trigger component gives us the possibility of notifying (call functions within) other components when an event occurs on the object it's attached to.

Force-saving the nickname

Currently, we have a slight problem with our input field for the nickname: the entered name is only saved when the user hits the Enter key. To be honest, most of our players won't do that. We need the nickname saved even if the Enter key is not pressed.

In order to do that, we can request UIInput to save its value when it's deselected.

Let's use the UIEvent Trigger component to force-save the input:

  1. In the Hierarchy view, select Options | Nickname | Input.
  2. In the Inspector view, click on the Add Component button.
  3. Type trigger to search for components with that word.
  4. Select Event Trigger and hit Enter or click on it with your mouse.

Configure the new UIEvent Trigger component like this:

Force-saving the nickname
  1. Click on the On Deselect parameters group to show it.
  2. Drag our Nickname | Input child GameObject in the Notify field.
  3. Select the UIInput | SaveValue method for the Method field.

Hit Unity's play button. If you enter a nickname and click anywhere else, such as on the Confirm or the Close button, you'll see that the nickname is still saved. We successfully force-saved the input's value using the UITrigger Event component. It's time to see how NGUI's localization system works.

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

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