[No coding] UI Basics

Step 1
For this lesson we'll be working on UI (User Interface) Or the "stuff" that shows up on the screen.
Ezgif.com video to gif %2811%29
Step 2
Load/Open your previous project, you should have a moving player.
Step 3
In the Hierarchy, right click and create a UI Text
Check Your Work
Step 4
If you click play you'll see the new text somewhere in the middle of the screen.
Step 5
If you look around in the Scene view you'll see a giant UI object, don't worry as this will adjust when you do play mode
Step 6
To take a closer look at the UI object, select the canvas, press F to focus on it, then go to 2D mode.
Step 7
Select the text object in the canvas and let's go over what some of this stuff is.
Step 8
Change font size to 26, change color to blue and then click the auto position tool. HOLD SHIFT + ALT and click a space.

You'll see that you can auto position it to the 3 x 3 grid as shown.

Step 9
Now let's add an image, go to Google Images and find an image you want. Make sure it's transparent.
Step 10
Import that image into your assets folder of your project and select it. Then change to Sprite (2D and UI), click apply.
Step 11
Select your Canvas in the Hierarchy, right click and create an image.
Step 12
Select that new image object, and then click & drag your new imported image into where it says "Source Image"

Position that anywhere you want, I'll put it at the bottom right corner.


You can decide to keep the text there or remove it. For me, I'll remove it.

Step 13
Hit play and see if your new image shows up on the screen!
Step 14
Lastly, we'll create a render texture for the player! Right click in the project panel and make a Render Texture.

Name it as anything, maybe "UI Camera" ?

Step 15
In the Hierarchy, create another Camera
Step 16
Let's go back to 3D view and focus onto your player by selecting it and pressing F.
Step 17
Move the camera into your player.
Step 18
The camera is probably miles away from the player so let's reset the position! Select the camera, right click, and reset

Make sure you Right Click where it says "Position"

Step 19
Now let's readjust the camera position so it's facing our character and not away from the character.
Step 20
Remember the render texture you made? Click and drag that into the Target texture box of the Camera object.
Step 21
Now we want to use this render texture. Select the Canvas in the Hierarchy, create a raw image.
Step 22
Go back to 2D view and focus in on the Canvas by pressing F. We want to see this new raw image box.
Step 23
With the raw image selected, click and drag your render texture into where it says "Texture"
Step 24
Reposition your Raw image to maybe the bottom left corner?
Check Your Work
Step 25
Finally hit play and see if you see your character in the bottom left in real time!
Step 26
Try moving your camera closer to your player's face at an angle.
Step 27
Our camera is also capturing the background in our game, let's make it so that it only sees the player.
Step 28
Let's create a new layer called "Player". On any object selected, go to the inspector, click layer and Add Layer.
Step 29
Select the player's camera again, and for the Culling mask, Uncheck everything except the player layer.
Step 30
And then make sure our player are actually on the player layers too. Confirm for all children objects.
Step 31
Hit play and see if this works! Oh we still have the sky box in our background of the camera.
Step 32
Go back to the Camera object and for "Clear Flags" Select "Solid Color"
Check Your Work
Step 33
Click play and check one more time and it should now only show your player!!
Step 34
You're done with this lesson! Click submit to go to the next lesson on Audio!
[No coding] UI Basics Info


MVCode Clubs

Created By

Nepgear tina (instructor)


[No coding] Unity Intermediate

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach