Let's add some sprites to our new Game atlas. We will add the following three different types:
Let's start with the 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:
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.
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:
Good. Our two new sprites have been added to the Game atlas.
Let's add the icons to our Time and Bomb prefabs on the scene and perform the following steps:
Icon
.6
so that it can be displayed over the background.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:
0
, 0
, 0
}.75
x 75
.Let's also add icons for our SelectedBomb and SelectedTime prefabs so that they look nicer:
Perform the following steps to achieve this:
0
, 0
, 0
}.5
.120
x 120
.Let's follow the same steps for our SelectedTime prefab:
0
, 0
, 0
}.5
.100
x 100
.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.
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:
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:
Window.png
sprite file from Textures in the Project view.Ok, Window.png
has been added to our Game atlas, but it isn't configured. Yet.
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:
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:
The values shown in the previous screenshot might be different if you created your own sprite.
The Window sprite should be sliced (as shown in the following screenshot) in the Preview window:
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.
Let's change our Window sprite Main Menu too. In the Hierarchy view, select our Window GameObject from Container and perform the following steps:
The Main Menu title is not placed exactly inside the title bar. Let's change this by performing the following steps.
0
, 10
}.1
, 0.95
}.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.
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:
Space.jpg
file from Textures.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.
140
, 200
, 200
, 255
}.That's it! Small stars are now tiling in the background. Now, it is time to add a font.
3.21.104.183