Adding sprites to Atlas

Let's add some sprites to our new Game atlas. We will add the following three different types:

  • Simple sprite: As its name suggests, it is simply an image displayed on screen
  • Sliced sprite: In this, the image is sliced in nine parts and it is resizable without stretching corners
  • Tiled sprite: In this, the tiling pattern is repeatable indefinitely

Let's start with the Simple sprites.

Simple sprites

It is time to create two sprites, Bomb and Time, which will illustrate our powers. First, we need to create the sprites and add them to our Game atlas. They will look as shown in the following screenshot:

Simple sprites

Note

You may either create them yourself, or download the Assets.zip file from http://goo.gl/bZu4mF.

If you wish to create your own sprites, a size of 128 x 128 will be enough. You can save them either as .png to support transparency, or as .psd files—they will be converted to the correct format when they will be imported in the Unity project.

Adding sprites to Atlas

When your Bomb and Time sprites are ready, or downloaded from the previous link, place them in a new Assets/Textures folder in your project. Then, perform the following steps:

  1. Open Atlas Maker from NGUI, or Alt + Shift + M.
  2. Make sure that our new Game Atlas is selected, as shown in the following screenshot:
    Adding sprites to Atlas
  3. In the Project view, select both our new Bomb and Time textures.
  4. Click on the Add/Update All button in Atlas Maker.

Good. Our two new sprites have been added to the Game atlas.

Available powers icons

Let's add the icons to our Time and Bomb prefabs on the scene and perform the following steps:

  1. In the Hierarchy view, select Background by navigating to PowersContainer | Grid | Bomb and perform the following steps:
    1. Duplicate it.
    2. Rename this new duplicate as Icon.
    3. Change its Sprite Type parameter in UISprite to Simple.
    4. Set its Depth to 6 so that it can be displayed over the background.
  2. Click on the Atlas button in UISprite and in the pop-up window, select our new Game atlas.

    Note

    If the new Game Atlas is not visible in the list, drag it from the Project view in the field next to the Atlas button.

  3. Click on the Sprite button in UISprite and in the pop-up window, select our Bomb sprite.
  4. Select the Label GameObject from Bomb and perform the following steps:
    1. Delete it—the icon and tool tip are enough!
    2. A pop-up window appears, asking you if you want to continue because you will lose the prefab connection. Click on Continue.
  5. Select the Bomb GameObject from our Grid.
  6. Click on the Apply button in the Inspector view to update the prefab.

Good, our Bomb prefab is up to date with its new icon. Let's add the icon for the Time prefab by performing the following steps:

  1. Select our Icon GameObject Bomb and perform the following steps:
    1. Duplicate it.
    2. Drag this duplicate inside the Time GameObject.
    3. Reset its Transform position to {0, 0, 0}.
    4. Change its Sprite parameter to our own Time sprite.
    5. Change its Dimensions to 75 x 75.
  2. Select the Label GameObject from Time and then perform the following steps:
    1. Delete it—the icon and tool tip are enough!
    2. A pop-up window appears, asking you if you want to continue because you will lose the prefab connection. Click on Continue.
  3. Select the Time GameObject from Grid.
  4. Click on the Apply button in the Inspector view to update the prefab.

Ok, our draggable powers prefabs now have their own icons.

Selected powers icons

Let's also add icons for our SelectedBomb and SelectedTime prefabs so that they look nicer:

Selected powers icons

Perform the following steps to achieve this:

  1. From the Project view, drag the SelectedBomb prefab in our Surface GameObject.
  2. In the Hierarchy view, select our Icon GameObject from Grid/Bomb and perform the given steps:
    1. Duplicate it.
    2. Drag this duplicate inside our new SelectedBomb instance.
    3. Reset its Transform position to {0, 0, 0}.
    4. Set its Depth to 5.
    5. Change its Dimensions to 120 x 120.
  3. Select the Label GameObject from SelectedBomb and delete it.
  4. Select the SelectedBomb GameObject from Surface and perform the given steps:
    1. Click on the Apply button in the Inspector view to update the prefab.
    2. Delete the SelectedBomb instance from the scene.

Let's follow the same steps for our SelectedTime prefab:

  1. From the Project view, drag the SelectedTime prefab in our Surface GameObject.
  2. In the Hierarchy view, select our Icon GameObject from Time and perform the following steps:
    1. Duplicate it.
    2. Drag this duplicate inside our new SelectedTime instance.
    3. Reset its Transform position to {0, 0, 0}.
    4. Set its Depth to 5.
    5. Change its Dimensions to 100 x 100.
  3. Select the Label GameObject from SelectedTime, and delete it.
  4. Select the SelectedTime GameObject from Surface and perform the following steps:
    1. Click on the Apply button in the Inspector view to update the prefab.
    2. Delete the SelectedTime instance from the scene.

That's it. We have our own two icons for our powers. Now, we can learn how to create and configure our own nine-sliced sprite.

Sliced sprites

We used the dark sliced sprite all along this book. Let's create our own. Then, we will change the power selection box and the background sprites of Main Menu, as shown in the following screenshot:

Sliced sprites

Adding a sprite to Atlas

You can use a 16 x 16 square sprite, such as the dark sprite. If you wish to have larger corners or add more details, simply use a larger texture size. You can also use the 64 x 64 Window.png file available in my Assets.zip archive.

When your new Window sprite is ready, place it in the Assets/Textures folder and perform the following steps:

  1. Open Atlas Maker by navigating to NGUI | Atlas Maker, or Alt + Shift + M and make sure our new Game atlas is selected.
  2. Select the new Window.png sprite file from Textures in the Project view.
  3. Click on the green Add/Update All button in the Atlas Maker window.

Ok, Window.png has been added to our Game atlas, but it isn't configured. Yet.

Configuring a sliced sprite

The Window sprite has been added to the atlas, but we still need to indicate the UIAtlas component where the slicing must occur on the sprite. Let's replace our Background of Powers, and configure its slicing parameters.

In the Hierarchy view, select the Background GameObject from Powers and perform the following steps:

  1. Change its Atlas parameter in UISprite to our Game Atlas.
  2. Change its Sprite to our new Window sprite.
  3. Click on the Edit button next to the Sprite field, as shown in the following screenshot:
Configuring a sliced sprite

We are now in the sprite's parameter window. Here, we can configure its Dimensions, Border, and Padding. Set these Border values to define the slicing lines:

Configuring a sliced sprite

The values shown in the previous screenshot might be different if you created your own sprite.

Note

As you change the Border values, dotted lines appear on the sprite at the bottom of the Inspector view in the Preview window.

The Window sprite should be sliced (as shown in the following screenshot) in the Preview window:

Configuring a sliced sprite

When you have entered your four values, you can click on the green Return to Background button in order to go back to where we were.

We now have a functional sliced sprite, but we need to adjust the title position of the powers. In the Hierarchy view, select our TitleLabel GameObject from Powers, and change its Pixel Offset in UIAnchor to {0, -18}.

Good! We configured our first sliced sprite and changed the power selection box's background sprite with it.

The Main Menu window

Let's change our Window sprite Main Menu too. In the Hierarchy view, select our Window GameObject from Container and perform the following steps:

  1. Change its Atlas to our Game Atlas.
  2. Change its Sprite to our new Window sprite.

The Main Menu title is not placed exactly inside the title bar. Let's change this by performing the following steps.

  1. Select the Title GameObject from Container, and change its Pixel Offset value in UIAnchor to {0, 10}.
  2. Select the Background GameObject from Title and deactivate it for now.
  3. Select the Background GameObject from Container and then perform the following steps:
    1. Change its Relative Size in UIStretch to {1, 0.95}.
    2. Change its Pixel Offset in UIAnchor to {0, -17}.

Great. That looks better. If you wish, you may change the nickname box's background sprites with our new Window sprite. You can even change the buttons by using the sliced sprite Button.png included in the Assets.zip file.

Note

The Button.png file can be used for non-button backgrounds too, such as the notification or tool tip backgrounds. Try it out!

Tiled sprites

Let's add a tiled sprite to create a space background for our Game scene.

You can use the Space.jpg file from the Assets.zip archive, or you may create a 256 x 256 tiling sprite representing stars in space. Place the Space.jpg sprite in the Assets/Textures folder, and then perform the following steps:

  1. Open our Game scene.
  2. Open Atlas Maker by navigating to NGUI | Atlas Maker, or Alt + Shift + M. Then perform the following steps:
    1. In the Project view, select our new Space.jpg file from Textures.
    2. Click on the Add/Update All button of the Atlas Maker window.

Ok, the new Space.jpg sprite has now been added to our Game Atlas. Let's change our Game scene's background to make it look like we're in space.

  1. Select the Background GameObject from Viewport.
  2. Change its Atlas to our Game Atlas.
  3. Change its Sprite to our new Space sprite.
  4. Change its Color Tint to {140, 200, 200, 255}.

That's it! Small stars are now tiling in the background. Now, it is time to add a font.

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

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