Scribd
Upload
17 views

Unity Tutorials 7 - Menus and Huds I - Menus: The Canvas

Uploaded by

SteliosDoumas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Unity Tutorials 7 - Menus and Huds I - Menus: The Canvas

Uploaded by

SteliosDoumas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Unity Tutorials 7 – Menus and HUDs

I – Menus

The Canvas
Begin by creating a new scene by
clicking “File” and “New Scene”.

Save it as “mainMenu”.

Switch to 2D mode.

Now go to “GameObject”, “UI”, and


“Canvas”.

Double-click on the new “Canvas” object


to centre the camera onto it. The white box is your canvas. This box will be filling up the
player's screen.
Unity Tutorials 7 – Menus and HUDs
The Background
Go to “GameObject”, “UI”, and “Image”. A white square will appear inside your canvas
and should automatically be parented to it. This is an image object. Where are going to
apply a sprite to it, kind of like when you apply a material to a standard cube object.

Click and drag the blue dots to fit the image to the canvas.

Now create or find an image that you would


like to use as a background and save it to
your Assets folder. Your image will be a
texture by default so you will need to
change it to a sprite in the inspector.

In the inspector for your Image (not the


Canvas), you will find a source image field.
Put your background here by dragging it
into the field or by clicking on the small
circle and double-clicking on it in the
window that pops up.
Unity Tutorials 7 – Menus and HUDs
If you go to your Game View now it may look okay. However, if you turn on “Maximize
on Play” and begin the scene you will see that the canvas doesn't actually necessarily fill
the scene. This is because of the “Rect Transform Anchors” of your image. They are
represented by the white arrows.

If your image is not anchored to the canvas it will not stretch with it to fit the screen
resolution. You can click and drag the arrows so that they are at the corners of the
canvas, or you can click the square shown in the image below then click the bottom-
right image in the menu that pops up.

Screen Resolution: The number


of pixels displayed on the screen.
It is generally quoted as width x
height. A popular resolution is
1920 x 1080. Note that resolution
is not determined by screen size,
therefore a screen can display
various resolutions.
Unity Tutorials 7 – Menus and HUDs

Text and Buttons


Go to “GameObject”, “UI”, and “Text”.

You can edit your text using the inspector. Click


the paragraph box under “Text” and write a title
for your game.

By default Unity only comes with the Arial font.


Try changing the size to something larger.
Remember to change the Rect Transform
anchors to fit the canvas.
Unity Tutorials 7 – Menus and HUDs

Go to “GameObject”, “UI”, and “Button”. Change


the Rect Transform Anchor to fit the canvas. Now,
the button should have a text object parented to it.
You will have to change this object's anchor too. The
button and its text are two different objects.

Change the button's text to “PLAY”.

Try increasing the size of the button then increase the


text's font to better fit it.

Change the button's “Highlighted


Color” and “Pressed Color” in the
inspector. These effects will be
apparent in the next tutorial.

Notice the bottom section that says “On


Click”. It is here that we will put a
script that will be activated when the
player clicks on the button. We will
cover this in the next tutorial.
Unity Tutorials 7 – Menus and HUDs
II – HUD

Save your scene and double-click on your level scene in your Assets to open it.

You should still be in 2D mode. If not, switch to 2D. Now add a Canvas.

Health Bar
Go to “GameObject” and “UI” and add a “RawImage”. Change the colour to black.
Again, don't forget to change the anchor to stretch across the canvas. Also make sure
that it is parented to the canvas.

Set the Left Rect Transform to 15, the Top to 10, the Pos Z to 0, the Right to 600, and
the Bottom to 290. These specific values are not necessary, but these are the values we
will be using in the next tutorial. We are going to have the health bar decrease by
changing the Right Rect Transform when the player takes damage.

Now duplicate the RawImage by selecting it and hitting CTRL + D, or by right-clicking


it and clicking “Duplicate”. Change this new RawImage's colour to red.
Unity Tutorials 7 – Menus and HUDs
Counters
Finally we are going to set up two on-screen counters: a coin counter and a lives counter.

Add two empty GameObjects to the canvas and name one “livesCounter” and the other
“coinCounter”.

You can play your scene to see how everything looks, but you won't be able to see the
lives or coin counters yet. These concepts will be continued in the next tutorial.

You might also like