Popup List_Learning NGUI for Unity-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

Popup List

Let's start by creating a Popup List. We'll review its parameters and configure it to become a language selection option.

Before we continue, let's create an empty GameObject to hold the language selection:

With our Options GameObject selected, hit Alt + Shift + N
Rename the new empty child Language

Ok, we're now ready to create the Popup List.

Creating the Popup List

Drag the Colored Popup (1) from our Prefab Toolbar inside our Language GameObject in the Hierarchy view, as shown in the following screenshot:

A new Popup List that looks like a button with an arrow symbol appears in the scene. Hit Unity's play button and click on the new Popup List. You can select any of the three default options; it's colored and animated, as shown in the following screenshot:

As you can see in the preceding screenshot, the Popup List is composed of four elements:

Control – Colored Popup List: This is the main element, with these four components:
- UISprite: This displays the actual button's sprite
- UIPopup List: This handles the list's behavior and parameters
- Box Collider: This is used to detect mouse and touch interactions
- UIButton: This handles the main button's states, colors, and events
Label: This is UILabel; it displays the currently selected option.
NGUI Snapshot Point 30: This is used by the Prefab Toolbar icon. Ignore.
Symbol: This is UILabel, displaying the letter V to create a symbol.

Ok. Now, let's see the Popup List's parameters.

Parameters of UIPopup list

Select Control – Colored Popup List. UIPopup List has nine parameter groups, as shown in the following screenshot:

The parameters are as follows:

Options: Type the different options your want to be available here.
Default: Select which option is selected by default.
Position: This defines where the Popup List appears—below or above the button:
- Auto: Above or below, depending on the available space
- Above: Force the Popup List to appear above the button
- Below: Force the Popup List to appear below the button
Alignment: Select the options' label alignment here.
Open on: Select one of the four available activation configurations:
- ClickOrTap: A left-click or tap displays the list
- RightClick: A right-click opens the Popup List
- DoubleClick: Double-click the button to open the Popup List
- Manual: The list can only be opened through code or events
Localized: If this parameter is enabled, your options will be localized.
Atlas: Here are parameters concerning the atlas used for the Popup List:
- Atlas: Select the atlas to use for this Popup List
- Background: Select a sprite used for the list's background
- Highlight: The sprite used for the highlighted (hovered) option
- Background: The color tint for the list's background
- Highlight: The color tint for the highlighted (hovered) option
- Animated: If enabled, the list appears smoothly after a click
Font: The following four parameters concern the font:
- Font: Select which font you want to use for the list
- Font Size: Select the font size to display the options in the list
- Text Color: Pick a color tint for the options in the list
- Padding: Set the space between one option and another
On Value Change: This is the parameter that lets you choose a method to call when the Popup List's selected value is changed. By default, the Popup List notifies Label to update it to the currently selected value.

Note

The Simple Popup List is just like Colored Popup List we just created, except that it does not have the down arrow symbol next to it.

We've reviewed the parameters of UIPopup List. Let's create a language selection box.

Creating a language selection box

We can now create the following language selection box:

The language selection box in the preceding figure is composed of three main elements:

The whole box's background—it's a UISprite attached to the container.
The selection box's title—it's a UILabel displaying the word Language.
The Popup List to actually select the language.

First, rename our Control – Colored Popup List GameObject to List.

Creating a background sprite

Let's start by creating the box's background sprite. It will be held by the container. Select our Language GameObject.

Now, you have two solutions to attach the UISprite component to it:

Using the toolbar: Navigate to Component | NGUI | UI | NGUI Sprite
Using the Add Component button, as shown in the following screenshot:
1. Click on the Add Component button in the Inspector view.
2. Type in sprite with your keyboard.
3. Navigate to NGUI Sprite with the down arrow of your keyboard and hit Enter, or directly click on it.

I strongly recommend that you use the second solution: it's faster and easier to use.

Tip

For the entire book, when you see "Attach the UISomething component", you can simply click on the Add Component button and type in the component's name (here, Something) without the UI prefix!

Now that we have the UISprite component attached to the Language GameObject, let's configure it to display a nice yellow background:

Select the Wooden Atlas for the first Atlas parameter.
Change Sprite to Highlight – Thin.
Change the sprite Type parameter to Sliced.
Change Color Tint to {R: 180, G: 125, B: 50, A: 255}.
Set Size to 460 x 280.
Set its Transform position to {-550, 85, 0}.

Ok, we have our background sprite. Let's add a title to this language selection box.

The title

Let's create a new label to display Language as the title of our selection box. With our Language GameObject selected, hit Alt + Shift + L to create a new child label widget.

Now, select this new Label GameObject, and set these parameters:

Change its widget's Size to 400 x 100.
Set Color Tint to {R: 255, G: 190, B: 10, A: 255}.
Set the Font parameter to Coalition.
Change Font Size to 52.
Set Text to Language.
Set its Transform position to {0, 65, 0}.

Ok, you should now have a title displayed with the Popup List floating in the box:

It's time to configure and resize our Popup List.

The Popup list

Select our Language | List GameObject, and follow these steps:

Change its widget's Size to 400 x 120.
In the Options field, type in this text:
```
English
Francais
```
Under the Atlas parameter group:
- Set the Background color to {R: 255, G: 200, B: 100, A: 255}
- Set the Highlight color to {R: 255, G: 130, B: 80, A: 255}
Under the Font parameter group:
- Change the Font parameter to Coalition
- Set Font Size to 50
- Set Text Color to {R: 255, G: 230, B: 120, A: 255}
- Set Padding to {8, 20}
Set its Transform position to {-200, -50, 0}.

Hit Unity's play button. You should notice that our Popup List looks good when opened, but the button's text is still black and small. That's because the font parameters we just changed only affect the Popup List itself.

We simply have to configure the button's label to look more like the Popup List. Select our Language | List | Label GameObject, and follow these steps:

Rename it to Value.
Change its Font parameter to Coalition.
Set Font Size to 50.
Change text to English just to preview the result.
Set Color Tint to {R: 255, G: 160, B: 50, A: 255}.

Great! The Language selection looks good. We will now consider that our game has subtitles—we need a second box to select the desired language for them too:

With our Language GameObject selected, hit Ctrl + D to duplicate it:
- Rename our new duplicate to Subtitles
- Set its Transform position to {-550, -220, 0}
Select the Subtitles | Label GameObject, and then:
- Change Text to Subtitles
Now, select the Subtitles | List GameObject, and set its Options field to:
```
None
English
Francais
```

That's it! We now have two Popup Lists to select the game and subtitles languages:

Now, let's see how we can create an input field.