Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Tutorial Post (UI Menus)

For UI to work, you need a canvas. It's the element that all UI elements should be inside and the position of those elements are where it shows up on the player's screen. You can create it by right clicking the hierarchy -> UI -> Canvas. Afterwards, an outline of a white rectangle should appear as shown below. That is the canvas.

And your UI element will be relative to where it is in the white box. Think of the white box as the player's screen. For example, if you put text near the top right of the box, it'll appear like that to the players as shown below.

When ran it looks like:

Text isn't the only thing you can put inside a canvas! Unity has provided us with a variety of UI tools that we can leverage including images, panels, texts, toggles, sliders, buttons, and other goodies!

Text and images like shown above are not interactable by the player directly. They must be interacted and changed through scripts. In my example below the text displaying the player's coins is merely "New Text" in the scene inspector but you will see that once the game is launched, it changes to the appropriate value. 

This is because on the right in the inspector image you can see that I attached the text to the script on the player called "Character" called "Coin Text"

Let's take a closer look at that shall we?


On line 19 I declared a public TextMeshProGUI (which is the text) and called it goldText. Above it on line 17 is where I declared the int variable gold which is the actual gold tracker since our goldText is actually a string, it can't track our gold effectively.

On line 27 is where I add any additional gold that the player gave themselves in the settings via the GameManager. On line 29 is where I change the gold text for the first time from "New Text". You can see me change it to the number of gold that the player has as a string. Then on line 69 I do the same, updating it to the most current count after I increase the gold float count.

The same idea works not only for text, but for all UI elements. Below you can see my pause menu code. With the way I implemented it, it's a panel that's technically always there but not visible to the player. Only when the player presses escape is when it becomes visible and active.

Of course, this only covered non-interactive UI elements so far but this also works for interactive elements like buttons!

Speaking of interactive UI elements like buttons and sliders, they have a special property: the player can interact with them! For buttons, they have a on Click () property in the inspector and sliders have an On Value Changed (Single) property.

That is where you can run any script functions on when the component is interacted with.

For example, this is my main menu.

You can see that my "OPTIONS" button has 2 functions to run when it's clicked: it sets the option menu to active and the main menu to inactive. This also works with script functions as well so you're not limited to the basic functions as seen with my play button which calls the PlayGame() function in the Main Menu script on click.

Below is  my usage of the slider. You can see that it runs the SetGold function in the Main Menu script whenever the value changes (when the player moves the slider). 

and this is the script for that function

As you can see, whenever the slider is moved, it runs SetGold which adds gold to the GameManager which sets the gold text initially as shown earlier. 


This covers my basic tutorial on UI systems. Here are some links for further and in-depth reading:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/index.html

https://learn.unity.com/tutorial/ui-components#

https://blog.unity.com/games/ultimate-guide-to-creating-ui-interfaces


Thank you for reading! Feel free to leave a comment below telling me what I missed and what you would like to get a more in-depth coverage on!

Support this post

Did you like this post? Tell us

Leave a comment

Log in with your itch.io account to leave a comment.