Unity GUI - Graphics

There are two parts to making a GUI in unity; the graphics and the programming. These two parts mix a bit, but when I say graphics here, I mean the GUI skin. Unity's GUI system is a bit tricky to work with, and making your own customized skin can be a bit daunting. I realized that the default unity GUI wouldn't work, not even for testing, because all its controls are translucent and very dark. Most of the time in space, there are really dark colors. The default unity GUI tends to become nearly invisible against this kind of backdrop, and that's when I realized that I would need to make my own. If you want to see the results, skip to the bottom.

Note: before you go ahead and make a full blown GUI skin; make sure none of the ones on the asset store will do. There are a lot of decent skins for $5, and even some nice free ones. I neglected to do this, and as a result spent a lot of time making my own skin when it may not have been necessary, though it was an interesting experience.

Once you have come to the conclusion that the unity skin, the free skins, and the non-free skins are not options, then that's when you make your own. Before you even get started though, draw it out on paper, preferably graph paper. You do this so that when you finish making the skin, you don't go back and realize that 30+ images need to be redone. This also helps prevent redoing a simple image 20 times to get it just  right. Once you got a good idea of your skin down on paper, you can get started with the computer stuff.

One thing that needs to be taken into account, is how unity handles images. I spent 2 hours trying to figure out why my "crisp clean images" were all blurry before I realized the import setting : "texture type" of each image had to be set to GUI. The other settings can also be important depending on your image type. Its not usually to hard to figure out settings that work, the important part is making sure texture type is set to GUI.

The filter mode handles how the image is stretched. Point just scales the pixel, biliniar is good for textures with gradients, triliniar does something with mippixels. All this info is available in detail at the Unity Texture 2D documentation page found here.

After all the import settings are taken care of, the next step is to setup a test script that shows off all the GUI elements that you plan on using. I followed the tutorial here, which has a nice little script for this purpose, though it doesn't use all the elements (I made this; it has all the elements. The code is a bit messy but its only for visual testing). The tutorial also shows how unity handles stretching of textures at different places to make small textures seamlessly scaleable. The tutorial doesn't cover everything but its good for an introduction. After finishing it, its not that hard to just follow the same pattern of making images with the right borders, then changing the border setting in the skin to make it fit right.

Some elements do not follow the same pattern though and need a bit more work to get working. Notably is the toggle. When you make the toggle, make sure that you leave a section of pixels to the right for whatever you want stretched beneath the toggle text. Usually this is just blank alpha.

<-- That bit of white to the right is alpha used by the toggle text.

When making a skin, its also good to have the default textures available for reference, they can be downloaded from the asset store for free, and also on the unity forums here.

For scroll bar buttons, you need to make sure the fixed width and height are set above zero; otherwise they will not show up in your skin. Only do this if you actually want them to show up.


After finishing the last GUI texture, its a bit satisfying to see a nice GUI when you are done. I will not say its easy, but it can be rewarding to make your own custom skin. Below are some pics:

I ended up making two versions, a translucent version, and a solid version. The translucent skin looks like a better fit, so I will likely go with that one. Making the skin translucent isn't that hard, especially for flat styled skins. You simply take each solid texture, copy the solid color, adjust the alpha value to about half (I used 125 on 0-255 scale), use a paint bucket tool on replace mode where you took the color from, then save the image. If by any chance you don't want to make your own, and you really like this skin, its on the asset store here.

That about concludes making a unity GUI skin, next comes the programming. This was more of a list of common pitfalls, or at least ones I fell into, then a GUI tutorial. There are lots of tutorials on youtube and in many other places, so don't just go by this if you decide to make your own skin.