Beruflich Dokumente
Kultur Dokumente
1
In this first part of a three-part tutorial series,
you’ll get acquainted with the Unity UI and learn
how to add custom user interfaces to your game.
Update 20th December 2016: This tutorial was updated to Unity 5.5 by
Brian Moakley. Original post by Kirill Muzykov.
Do you remember the old UI system in Unity? It required you to write all
your GUI code in OnGUI. It was slow, inefficient, and programmer-centric,
going against the visual centric nature of Unity. Thankfully, Unity
Technologies has made some changes.
To add a little spice and prepare to satisfy your users’ cravings for an
engaging UI, you’ll also:
Animate buttons
Create a settings dialog that slides into a scene
Use more GUI controls like Text, Slider, Panel, Mask
Getting Started
You’ll need some images for backgrounds, buttons and other UI elements,
as well as a few fonts for the labels and buttons. You won’t have to draw
anything yourself or scour the web for the right assets because I’ve
prepared a special package that has everything you need. You’re welcome.
:]
Note: Keep in mind that this tutorial does not cover the creation of the
game itself. The goal here is to provide an introduction to the new Unity UI
system and familiarize you with its components.
The package contains background images, buttons, icons and other game
art, in addition to two fonts from dafont.com. The game art is provided by
Game Art Guppy, where you can find a lot of other game art for your
practice games: www.gameartguppy.com. You can thank Rodrigo
Fuenzalida for the Titan One font and Draghia Cornel for the DCC
Dreamer font.
[TODO: FPE: Can all of these resources be combined into one package with
a Download Materials button? If so, please create a Download Materials
Button and insert here. Please also add a Download Materials button at the
bottom of the tutorial. Finally, if it’s possible to combine all of those links
into one package, please replace the previous three paragraphs with a
single line inviting the learner to get everything she needs by clicking the
Download Materials button.]
You’re going to spend most of your time working with a new scene that
you’ll create now. From menubar, Select File\New Scene to create a new
empty scene.
It’s better to save the scene straight-away, so open the Save Scenes dialog
by choosing File\Save Scenes. Then, enter MenuScene as the scene
name and save it to the Scenes folder, right next to the RocketMouse scene.
Take a look at the Project window to confirm that there are two scenes in
one folder:
Importing Images and Fonts
First on your to do list is to add assets to the scene, so unpack the assets
package. There you’ll find two folders: Menu and Fonts.
Select both folders, and then drag them to the Assets folder in Unity’s
Project window:
Woo-hoo! You’ve finished the setup and you are ready to create your first
UI element using the new Unity GUI system.
From the top bar, select GameObject \ UI \ Image. This adds an object
named Image to the scene. You should see it in the Hierarchy as a child of
Canvas. All elements must be placed on a Canvas, so if you don’t already
have one, Unity will create one for you.
To ensure you can see the image in the scene view, select Image in the
Hierarchy and set both its Pos X and Pos Y to 0.
You’ll set the correct position and size in a moment – right now, there is
another interesting thing to muse upon. In the Hierarchy, you’ll see three
new objects in the scene:
1. Image
2. Canvas
3. EventSystem
The Image is a non-interactive control that displays a Sprite and has
many options to tweak.
For instance, you can apply a color to the image, assign a material to it,
control how much of the image that displays, or even animate how it
appears on the screen using a clockwise wipe.
The Canvas is the root object for all your UI elements. Remember, Unity
automatically creates your Canvas when you add your first UI element. It
has multiple properties that allow you to control how your UI renders, and
you’ll explore some of them during this tutorial.
Next, open the Menu folder in the Project window and find the
menu_background image. Drag it to the Source Image field of the
Image component in Img_Background in the Inspector:
Now you have a background image instead of the default white image.
However, it doesn’t look like a good background because it’s too small and
the aspect ratio is incorrect.
To fix this, find the Set Native Size button in the Inspector and click it to
set the size to 1136 x 640.
Now it looks like a proper background.
Note: The original game design was for iPhones with 3.5- and 4-inch
displays. This is why all the game art supports 1136 x 640 and 960 x 640
resolutions. You’ll soon see how the UI can adapt to different game
resolutions.
First, however, you need to know that the display is not the result of a bug.
From Unity’s point of view, you have the Game view — or viewport — set to
such a small size that it just displays a portion of the image that fits within
the Game view.
If you were to run the game on a device with a large enough resolution or
stretch the Game view to fit the whole image, you would see the entire
background image.
Although Unity’s settings make sense in most scenarios, there are times
when you need different behavior. An example is when you have a small
monitor that doesn’t fit your target device’s resolution.
Additionally, many games support only one resolution. Designers use this
reference resolution to dictate sizes, positions, and other data. When you
develop a game based on a single reference resolution, you want to make
sure to enter the designer’s specifications without additional calculations
so that the user sees everything as intended.
If you’ve ever ignored your designer’s directions, you know there’s a price
to pay. The user’s experience and the varying resolutions out there are
more important, but you have to keep your designer happy, too. :]
Select Canvas in the Hierarchy, and in the Inspector, you should see the
Canvas Scaler component:
Constant Pixel Size: Makes all the user interface elements retain
the same pixel size, regardless of the screen size. This is the default
value of the Canvas.
Scale With Screen Size: Sizes and positions user interface
elements according to a referenced resolution. If the current
resolution is larger than the referenced resolution, then the Canvas
will maintain the reference resolution, while scaling up the elements
to match the target resolution.
Constant Physical Size: Positions of the user interface elements
are specified in physical units such as millimeters or points. This
requires the correct reporting of the screen DPI.
Change the component mode to Scale With Screen Size and set its
Reference Resolution to 1136 x 640. Also, slide the Match Width or
Height all the way to the right, or enter 1 in the input field.
After making those changes, you’ll see the full background image, even in a
small Game view window.
Change the Game view resolution to see how your game might look in a
different resolution, for example on iPhone Wide 480×320. You’ll notice it
still looks good!
Note: If you don’t see any of the iPhone options, then chances are, you are
building for a different platform. From the menubar, select FileBuild
Settings. In the build settings dialog underneath the platform settings,
make sure to select iOS.
Unity will reprocess all your assets so it may take a while. At the end, you
should now have access to the various iOS screen sizes.
Now switch to the Scene view, and you’ll see the Canvas’s size doesn’t
change when you resize the Scene view.
The side edges of the screen are neatly cropped, while the central part is
fully visible. This is the result of setting Match Width or Height to 1
(match height). It works perfectly for your target resolutions.
But what about the buttons? What happens when they’re too close to the
left or the right edge of the screen? You sure don’t want to crop or hide
them.
Fortunately, Unity has a feature that will help you sidestep this rookie
mistake. You’ll learn about it soon.
Before moving on to buttons and other UI controls, you’ll add one more
image — the header image. For this exercise, you’ll use a non-fullscreen
image to demonstrate a few other important concepts of Unity’s new UI
system.
Open the Scene view and from the top bar, select GameObject \ UI \
Image. This will add another image as a child of Canvas:
Note: If you can’t see the image in the Scene view, set its Pos X and Pos Y
properties to 0 to center it.
Now, turn that white rectangle into an actual image by following these
steps:
As you can see, it was easy enough to add another image. Now you just
need to work on its positioning, which brings you to your next exercise:
working with the Rect Transform component.
If not, that’s fine too. Transform is a tool that can position, rotate and scale
objects in a scene. Here’s what it looks like:
You’ll see the Transform component when you select any type of non-UI
GameObject in your Hierarchy view. However, if you select any UI
element, for example Img_Header, you’ll see a different component named
Rect Transform.
As you can see, Transform and Rect Transform look a bit different.
Additionally, the Rect Transform can change the way it looks,
depending on its Anchor settings. For example, it can look like this:
Here, instead of Pos X, Pos Y, Width and Height, you have Left, Top, Right
and Bottom.
Are you wondering about the Anchors setting that changes the look of
Rect Transform so dramatically? You’ll find the answers you seek in the
next section.
Anchors
When you set anchors, you specify several positions in the parent, usually
one in each corner of the parent’s UI element Rect. When this happens,
your UI element will try to maintain a uniform distance to the anchor
points, forcing it to move or resize right along with its parent.
This will all make more sense once you work with it. If you look at the next
image, which has the background image disabled, you’ll be able to see the
Canvas size changes a bit better.
As you can see, the anchors settings control how your UI element adapts to
screen size changes.
Custom Anchors
You can manually move Anchors to a custom position. The presets are just
for your convenience.
Note: You might find yourself in a situation where the translation gizmo
covers the anchor icon, making it impossible to select the anchor.
In this case, just select the anchor icon by choosing an anchor preset (for
example, the left-hand side of the screen). The anchor icon will shift to that
part of the screen, allowing you to select and move it at will.
See how the image moves to the right when you resize the Canvas? It
moves only a little in relation to the right edge of the Canvas, this happens
because these anchors are set to 25% width of the Canvas.
Splitting Anchors
If you set anchors to a single point without stretching, you’ll see the Pos X,
Pos Y, Width and Height properties.
However, if you set anchors in a way that stretches your UI Element, you’ll
get Left and Right instead of Pos X and Width (if you set it to stretch
horizontally) and Top and Bottom instead of Pos Y and Height (if you set
it to stretch vertically).
The pivot is the point around which all transformations are made. In other
words, if you change your UI Element position, you also change the pivot
point position. If you rotate your UI Element, it’ll rotate around that point.
The pivot is set in normalized coordinates. This means that it goes from 0
to 1 for both height and width where (0,0) is the bottom left corner and
(1,1) is the top right corner.
You can change pivot in the Rect Transform component in the Inspector or
you can use the Rect Tool.
Take a look at the following two images that demonstrate the UI Element
with the same Pos X and Pos Y values, yet each shows different placement
in the scene.
The first image shows the pivot at its default value of (0.5 , 0.5), which is
the center of the UI element. The Position is set to (0, 0) and the anchors
are set to top-left.
Note: It’s important to understand that the position of a UI Element is set
relative to the anchors. This is why (0,0) position means the distance from
anchors, which are set to top-left corner of the Canvas.
Now take a look at the second image. As you can see, the position is still at
(0,0), but since the Pivot is set to left bottom corner (0,0) you can see that
the image’s bottom corner, and not the center, is now at the Canvas’s top-
left.
It’s harder to show how pivot affects rotation and size using a still image,
so here are few animations:
Observe how the image rotates around the pivot point indicated by a blue
circle, which is an element you can freely move.
Note: Hold down the Option / ALT key while scaling to scale around the
pivot point.
As you can see, the pivot also affects how your UI Element resizes.
Note: Another important thing to understand is that when you change the
size of a UI Element, you don’t change its Scale. Instead, you change its
size using Width and Height or Top, Right, Left, and Bottom paddings.
Be aware that there are a few differences between size and scale. For
example, size can’t be negative, but scale can be. Also, using a negative
scale value will flip your UI element. In most cases, you should only change
the size of your UI Elements.
Going forward, you’ll concentrate on creating the menu scene. The rest of
the sections will go by in the twinkle of an eye.
All those manipulations exhausted the poor little img_header. It’s time to
place it where it should be and leave it alone to recover.
Then select Img_Header in the Hierarchy and set its properties in the
Inspector as follows:
1. Click Set Native Size to reset the size, as you probably messed with
it while playing around with the pivot.
2. Set Anchors to top-center.
3. Set Pos X to 0 and Pos Y to -100.
You should see something like this in your Scene view:
That’s it! Now, leave the header image alone. It’s a little tired, too. :]
Adding the Start Button
Now, that your game has a nice background with a label, it’s time to add
some buttons.
From the top bar, choose GameObject \ UI \ Button. This will add a
Button object to the scene, you should see it in the Hierarchy. If you
expand it in the Hierarchy, you’ll see that the button contains a Text child
— you’ll learn about these later.
Look at the button in the Inspector, and you’ll see it has a familiar Image
component, the same as you used to add the background and the header
label.
Note: The Text element is optional, so if you have a button image with text
drawn right into the image, you can delete it. You’ll do this a couple of
times during this tutorial.
Now it’s all about positioning and resizing the button. Follow these steps:
Then select the nested Text element and set its Text to Start Game.
Change the Font Size to 32 to make the text of the button larger.
9-Slice Scaling
You set the image for the Button the same way you set an image for the
Image. After all, they use the same component. However, unlike images
that rarely scale, especially non-uniformly, buttons often come in different
sizes.
Of course, you could create a background image for every single button size
in your game, but why waste all that space? You’ll use a technique called 9-
Slice scaling, which allows you to provide one small image that scales to
fit all the sizes.
There is no magic involved here, you won’t have to put your images in a
magic fountain before you can use them. :]
This technique works by creating different images for each of nine zones,
all of which scale differently.
This ensures the image will look good at any scale.
Select the Text element nested within Btn_Start in the Hierarchy. Then
open the Fonts folder in the Project window and drag the TitanOne-
Regular font into the Font field. Also set the Color to white.
Now run the scene and enjoy your new mega-awesome button! :]
Adding the Settings Button
There are a few things left to do before moving on to the next part. First,
add the Settings button.
You can probably do this yourself, so you’re only getting the size and
position of the button to start. The rest is almost identical to how you
created the Start Game button.
Note: The easiest way is of course to duplicate the button and adjust some
properties, but try creating the button from scratch since you’re here to
learn.
So, here are the properties of the Settings button that are different:
Name: Btn_Settings
Rect Transform: Left and Right are 400, Height is 70 and Pos Y is
180
Text: Settings
Fontsize: 24
This is what you should see in the Scene view after adding the Settings
button:
Now Save Scenes your work.
Before you can run different scenes, you need to add them to the Scenes
in Build list in the Project Settings.
To do this, on the menu select File \ Build Settings. This will open the
Build Settings dialog. Then open the Scenes folder in the Project
Browser and drag the MenuScene first, and then the RocketMouse
scene to the Scenes in Build list.
Finally, close the Build Settings dialog.
Creating UIManager
When you add an event handler to the button, you need to specify which
method to call when you click the button. Since you cannot use static
methods, you’ll need to select a public method from a script attached to a
GameObject.
From the top bar, choose GameObject \ Create Empty. Then select
GameObject in the Hierarchy view and rename it to UIManager.
After that, click Add Component in the Inspector and select New
Script. Name it UIManagerScript. Make sure the Language is set to
CSharp and click Create and Add.
This is what you should see in the Hierarchy view and the Inspector view:
Double-click on the UIManagerScript in the Inspector to open the
script in MonoDevelop. Once the script loads, remove both Start() and
Update().
using UnityEngine.SceneManagement;
This allows you to load other scenes. Next add the following:
It might feel like you didn’t do much in this last section but this is not true.
You set up the UI, added images and buttons, and even wrote the code that
starts the game when you click on the button!
You also learned a lot about Rect Transform, Anchors, Pivot and so on.
What’s cool is now that you understand them, you’ll be able to move much
faster when you apply these new skills to your own projects.
In the next part of this series, you’ll learn how to animate UI elements,
create dialogs, and use controls like Slider and Toggle. By the end of it
you’ll have a working menu scene.
If you have any questions or comments please leave them below! See you in
Part 2!