Something I’ve said many times on the Turbo Makes Games YouTube channel is how important it is to constantly give feedback to your players so they know what is going on in your game.
This can be as subtle as a short sound effect or controller vibration or something more complex like displaying relevant information on the screen or playing an animation.
The player always needs to feel like they have in impact on and are being impacted by your game or they will lose interest.
One of the most common ways to provide feedback to your player is though UI. There are so many things you can do with the UI built in to the Unity game engine, that I will be going over different aspects of UI over the next few Feature Friday articles.
Today, we’ll be focusing on simple visual elements:
- Setting up UI in Unity
- Displaying Text and Images
- Positioning UI Elements on the Screen
Oh and make sure you read until the end because I want to share with you how someone from the Turbo Makes Games community recently got their game to 50,000 downloads in just two months!
1. Setting up UI in Unity
To start using UI in Unity, we’ll first need a Canvas element. A Canvas is a GameObject that controls the main settings about how the UI elements associated with that canvas are displayed.
UI elements will only be displayed if they are a child of a Canvas. And changing the settings of a Canvas will change how those child UI elements are displayed.
In general I setup a separate Canvas for like UI objects in my game. For anything that would appear on a HUD, I’d have a dedicated Canvas to contain all those UI objects; for a pause menu and sub-menus, I’d have another Canvas for, and so on.
To create a Canvas in Unity, right click in the scene hierarchy, go down to the “UI” section, and select “Canvas.”
Note that selecting any of the other UI elements will create a Canvas (if there is not one already in the scene) and put that UI element as a child of that Canvas.
You may also see that when you add a Canvas object, another object called EventSystem is added to the scene. This will be used later on when we talk about more complex UI behaviors, but no need to worry about it for now.
When looking at the Canvas object, you’ll see there are three main components: Canvas, Canvas Scaler, and Graphic Raycaster.
Working backwards, the Graphic Raycaster is used for interactable objects, which we will be getting to in a future Feature Friday article, so it’s okay to just leave all the defaults for now.
The Canvas Scaler controls how your UI elements scale at different screen sizes. Selecting one of the options for UI Scale Mode determines this behavior.
Constant Pixel size means all UI elements will take up the same number of pixels no matter the screen size or resolution. This works best when you are developing on devices that will only have one resolution and screen size (i.e. a handheld console) – this way you can craft your UI exactly as you want it down to the pixel. Using this when your screen size and resolution is unknown (i.e. on PC) means that sometimes the UI elements will appear too big or too small for the end user.
Scale with Screen Size is the setting I use the most. With this one you set a target resolution and the UI will scale up or down depending on the screen size and resolution. This means that UI will always be the same size in relation to everything else in the game.
Constant Physical Size is one that I almost never use. With this setting, the physical “real-world” size of the UI will be the same regardless of screen size or resolution. This could be used if you wanted to display the size of a real world object on the screen, but don’t know exactly the size and resolution of your target devices.
Moving onto the Canvas component, the main option to select between here is the Render Mode which controls how UI appears in your game. The options for Render Mode are Screen Space – Overlay, Screen Space – Camera, and World Space.
Screen Space – Overlay is most commonly used for HUD and menu UI. This render mode draws the UI above any objects in your scene. With this render mode everything is setup relative to the screen size.
Screen Space – Camera fills the screen the same way the Overlay render mode does, but this time you select a target camera and the UI will render on a plane at a specified distance away from that camera. This is useful if you still want 3D objects in your game to appear in front of your UI. Note that changing the plane distance does not change the size of the UI on the screen. It always scales to fit the full screen.
World Space is used if you want to have UI rendered in your game world. UI is still rendered on a plane, but the UI will appear larger the closer the camera gets to it and it does not always directly face the camera. You can see this often in VR games where the UI is somewhere in the world that the player can turn their head to look at.
So once you’ve setup your Canvas for your needs, now we can move on to displaying things on our UI Canvas.
2. Displaying Text and Images
Let’s start by displaying some Text to the screen. Just right click your Canvas GameObject in the Hierarchy, hover the UI sub-menu and select “Text” to add a Text GameObject to your Canvas.
You’ll see the Placeholder “New Text” appear on the screen. In the Text component, you can set the text to be whatever you like.
Many of the options on the Text component are standard ways to modify text in a text editor, so play around with them to get your font looking how you want it to.
In doing this, you may notice that your text gets cutoff or disappears. This is because your UI element has a size property (which we’ll be talking about in section 3 of this article) and if your text doesn’t fit in there, then it will be cut off.
One way to fix this is to change the Horizontal and/or Vertical Overflow properties to “Overflow” and your text should appear again. It may not be positioned exactly how you want it to, but we’ll fix that shortly.
Before we do that, let’s just display a simple image on the screen as well. To do that, right click your Canvas GameObject in the Hierarchy, hover the UI sub-menu and select “Image” to add an Image GameObject to your Canvas.
You should now see a white box on your screen. To set your image, set the Source Image property to a sprite asset in your project. Your image is now displayed on the screen!
Feel free to play around with the other properties for the Image as they can be used to create some really neat effects.
Now your UI image is likely not positioned exactly where you want it on screen and it may even be a bit distorted. Luckily, the distortion one is easy to fix, just click “Set Native Size” and your UI Image will resize to match the dimensions of the source image.
Now we can fix the positioning of our UI elements in the next section.
3. Positioning UI Elements on the Screen
You can move your UI elements around in the scene view with the movement handles just as you would with any other game object, but there is a better way to set the position of UI elements.
You’ll notice that all UI elements have a Rect Transform component rather than a standard Transform component. Here we can set the position, size, anchors, pivot, rotation, and scale of the UI element.
One important part of Rect Transforms are the Anchors. Anchors help you position your UI relative to different potions of the screen. You can manually set the anchor values, but it is easiest to set them using the icon in the upper left that looks like a crosshair.
Clicking on that reveals different Anchor presets that you will most commonly be using. By default it is set to Middle, Center – so that UI element will set its position relative to the middle center of the canvas.
If you wanted a UI element to always be in the upper left corner of the screen, then you can set the anchors to Top, Left so that the UI element will always be that distance from the top left corner of the screen no matter the aspect ratio, resolution, or screen size.
When setting the anchors through that icon, you can also hold down the shift and alt keys to also set the pivot and position of the UI element respectively.
The pivot is the point on your UI element that the position and rotation are calculated from. So when your UI element is at position (100, 50) – that means that the pivot of the UI element is 100 units to the left of the anchor and 50 units up from the anchor.
This may sound a bit confusing, but if you play around with it for a bit so see how the UI elements change based on anchors, pivot, and position, it will make a whole lot more sense.
Featured Unity Game of the Week
This week’s featured game is a rather special one because it was made by someone in the Turbo Makes Games community. In this video, Sanchit explains how he and a few other developers created a game, called Bladers Multiplayer Battle, and got it to 50,000 downloads in just two months.
It is a really insightful story and will be especially helpful to anyone who wants to release their own indie game. He talks about their overall strategy for marketing the game and getting their initial audience and then once they had their initial audience, how they continued to grow that over time.
He talks about work went right, what went wrong, and everything in between. Definitely give this video a watch, it will be well worth your time!
And so that is a basic overview on how to setup and begin to use UI in your Unity project. Unity’s UI is pretty powerful but some of the options can be a bit confusing if you don’t know exactly what they mean. I’ve seen a lot of people set the wrong options on their UI and it leads to a project that feels unpolished.
Again this is basically just scratching the surface when it comes to UI in Unity – next week we’ll be going over some more complex Text options by using TextMeshPro in Unity and showing you how to set text through code.
But do let me know if there are any specific topic you’d like to learn about as it relates to UI simply by replying to this message.
Anyways I hope you are all staying well, and as always, keep on creating!
-Johnny Thompson
Turbo Makes Games
Recent Comments