UI Interface

In Unity 5

Good evening gents and ladies.  Welcome to this Unity tutorial on UI and in-game interfaces.  Unity 4.6 introduced a new element to game development that I personally adore.  The easy to set up UI interface for Unity not only makes things like menus and health bars a piece of cake, but it also comes with built in tools to make the game’s GUI to function on any resolution.  Let’s take a look at the snapshot below.

This is one example of a UI, a game object tree I have called the HUD.  HUD stands for heads up display.  I have health, energy and experience / levels on the left.  On the right, I have a Mini Map.  All of these objects work through some degree of coding, especially the health bars, so I won’t go into how to make all of them work.  Instead, I’ll give you the primer you need to get started right away making UI elements.

One Note…

You may notice that the UI is huge when compared to the level itself.  I never really much understood why Unity couldn’t have made it a more respectable size, but it doesn’t matter in the end.  To edit the UI, you need to zoom out … a lot.  Still, completely worth the ease of development.

Screenshot_1

A UI techincally has two main types of elements, a canvas and the host of other elements.  That white outline up there represents the canvas and regardless of what you create first in the hierarchy, a canvas will initially be generated.  To create a canvas, right click in the hierarchy and go to UI > Canvas.

This will set up not only a UI canvas but also a separate object that will handle button controls and input.  That is because, as you may notice, you have the option to create buttons and other interactable objects.  You don’t need to make them, of course.  If you choose, you can restrict your UI to text and / or images.  I’ll go through what each canvas element is below.

Screenshot_2

Before I get started explaining the canvas objects, however, I’d like to mention that each canvas element has a component called Rect Transform.  This component is immensely important in determining the placement of your items on the canvas, particularly their placement in multiple resolutions.

If you want your elements to retain the same dimensions, but you also want them to fit snug inside your screen, then I suggest going with of the nine options inside the inner square.  These are anchor presets.  Choosing, the upper left, for instance, will mean that your canvas element will always remain the same distance from the upper left corner of the screen as it does in your current resolution.  You can debug resolutions by going to the game view.  There is a drop down box in the upper left of the game view to choose from a set of resolution options.

In my case, I chose the top-left for my status bars and top right for my mini map.  Take care not to make your canvas elements too large, or else they might take up an unwarranted amount of screen space at more scrunched resolutions, such as 5×4.

Screenshot_4

One of the main canvas objects is the text object.  Text objects have a font, alignment and so on.  You may edit any number of these settings, but generally speaking, you usually only need to add a font and set the size before typing up a block of text.

If you’d like to modify this object in code, you can include it as a public gameObject variable in a script.  However, to actually modify this object in code, you’ll need to include a reference at the top of your code file, such as “using UnityEngine.UI”

This is the same for the remaining objects.

Screenshot_5

Unity has the option to include either an Image or Raw Image.  Either will display an image file, but Raw Image is for texture assets and Image is for sprite assets.  Also, the sprite version, Image, has the option of retaining the original file’s aspect ratio, which is nice.  Generally, I would go with the standard Image, unless you want to use an asset that is already on a model.  The instances are rare, but it can happen.

Screenshot_6

I’m not going to worry about Sliders or Scroll bars.  It takes a unity tutorial and then some to get the hang of those two and really, for most games, they aren’t necessary.  For UI’s, you can get by fairly well on Buttons, text and images.  Speaking of which, the last item on this list will be buttons.

Buttons can be interactable or not.  We usually want them to be interactable.  They’ll have a target graphic and a child object for the text of the button.  Feel free to size it up to your specifications and place it on your canvas.  Buttons, like other interactable objects, have an OnClick handler.  Normally, this starts out blank, but you can add your own variables.

Add a script file and you can call on literally any public method in that file.  If the method calls for a variable to be passed through it, at most one, you can set the value for it without issue.  This makes buttons very powerful.  On click, you can do damage, heal, change the scene or any number of functions.  Within reason, you can make a button do anything you could do with a script method.

A word of note…

When I do an On Click handler, I first create an empty game object and add the script to it.  Then, I drag the game object into the On Click handler.  I don’t believe you can add a script file by itself and still access the public methods, but I could be wrong.

Screenshot_7

And bam!  That’s about all I have for this Unity tutorial.  Hope you had fun and I’ll see you on the next tutorial.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s