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