Unity Intermediate: UI Design

Name: Unity Intermediate: UI Design
Author: Ken Geary

Creating UI splash screens, a main menu, and overlay elements

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, welcome to this lesson in Unity. In these lessons, you will learn how to work with user interfaces to create a start menu, splash screens, and in-game status overlays. User interfaces, typically called UI, are an integral part of any interactive application or game. It allows the user to select game options by clicking or tapping menu buttons, enter data, or adjust the widget such as a slider. UI screens are also used to display a game title or game over screen. We will be creating a basic platformer-style game in 2D. Once the Unity Hub, then select New Project, choose 2D, check your file path, then we will name this project, Platformer. Click Create Project, the Unity editor will look the same as if it is working on a 3D project other than the scene windows toggle to 2D view. Click a scenes folder, if one is not already there, we will save the scene as UI. We will explore a sampling of the many UI elements available to create user interfaces by starting with a Canvas game object. The Canvas is an invisible placeholder for your other UI elements, such as panels, images, and buttons. In hierarchy, right-click, select UI, then select Canvas. Note that an event system is automatically added. In the inspector, there are several components to make up the Canvas. On the render mode, you can add the Canvas Appear in World Space, which is useful if we want to have, for example, a game object with a floating information graphic showing the object's health. We want this menu to take over the whole game screen, so we will leave this at screen space. Set the Canvas Scale to Scale with Screen Size. So if the user is running the game on a lower or higher resolution monitor, the UI will scale accordingly. Set the reference resolution to 960 by 540. Also note, in the scene view, the Canvas is very large, and if you toggle 3D in orbit to zoom, you can see how big it is in World Space. Unity when working in 2D screen space will only show this Canvas full screen and it locked to the camera. We can add a simple colored background by right-clicking on Canvas, select UI, and we will add a panel. The default panel is based on a white sprite image. We can change the color transparency by clicking the Color Tool in the Inspector. Use the Color Wheel in Square to select the light blue. By default, the panel component color also has transparency. We can make a solid color by clicking the Alpha slider designated by the letter A and make it 100%. If we hit Play, we will see the panel fullscreen. Tap Play, and let's set our game view for HD display. Click the Game tab, and use the pull-down menu to set the display to 16 by 9 aspect. Make sure the scale slider is set to 1x so we can see the whole game in the Game view. Click back to the scene tab, and select Panel in the hierarchy. The text UI element allows you to add, for example, titles to your Canvas. Be sure to select a panel first so each element will appear over the Canvas. You click, select UI, text, text mesh Pro. If you haven't used text mesh Pro before, you may see a pop-up window to install Essentials, such as fonts, which we need. Click Import. This is still the fonts we need, but we don't need examples. We'll close the panel. Now that we have a font to use, in the Inspector, change the text input to my platformer game. Note that the text element is static and has no interactions with click during play. Press the W key to enable the Move tool and move the text up near the top. You can also grab the side handles, drag them to either edge, and we can center the title. You can also hit the alignment, click the icon to do a center alignment, and that should be pretty good for our title. A toggle is useful for game menus, where you may want the user to enable and disable things, such as sounds. Right click on panel, like UI, toggle, let's move this toggle up until the left of the panel, twirl open toggle in the hierarchy, select label, and we'll change this label to music. By default, the image using a toggle square is a check mark, but you can change it to any other sprite image. Click play. Now we can click on a music toggle and check it on check it, as if we're enabling or disabling the music. Keep in mind, we still have to add code to work with the interactive elements in your game. A slider element is useful for game UI control, such as sound volume. Select panel, right click, UI, slider, we'll twirl open in the hierarchy, and you can see several components, these can all be customized in shape and color. Let's move the slider under the toggle, click play, and click and drag to adjust the slider. Stop play. The slider can also be retest to work as a health bar, by using code to adjust the slider fill bar as the player's health decreases or increases. This saves time not having to build that from scratch. A button element acts like a push button and reacts when clicked. Right click on panel, UI, button, text mesh pro, let's move the button under the slider, twirl open the button in hierarchy, select text, and any inspector change the text input to click me. Press play, and let's see how the button color shading changes as you click. This gives you feedback that the button is clicked. Stop play. You can customize the colors as you need for each element. A drop down element allows the user to see choices when clicked and select that choice. Click panel, UI, drop down, text mesh pro, move this a little bit to the right of our last element, and any inspector, scroll down, and the option section allows you to remove or add additional options as well as change the option name and add an optional image. Let's say I had one more option by clicking the plus, and we'll rename this option D. To rename, click the small circle, highlight the text, and rename. Click play, click the drop down menu, and allows you to select an option. Stop play. The input field element allows the user to type in information during gameplay, such as typing in a player name. Right click panel, UI, input field. Move this near the bottom of the screen, now hit play, and because of the input field, this allows you to type in text. Stop play. In the next lesson, we're going to learn how to create splash screens in Unity. Thanks for watching.

Intermediate Provider : Ken Geary 4 Lessons · 34m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In these lessons you will learn about using user interface (UI) components, including creating splash screens, a main menu, and a health and pickups overlay.

You’ll use the user interface (UI) components to enhance your 2D platformer game design, learn about components that make up a UI, such as a canvas, panel, buttons, text inputs, and sliders. You’ll create a splash screen sequence that can be used to introduce the game.

These lessons will also explain the framework for an interactive main menu, including layering panel elements, adding buttons, and adding effects such as drop shadows.

An important part of a 2D platformer game is having on-screen information displayed during game play. You’ll design a health level indicator using a modified slider UI element that will later be tied to the player code. You’ll also add an on-screen pickup counter that uses a basic text element, where the text will be updated by player code as the player collects pickup prefabs.

What You'll Learn

Identify the different types of UI components, including canvas, panel, buttons, text inputs, and sliders
Create a splash screen sequence to introduce the game
Build an interactive main menu by layering panel elements, adding buttons, and applying effects such as drop shadows
Design a health level indicator using a modified slider UI element
Add an on-screen pickup counter using a basic text element updated by player code

Key Takeaways

The course uses Unity UI components to enhance a 2D platformer game design.
A UI is made up of components such as a canvas, panel, buttons, text inputs, and sliders.
An interactive main menu can be built by layering panel elements, adding buttons, and adding effects like drop shadows.
The health level indicator is a modified slider UI element that is later tied to the player code.
The pickup counter uses a basic text element that is updated by player code as the player collects pickup prefabs.

Frequently Asked Questions

What will I learn in this course?

You will learn about using user interface (UI) components, including creating splash screens, a main menu, and a health and pickups overlay, and how to use these components to enhance your 2D platformer game design.

What UI components does this course cover?

It covers the components that make up a UI, such as a canvas, panel, buttons, text inputs, and sliders.

What lessons are included?

The lessons are Understanding the UI Components, Creating Splash Screens, Creating the Main Menu, and Creating Game UI Elements.

What skills will I build?

You will build skills in Coded User Interface (UI), Interface Design, UI Components, UI/UX Writing, User Interface (UI), and User Interface (UI) Design.

How does this course handle on-screen game information?

You will design a health level indicator using a modified slider UI element and add an on-screen pickup counter using a basic text element that is updated by player code as the player collects pickup prefabs.