We will begin by creating the new project in Unity. Let's start:

Now, we are ready to create the GUI Skin:

And we have now finished this step.

Basically, what we have done here is create the GUISkin asset as the skin for our menu. First, we tell the GUI that we will use the font name Federation Kalin as our main font for this GUI Skin by setting up the Font in the first line in this skin inspector. Then, we changed all the default skin textures to use our UI graphics from our UI folder by setting all the necessary properties and parameters in Box, Label, Window, Horizontal Scrollbar, Horizontal Scrollbar Thumb, Horizontal Scrollbar Left Button, Horizontal Scrollbar Right Button, Vertical Scrollbar, Vertical Scrollbar Thumb, Vertical Scrollbar Up Button, Vertical Scrollbar Down Button style. Then, we created six Custom Styles, Tab Button, Exit Button, Text Item, Text Amount, Selected Item, and Disabled Click, which will be used in our script in the next section.

In this section, we applied UI graphics to GUISkin. You might have a question here—how does it work? Here, we will go through the basic concept of how to create a custom UI in Photoshop and get the right texture to use in our GUISkin.

First, let's take a look at the myWindow.png in our Chapter2/UI folder. We will see the capsule shape. You might be curious—how are we going to create a window graphics with this capsule shape? Well, the trick is the properties Border on which we set the parameters Left, Right, Top, and Bottom. As we already mentioned, use the repeating image in the background of the HTML code.

Here is how the Unity GUIStyle works. Take a look at the following figure:

First, we set the parameters for the Border. These parameters will offset the pixels of the current UI graphics from 0 to the number that we assigned. For example, if we want to draw a rectangular window, which is 320 pixels in width and 240 pixels in height, and we set the Left Border to 27, Right to 27, Top to 55, and Bottom to 96, this will tell Unity GUIStyle to always draw the graphics from pixel 0 to pixel 27 on the left side with the same scale as the source texture. What will happen from pixel 28? Basically, it will repeat pixel 27 until it hits the right Border, which is also set to 27 pixels from the right. So, this means that we tell the GUIStyle to draw graphics from the source texture from pixel 0 to pixel 27, and repeat the texture from pixel 28 to pixel 293, then switch back and draw pixel 294 to pixel 320 from the source texture, which is the offset of 27 pixels from the right. This also applies to the top and bottom Borders, as we can see on the left side of the preceding figure.

From this concept, we can save a lot of memory because instead of using a 320 x 240 pixel image, we just use 54 x 151 pixels. However, in some cases we don't want any repeating pixels for our UI such as fixed button graphics—for example, our Exit Button style—or any fixed texture, and so on, as we can see in the following figure:

We can just set the Fixed Width and Fixed Height properties in GUIStyle to match our image size. For instance, we have our exit button image, which is 26 pixels wide and 22 pixels high. We just set the Fixed Width to 26 and Fixed Height to 22. We can also set only Fixed Width or Fixed Height in GUIStyle—as we already did in our Custom Styles Tab Button—as we can see in the following figure:

We set the Fixed Height to 31, and we leave the Fixed Width at 0, which means that the height of the style will always be 31 pixels but the width can vary from zero to infinity.