Customizing skin with GUISkin

Develop spectacular gaming content by exploring and utilizing Unity 4

(For more resources related to this topic, see here.)

Prepare for lift off

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

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

  2. 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:

  3. 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:

  4. 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.

  5. 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:

  6. 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.

  7. 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

  8. 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:

  1. 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:

  2. 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.

  3. 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.

  4. 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:

    For more information and to learn more about these properties, visit http://unity3d.com/support/documentation/Components/class-GUISkin.html.

    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.

  5. 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:

  6. 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.

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

  8. 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.

  9. 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.

  10. 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.

  11. 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:

  12. 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:

  13. 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:

  14. 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:

  15. 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:

  16. 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 StylesTab 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.

Resources for Article:


Further resources on this subject:


Books to Consider

comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free