Popup list

We will now learn how to create the popup list, see its parameters, and create a difficulty selector for our game.

  1. Select the Panel GameObject and create a new child with Alt + Shift + N.
  2. Rename that new child as Difficulty. It's our difficulty box container.
  3. Navigate to NGUI | Open | Widget Wizard and perform the following steps:
    1. Select Popup List as Template
    2. Select Dark as Foreground.
    3. Select Dark as Background.
    4. Select the Highlight sprite as Highlight.
  4. With our Difficulty GameObject selected, click on the Add To button.

Parameters

A Popup List GameObject has just been created. Let's look at its parameters:

  • Atlas: This is the atlas used for the popup list's sprites.
  • Font: This is the font used for the popup list's options.
  • Text Label: This is the label to update when Popup List changes selection.
  • Options: This is the list of options that will pop up—one per line.
  • Default: This is the option selected at start.
  • Position: You may force the list of options to appear Above or Below the Popup List's button. If this parameter is set to Auto, NGUI will choose one of both depending on the available space.
  • Localized: This enables localization on options.
  • Background: This is the background sprite for the popup list's options container.
  • Highlight: This is the sprite for the currently hovered option.
  • Text Color: This is the options list's text color tint.
  • Background: This is the popup list's background color tint.
  • Highlight: This is the hovered option's background color tint.
  • Padding: This is the padding of the X and Y options.
  • Text Scale: This is the options' text scale.
  • Animated: If this is unchecked, the options' display will be instantaneous.
  • Notify: This is the GameObject that lets you choose a method to call when the selected option changes.

Below the UIPopup List component, we have the usual UIButton and UIPlay Sound components that we have already seen before.

Note

A Popup Menu template is also available in the Widget Wizard. The only difference is that the menu does not indicate which choice you have selected; the button's label is not updated.

Creating a difficulty selector

We will now use our new Popup List GameObject to select the game's difficulty level as shown in the following screenshot:

Creating a difficulty selector

Let's create this difficulty selector as shown in the following steps:

  1. Select the Background and Label GameObjects from Sound and perform the following steps:
    1. Duplicate them.
    2. Drag-and-drop them into our Difficulty container.
  2. Select the Background GameObject from Difficulty and enter its Pixel Offset parameter to {420, 43}.
  3. Select the Label GameObject from Difficulty and change its text to [AAFFFF]Difficulty.
  4. Select our Popup List in the Hierarchy view and perform the following steps:
    1. Rename it as Popup.
    2. Type in Normal and Hard separated by a line.
    3. In Text Color, change R to 190, G to 250, B to 255, and A to 255.
    4. In Background, change R to 70, G to 250, B to 255, and A to 255.
    5. In Highlight, change R to 70, G to 255, B to 150, and A to 255.
    6. In Hover, change R to 70, G to 255, B to 150, and A to 255.
  5. Attach a component to it by navigating to NGUI | Attach | Anchor and perform the following steps:
    1. Drag the Background GameObject from Difficulty in the Container field.
    2. Enter Pixel Offset as {-76, -20}.
  6. Select our popup's Sprite GameObject and perform the following steps:
    1. In Color Tint, change R to 170, G to 255, B to 190, and A to 255.
    2. Enter Depth as 3.
  7. Select our popup's Label GameObject and perform the following steps:
    1. In Color Tint, change R to 135, G to 255, B to 170, and A to 255.
    2. Enter Depth as 4.

Ok, we now have a Popup List GameObject that lets us select the game's difficulty level. Your Hierarchy panel should look like the following screenshot:

Creating a difficulty selector

Now it's time to link it to a method that will take that difficulty into account. Do this by performing the following steps:

  1. Open our GameManager.cs script.
  2. Declare a new enum for our difficulty levels as follows:
    public enum Difficulties
{
  Normal,
  Hard
}
  3. Declare a new Difficulty variable to store the current difficulty as follows:
    public static Difficulties Difficulty = Difficulties.Normal;

We used a static variable because it won't be destroyed when loading the game scene. By default, the difficulty level is set to Normal.

Now we need to add the OnDifficultyChange() method that will change our Difficulty variable when Popup List changes state as follows:

public void OnDifficultyChange()
{
  //If Difficulty changes to Normal, set Difficulties.Normal
  if(UIPopupList.current.value == "Normal")
  Difficulty = Difficulties.Normal;
  //Otherwise, set it to Hard
  else Difficulty = Difficulties.Hard;
}

Our method is ready; we need to call it when Popup List changes state. Do so by performing the following steps:

  1. Save all the modified scripts and return to Unity.
  2. Select the Popup List GameObjectfrom Difficulty and perform the following steps:
    1. Drag our GameManager GameObject into the Notify field.
    2. For the Method field, select GameManager.OnDifficultyChange.

Now, the Popup List GameObject will change the Difficulty variable according to its value. We will be able to access this static variable once we're in the game.

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

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