Gaming Your Way

May contain nuts.

Idiot's guid to skining GUI in Unity.

As I already mentioned, the Unity docs are not quite what I would call helpfull. I think they cover a lot and most of it will solve your problem, finding the right info in them is what really is the hard part.

Take the GUI scripting guide for instance "Reference Manual > GUI Scripting Guide", this covers everything you need to know to build a GUI. My mission currently is to create a simple form for the game I talked about earlier.
For the salutation I needed a drop down list, so I had to do it on my own, because that's the one usefull control I missed.


unity_igts_00.png
After a few hours I came up with this (scaled down a bit)


The form is dynamic (you can turn of the salutation for instance) and already has a working validation, but it's dead ugly. So the next task was to skin that up ("Reference Manual > GUI Scripting Guide > Customization").

Yet again the manual does a good job to tell you what you can do, but fucking lacks some basic examples on how to deal with the textures to skin up buttons for instance. That's where I got a bit pissy (although I must admit that I hate searching in boards or wikis when the solution should be in the manuals).

So the key to skinning the buttons (and the rest of the UI elements is the GUISkin file or for single use the GUIStyle. I knew that there has been a psd file with "templates" of the default textures used, but alas I still havent been able to find it again, though I know I saw it while playing with Unity for the first day (and I was like wtf?).

unity_igts_01.png
After skinning for a few minutes


I found the most valuable (and yet again MISSED info) in the scripting guide (after just testing it with a basic psd file) ...
So I looked at the default values of a new Skin and saw this:

unity_igts_02.png And I wondered why (and how) it'll become this: unity_igts_03.png.

What the manual is missing badly is the info that you can set a "fixed" border for a texture in a skin that isn't stretched:

var border : RectOffset
Description

The borders of all background images.

This corresponds to the border settings for GUITextures. It only affects the rendering of the background image and has no effect on positioning.

Why do I need to find that out by testing? (I guess no one reads through the scripting guide until he needs a specific info, I for sure do not)

By default the border values are set to:
left: 6, right: 6, top: 6, bottom: 4 ...

After knowing this it was oh so easy to just do this: unity_igts_04.png to get to the buttons used above.

Oh well.

I hope that saves some ugly searching for you,
nGFX

Comments (2) -

  • bas

    5/3/2009 1:44:00 PM |

    Nothing to comment, but I just wanted you to know it is highly appreciated and bookmarked for the day I need it. Which will be soon, I hope. I've just installed the Unity demo and for the moment I must say I'm completely lost. Where the hell is the code? :-)

  • nGFX

    5/5/2009 9:39:37 AM |

    Cheers bas.

    I really found it quite ... "tough" to get into the Unity zone of coding (as opposed to AS3), but after all, right now I prefer it over AS3 - the trick is to find what you need.

    I was about to grab the whole set docs and turn them into a searchable pdf (because you can search the scripting guide, but are lost if you want to search through the manual).

    nGFX

Comments are closed