Control prefabs_Learning NGUI for Unity-QQ阅读男生玄幻网

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

Control prefabs

The plugin comes with a number of basic widget prefabs that we can drag-and-drop: buttons, scrollbars, checkboxes, and so on. We call these control prefabs.

Where are these control prefabs? In order to find them easily, you can simply type control in the Search bar (1) of your Project view, as shown in the following screenshot:

The search results (2) are the available control prefabs. You just have to drag-and-drop the one you want into the Hierarchy or Scene view—it's as simple as that!

Background

Drag the Control – Background prefab inside UI Root in the Hierarchy view. This will place it at the (0, 0, 0) local position.

Your Hierarchy view should now look like this, with these two new elements:

We now have a new background widget composed of two overlapped sprites:

Control – Background: This is a dark gradient
BG - Stripes: This is a tiled sprite representing small stripes

Select our new Control – Background GameObject, and then:

Rename it to Background.
Set UISprite's Size to 1700 x 900.

Ok. Now, select the Background | BG - Stripes GameObject, and then:

Rename it to Stripes.
Set widget Depth to -4.

We need to slightly organize our hierarchy. We'll create empty GameObjects to hold different parts of our main menu window. Select our UI Root GameObject, and then:

Create a new empty child with Alt + Shift + N.
- Rename this new empty child to Main
- Drag our UI Root | Background GameObject inside it
With our Main GameObject selected, hit Alt + Shift + N again.
- Rename the new empty child to Title
- Drag both our Label and Sprite GameObjects inside it

Ok, good. Your Hierarchy and Game views should now look like this:

We now have a Main GameObject that holds our window. Inside it, we can find two sections: Background and Title. Each of these sections has its own widgets.

Let's move our title to the top of our window and resize it properly:

Select our Title GameObject:
- Set its Transform position to {0, 400, 0}
Select its child Sprite GameObject:
- Set its UISprite's Size to 1700 x 100

Ok. Now, let's add a nice orange border to our window:

Select our Background | Stripes GameObject and duplicate it by pressing Ctrl + D.

Note

The new duplicate can have a scale of 1.00008 or a similar value. This is normal; it's due to internal float conversions. It has no effect on your widget's actual size. You can still reset it to 1 if you wish.
Rename this new duplicate to Border, and then:
- Change Type to Sliced
- Change Sprite to Highlight - Thin
- Change Color Tint to {R: 220, G: 140, B: 0, A: 255}
- Uncheck Fill Center to keep only the sprite's borders

Good. We now have a window that actually looks like one:

Before we move on to add buttons to the scene, let's see what the Prefab Toolbar is.

Control prefabs

Background

Note