Displaying a sprite

Now that we have displayed text, let's display a sprite.

Creating the sprite widget

Make sure you have nothing selected, and navigate to NGUI | Create | Sprite, as follows:

Note

The newly created widget will be nested as a child of the current selection. To avoid having our new sprite as a child of our Label, make sure you have nothing selected-UI Root will be the default parent.

Tip

You can also use the shortcut Alt + Shift + S to create a new sprite.

Now, take a look at the following Hierarchy view; you'll see a new GameObject called Sprite:

Great, we have a sprite in the scene. Let's see its Inspector parameters.

UISprite parameters

Let's define some terms as we review UISprite's parameters:

1. Atlas: An atlas is an image file containing our sprites and bitmap fonts. Assembling them all together in one large texture enables NGUI to render an entire UI in only one single draw call! That field determines which atlas is going to be used to display this sprite.
2. Sprite Type: Select one of these five different behaviors:
   • Simple: This displays a simple image.
   • Sliced: This is used for nine-slice sprites, letting you resize sprites without stretching the corners. We'll detail and try this shortly.
   • Tiled: This is used for tiled sprites for patterns that can be repeated indefinitely.
   • Filled: This is used for progress bars. This hides the sprite partially, depending on a fill amount value and direction.
   • Advanced: This allows you to choose a different sprite type for each border and center.
3. Flip: This flips the sprite in one of the following directions you define:
   • Nothing, Horizontally, Vertically or Both
4. Color Tint: This is the sprite's color tint.

Right now, nothing is displayed because we haven't chosen which atlas and sprite we want to use.

Configuring the sprite

We have reviewed the parameters of UISprite. Let's configure it to display something.

Selecting an atlas

We must select an atlas. We'll use an example atlas that comes with NGUI.

Select our Sprite GameObject, and click on the Atlas (1) button showed in the previous screenshot. The following window appears:

Select Fantasy Atlas (2). If the atlas is not listed, click on the Show All (3) button of the atlas selection window, and it will appear along with other example atlases.

Selecting a sprite

Now that we have selected an atlas, we can select which sprite to render, as shown in the following screenshot:

Perform the following steps:

1. Click on the Sprite (1) button to open the sprite selection window. Within this new window, select the Dark sprite by double-clicking on it.
2. Change the sprite Type (2) to Sliced.
3. Click on Color Tint (3) and set: {R: 255, G: 180, B: 0, A: 255}.

Your Game view should now look like this:

Ok. We now have a square sprite. But we have a problem: it's rendered over our text label. That's because the sprite's Depth value is higher than the label's.

Note

The new sprite's Depth value is higher than the label's because NGUI automatically sets a new widget's Depth to the highest to make sure it is displayed over previous ones.

Set the following widget parameters for our new sprite in order to have this result, as follows:

1. Depth: The label's depth is at 0. Set this one to -1 so that it displays behind.
2. Size: Set it to 400 x 80 to create a box around our Main Menu label.

Great, our first sprite is correctly configured! Before we move on, we can try out the different sprite types.

Sprite types

With NGUI, we have four basic types of sprites:

• Sliced
• Simple
• Tiled
• Filled

Now that we have a sprite onscreen, let's try them and see their parameters.

Sliced

Let's start with the Sliced type of sprites, since our sprite is already configured like that.

Select our UI Root | Sprite GameObject in the Hierarchy view. Look at the Preview window at the bottom of Inspector:

You can see that the Dark sprite's size is only 17 x 17 pixels. We have stretched it up to 400 x 80, and it still looks good-no pixelation or stretched corners!

That's because it is a nine-slice sprite: the four dotted lines in the preceding screenshot represent the slicing lines. Corners always remain at the same size, while other parts of the sprite stretch to cover the demanded area. Sliced sprites are thus very useful to create windows, borders, title bars, and more.

Simple

A Simple sprite is used to display an icon or a specific image that does not require slicing. In order to avoid pixelation, you shouldn't resize it too much over its original file size.

If you switch our sprite's Type from Sliced to Simple, slicing parameters are ignored, and our 17 x 17 sprite is stretched and looks terrible, as shown in the following screenshot:

Ok. We can now move on to tiled sprites.

Tiled

A Tiled sprite is a pattern that can be repeated indefinitely. In order to illustrate it effectively, select our Sprite GameObject and follow these steps:

1. Change its Atlas to the Wooden Atlas.
2. Set the Type parameter of UISprite to Tiled.
3. Change its Sprite to the Stripes 1 sprite.

Within the Game view, you might notice that our background is now diagonal orange stripes. The pattern is repeated and it looks good compared to a simple stretched sprite.

Here's a comparison:

In the preceding image, the same sprite is used. On the left-hand side, the sprite Type is set to Simple: the sprite is simply stretched and pixelated. On the right, the sprite Type is set to Tiled: the pattern is repeated and not stretched.

Now that we've seen how tiled sprites work, let's talk about filled sprites.

Filled

A Filled sprite is displayed partially depending on a FillAmount value between 0 and 1. Set the Type parameter of our UISprite to Filled. Ok. Now, we can review the three new parameters, as follows:

The following parameters are specific to filled sprites:

1. FillDir: Select one of the following five fill directions:
   • Horizontal: The sprite is filled horizontally. This is usually used for progress bars and life gauges.
   • Vertical: The sprite is filled vertically.
   • Radial90: The sprite is filled around a 90-degree angle.
   • Radial180: The sprite is filled around a 180-degree angle, resulting in a car windshield wiper effect.
   • Radial360: The sprite is filled around a 360-degree angle, resulting in a clock or timer...