NGUI Basics

• Adding GUI Elements

To add GUI elements, follow the steps below:

Go to Widget Tools
On the drop down menu next to the word "Template", you can choose what elements to add.

When you click the drop down menu next to the word "Background",
you can choose different textures.
These textures are already packed inside the Atlas prefab.
To choose other textures, you must use the prefab with that texture.
For resources loading sake, it is recommended to use as few Atlas prefabs as possible.
To know how to add a texture to a prefab, please visit:

On the circle button next to the "Add to" option,
you can choose which object to add the GUI element to.
Only add to the Panel or children of the Panel, since the Panel will be the parent of all GUI in this scene.

• Different Elements

Label
Labels are simple text boxes 

Sprite
Sprites are simple textures, they can act as background, decors, etc. There are 4 kinds of Sprites:

1. Simple - A sprite that is spawned at the texture resolution. You can scale them but they will be distorted on scaling.
2. Sliced - A sprite that is spawned at texture resolution. Scaling them will ignore the border and scale at the center.
3. Tiled - A sprite that is spaned at texture resolution. Scaling them will tile them.
4. Filled - A sprite that is spawned at texture resolution. You can change the fill amount. For example, a health bar will be made to proportionate the fill amount to current health.

To change the type of sprites, add the sprite similar to Fig.3.
Select the sprite from the Hierarchy Tab.
The Inspector Tab will then show the components of the sprite.
Change the type as shown in red.

When the sprite type is changed, different options will be shown in the Inspector Tab. Change them to fit your needs.

Button
Buttons are simply spawning a Label on top of a background (sprite). NGUI does this automatically and will scale the whole thing to the right size. A collider is also added to capture the on click event.

Texture
A texture is used to add a simple texture to the scene. It is used to for texture not added to the Atlas prefab. Since it requires full self-customization (like manually adding scripts components), it is not recommended to be used.

Progress Bar
Progress bar is used to make fill-able bars like timers, health/mana bars, etc. It is comprised of 2 sprites, a simple and a filled.

Input
Input can be used to make a type-able box for use in chatboxes.