Unity GUI Skins

Foreword

Unity has an awesome feature called GUISkin. It allows us to customize the way that our GUI elements look, without touching our code at all. This article will explain the Skin system and show how powerful it really is.

The default Skin

At first we will use a GUI script similar to the one in our Unity GUIs tutorial. The only real difference is that we put the whole thing into one GUI Window (only because it shows the skin better):

using UnityEngine;

using System.Collections;



public class Guis : MonoBehaviour {    

    public Rect windowRect = new Rect(20, 20, 430, 400);

    

    int counter = 0;



    string text = "ABCD";



    bool toggle = false;



    void OnGUI() {

        windowRect = GUI.Window(0, windowRect, drawWindow, "noobtuts.com");

    }

    

    void drawWindow(int windowID) {    

        // simple button

        if (GUI.Button(new Rect(50, 100, 100, 50), "Clicked: " + counter))

            counter = counter + 1;



        // simple label

        GUI.Label(new Rect(170, 100, 200, 35), "I love noobtuts.com");



        // box without any text

        GUI.Box(new Rect(50, 180, 150, 50), "");



        // box with text

        GUI.Box(new Rect(220, 180, 150, 50), "BoxText");



        // text field (always needs a string to save the text)

        text = GUI.TextField(new Rect(50, 240, 150, 50), text);



        // toggle

        toggle = GUI.Toggle(new Rect(50, 290, 150, 50), toggle, "Toggle Me");        

    }

}

And here is how it looks with the default skin after pressing play:

The custom Skin

Finding a good Skin

To give the whole thing a much better visual style, we will open the Asset Store in Unity (Window->Asset Store) and download (for example) the Necromancer GUI (just type it into the search bar). After the download was finished, we press Import so the whole thing is copied into our project, which will give us a new folder called Necromancer GUI in our Project area in Unity.

Making our script ready for Skins

Before we can use the skin, we have to do one little adjustment to our script. Unity has a GUI.skin variable that sets the Skin, which then changes the way that everything else looks. Per default the GUI.skin variable is null, which tells Unity to use the default skin.

Let's modify our script by giving it a public GUISkin variable and using that variable to set Unity's GUI.skin value in the OnGUI function:

using UnityEngine;

using System.Collections;



public class Guis : MonoBehaviour {    

    public GUISkin myskin = null;



    public Rect windowRect = new Rect(20, 20, 430, 400);

    

    int counter = 0;



    string text = "ABCD";



    bool toggle = false;



    void OnGUI() {

        GUI.skin = myskin;

        windowRect = GUI.Window(0, windowRect, drawWindow, "noobtuts.com");

    }

    

    void drawWindow(int windowID) {    

        // simple button

        if (GUI.Button(new Rect(50, 100, 100, 50), "Clicked: " + counter))

            counter = counter + 1;



        // simple label

        GUI.Label(new Rect(170, 100, 200, 35), "I love noobtuts.com");



        // box without any text

        GUI.Box(new Rect(50, 180, 150, 50), "");



        // box with text

        GUI.Box(new Rect(220, 180, 150, 50), "BoxText");



        // text field (always needs a string to save the text)

        text = GUI.TextField(new Rect(50, 240, 150, 50), text);



        // toggle

        toggle = GUI.Toggle(new Rect(50, 290, 150, 50), toggle, "Toggle Me");        

    }

}

If we press play, it looks exactly as before, because the myskin variable is still null (the default skin).

Setting the GUISkin variable

Since our myskin variable is public, we are able to see it in the Inspector like this:

Now all we have to do is drag the NecromancerGUI skin file from the Project area into the myskin variable in our Inspector.

After pressing play, we can see the stunning result:

A beautiful RPG style GUI, just by dragging something into some public variable. How can anyone not love Unity?

Creating new Skins

If this is still not enough, we can always create our own Skins too. The only thing that is needed is a simple rightclick into the Project area, then a click on Create and then a final click on GUISkin:

This creates a new GUISkin file in our Project. After selecting it, the Inspector shows us all the things that we can modify in our Skin:

After adjusting colors, fonts and background pictures, all we have to do is drag it into our public myskin variable to see it in action.

Summary

We just learned another powerful and yet incredibly simple Unity feature. GUISkin makes it possible to use the same script for GUIs in all kinds of different genres, just by changing a little public variable.

Note: it's usually a good idea to have the public GUISkin myskin variable in each GUI script.