Prepare for lift off

We will begin by creating a new project in Unity. Let's start our project by performing the following steps:

First, create a new project and name it MenuInRPG. Click on the Create new Project button, as shown in the following screenshot:

Next, import the assets package by going to Assets | Import Package | Custom Package...; choose Chapter2Package.unityPackage, which we just downloaded, and then click on the Import button in the pop-up window link, as shown in the following screenshot:

Wait until it's done, and you will see the MenuInRPGGame and SimplePlatform folders in the Window view. Next, click on the arrow in front of the SimplePlatform folder to bring up the drop-down options and you will see the Scenes folder and the SimplePlatform_C# and SimplePlatform_JS scenes, as shown in the following screenshot:

Next, double-click on the SimplePlatform_C# (for a C# user) and SimplePlatform_JS (for a Unity JavaScript user) scenes, as shown in the preceding screenshot, to open the scene that we will work on in this project.

When you double-click on either of the SimplePlatform scenes, Unity will display a pop-up window asking whether you want to save the current scene or not. As we want to use the SimplePlatform scene, just click on the Don't Save button to open up the SimplePlatform scene, as shown in the following screenshot:

Then, go to the MenuInRPGGame/Resources/UI folder and click on the first file to make sure that the Texture Type and Format fields are selected correctly, as shown in the following screenshot:

Why do we set it up in this way? This is because we want to have a UI graphic to look as close to the source image as possible. However, we set the Format field to Truecolor, which will make the size of the image larger than Compress, but will show the right color of the UI graphics.

Next, we need to set up the Layers and Tags configurations; for this, go to Edit | Project Settings | Tags and set them as follows:

Tags

Element 0

UI

Element 1

Key

Element 2

RestartButton

Element 3

Floor

Element 4

Wall

Element 5

Background

Element 6

Door

Layers

User Layer

Background

User Layer

Level

Use Layer

UI

At last, we will save this scene in the MenuInRPGGame/Scenes folder, and name it MenuInRPG by going to File | Save Scene as... and then save it.

Engage thrusters

Now we are ready to create a GUI skin; for this, perform the following steps:

Let's create a new GUISkin object by going to Assets | Create | GUISkin, and we will see New GUISkin in our Project window. Name the GUISkin object as MenuSkin. Then, click on MenuSkin and go to its Inspector window. We will see something similar to the following screenshot:

You will see many properties here, but don't be afraid, because this is the main key to creating custom graphics for our UI. Font is the base font for the GUI skin. From Box to Scroll View, each property is GUIStyle, which is used for creating our custom UI. The Custom Styles property is the array of GUIStyle that we can set up to apply extra styles. Settings are the setups for the entire GUI.

Next, we will set up the new font style for our menu UI; go to the Font line in the Inspector view, click the circle icon, and select the Federation Kalin font.

Now, you have set up the base font for GUISkin. Next, click on the arrow in front of the Box line to bring up a drop-down list. We will see all the properties, as shown in the following screenshot:

Name is basically the name of this style, which by default is box (the default style of GUI.Box). Next, we will be seeing our custom UI to this GUISkin; click on the arrow in front of Normal to bring up the drop-down list, and you will see two parameters—Background and Text Color.

Click on the circle icon on the right-hand side of the Background line to bring up the Select Texture2D window and choose the boxNormal texture, or you can drag the boxNormal texture from the MenuInRPG/Resources/UI folder and drop it to the Background space.

We can also use the search bar in the Select Texture2D window or the Project view to find our texture by typing boxNormal in the search bar, as shown in the following screenshot:

Then, under the Text Color line, we leave the color as the default color—because we don't need any text to be shown in this style—and repeat the previous step with On Normal by using the boxNormal texture.

Next, click on the arrow in front of Active under Background. Choose the boxActive texture, and repeat this step for On Active.

Then, go to each property in the Box style and set the following parameters:

Border: Left: 14, Right: 14, Top: 14, Bottom: 14

Padding: Left: 6, Right: 6, Top: 6, Bottom: 6

For other properties of this style, we will leave them as default.

Next, we go to the following properties in the MenuSkin inspector and set them as follows:

Label

Normal | Text Color

R 27, G: 95, B: 104, A: 255

Window

Normal | Background

myWindow

On Normal | Background

myWindow

Border

Left: 27, Right: 27, Top: 55, Bottom: 96

Padding

Left: 30, Right: 30, Top: 60, Bottom: 30

Horizontal Scrollbar

Normal | Background

horScrollBar

Border

Left: 4, Right: 4, Top: 4, Bottom: 4

Horizontal Scrollbar Thumb

Normal | Background

horScrollBarThumbNormal

Hover | Background

horScrollBarThumbHover

Border

Left: 4, Right: 4, Top: 4, Bottom: 4

Horizontal Scrollbar Left Button

Normal | Background

arrowLNormal

Hover | Background

arrowLHover

Fixed Width

14

Fixed Height

15

Horizontal Scrollbar Right Button

Normal | Background

arrowRNormal

Hover | Background

arrowRHover

Fixed Width

14

Fixed Height

15

Vertical Scrollbar

Normal | Background

verScrollBar

Border

Left: 4, Right: 4, Top: 4, Bottom: 4

Padding

Left: 0, Right: 0, Top: 0, Bottom: 0

Vertical Scrollbar Thumb

Normal | Background

verScrollBarThumbNormal

Hover | Background

verScrollBarThumbHover

Border

Left: 4, Right: 4, Top: 4, Bottom: 4

Vertical Scrollbar Up Button

Normal | Background

arrowUNormal

Hover | Background

arrowUHover

Fixed Width

16

Fixed Height

14

Vertical Scrollbar Down Button

Normal | Background

arrowDNormal

Hover | Background

arrowDHover

Fixed Width

16

Fixed Height

14

We have finished setting up of the default styles.

Now we will go to the Custom Styles property and create our custom GUIStyle to use for this menu; go to Custom Styles and under Size, change the value to 6. Then, we will see Element 0 to Element 5.

Next, we go to the first element or Element 0; under Name, type Tab Button, and we will see Element 0 change to Tab Button. Set it as follows:

Tab Button (or Element 0)

Name

Tab Button

Normal

Background

tabButtonNormal

Text Color

R: 27, G: 62, B: 67, A: 255

Hover

Background

tabButtonHover

Text Color

R: 211, G: 166, B: 9, A: 255

Active

Background

tabButtonActive

Text Color

R: 27, G: 62, B: 67, A: 255

On Normal

Background

tabButtonActive

Text Color

R: 27, G: 62, B: 67, A: 255

Border

Left: 12, Right: 12, Top: 12, Bottom: 4

Padding

Left: 6, Right: 6, Top: 6, Bottom: 4

Font Size

14

Alignment

Middle Center

Fixed Height

31

The settings are shown in the following screenshot:

For the Text Color value, we can also use the eyedropper tool next to the color box to copy the same color, as we can see in the following screenshot:

We have finished our first style, but we still have five styles left, so let's carry on with Element 1 with the following settings:

Exit Button (or Element 1)

Name

Exit Button

Normal | Background

buttonCloseNormal

Hover | Background

buttonCloseHover

Fixed Width

26

Fixed Height

22

The settings for Exit Button are showed in the following screenshot:

The following styles will create a style for Element 2:

Text Item (or Element 2)

Name

Text Item

Normal | Text Color

R: 27, G: 95, B: 104, A: 255

Alignment

Middle Left

Word Wrap

Check

The settings for Text Item are shown in the following screenshot:

To set up the style for Element 3, the following settings should be done:

Text Amount (or Element 3)

Name

Text Amount

Normal | Text Color

R: 27, G: 95, B: 104, A: 255

Alignment

Middle Right

Word Wrap

Check

The settings for Text Amount are shown in the following screenshot:

The following settings should be done to create Selected Item:

Selected Item (or Element 4)

Name

Selected Item

Normal | Text Color

R: 27, G: 95, B: 104, A: 255

Hover

Background

itemSelectHover

Text Color

R: 27, G: 95, B: 104, A: 255

Active

Background

itemSelectHover

Text Color

R: 27, G: 95, B: 104, A: 255

On Normal

Background

itemSelectActive

Text Color

R: 27, G: 95, B: 104, A: 255

Border

Left: 6, Right: 6, Top: 6, Bottom: 6

Margin

Left: 2, Right: 2, Top: 2, Bottom: 2

Padding

Left: 4, Right: 4, Top: 4, Bottom: 4

Alignment

Middle Center

Word Wrap

Check

The settings are shown in the following screenshot:

To create the Disabled Click style, the following settings should be done:

Disabled Click (or Element 5)

Name

Disabled Click

Normal

Background

itemSelectNormal

Text Color

R: 27, G: 95, B: 104, A: 255

Border

Left: 6, Right: 6, Top: 6, Bottom: 6

Margin

Left: 2, Right: 2, Top: 2, Bottom: 2

Padding

Left: 4, Right: 4, Top: 4, Bottom: 4

Alignment

Middle Center

Word Wrap

Check

The settings for Disabled Click are shown in the following screenshot:

And now, we have finished this step.

Objective complete - mini debriefing

Basically, what we have done in this project is we have created the custom GUI skin to use for our menu. First, we tell the GUI that we want to use the font name Federation Kalin as our default font for this GUISkin by setting up the Font type at the first line of the skin's inspector. Then, we changed all the default skin textures to use our custom UI graphics from the UI folder by setting up all the necessary properties and parameters in the 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, and Vertical Scrollbar Down Button styles. Then, we created six Custom Styles—Tab Button, Exit Button, Text Item, Text Amount, Selected Item, and Disabled Click, which will be used for scripting.

The Custom Style feature is basically GUIStyle that we can add to GUISkin. This style allows us to create a custom style that will act differently from the default styles (Box, Label, Window, and so on) in this GUISkin.

Classified intel

We applied the 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 MenuInRPGGame/Resources/UI folder. If we select this file, we will see something similar to the following capsule-shaped image. You might be curious—how are we going to create a window graphics with this capsule shape? Well, the trick is the properties of Border in which we can set the parameters, Left, Right, Top, and Bottom. It uses these parameters to set the number of pixels that will be shown in the fixed image. On the other hand, the pixels in the middle will get repeated depending on the width and height of the settings similar to the HTML style or scale9grid in Flash (the concept is to draw the pixel perfectly on the four corners and then repeat them in the middle to match the size we need).

The following figure shows us how the Unity GUIStyle works:

First, we set the parameters for the Border attribute. These parameters will offset the pixels of the current UI graphics from 0 to the number that we will assign. 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 borders, Left 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-hand 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-hand side border, which is also set to 27 pixels from the right-hand side. So, this means that we tell GUIStyle to draw graphics from the source texture, that is from pixel 0 to pixel 27, and then 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-hand side. This also applies to the top and bottom borders, as we can see on the left-hand 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 also set the Fixed Width and Fixed Height properties in GUIStyle to match our image size. For instance, we have the Exit Image button, which is 26 pixels wide and 22 pixels high. So, we just set the Fixed Width value to 26 and Fixed Height to 22. On the other hand, we can also set either Fixed Width or Fixed Height in GUIStyle—as we already did in our Tab Button of Custom Styles—as we can see in the following figure:

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

Summary

In this article, we have learned how to customize skin with GUISkin in Unity.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.