Designing UI for games in Unity

Designing UI for games takes some effort. And doing the same on mobile devices is very difficult. The variety of screen resolutions and dpis make the job not easy. Luckily, the guys that made Unity came up with a solution and that is Unity UI components. It is available from Unity 4.6 version.

Once you design a user interface using Unity UI, you will praise them. If you have already done some things in it, then you know it. Once we design the interface correctly, it will scale and align to all of the screens and resolutions perfectly. You also won’t have the problem of font scaling too.

Unity has a Canvas class and each UI element has to be a child of the Canvas class. Think like Canvas is a layer which sits above your game only to draw your UI elements. You can use the canvas in both 2D and 3D. In 3D, it will behave just like a 3D object, we don’t have to bother about any screen resolutions because it is inside the 3D world. Creating for 2D is another story. So let us look into that.

This is my way of doing and I found it easy to edit things in the game world. So I will show you how I do it.

Also Read:   Multi screen game development in Phaser

First, add a Camera to the hierarchy, rename it to UICamera. This camera is used to render the UI only. So you can deselect the UI layer from your MainCamera and select only the UI layer on this UICamera. Also set the clear flags to Depth only.

ui_camera

Set the UICamera to orthographic mode.
Then we can add a canvas as a child of this UICamera. Set the canvas settings like this.

canvas_settings
Now in the game scene you can move the UICamera to an emptyspace. You can see that where ever you move the camera, the canvas also moves. So, our UI won’t block our game elements.

canvas

Next, add an empty game object as a child of the canvas. Notice that, for every UI object, the transform component is called RectTransform and it has some more options. Click on the reference point icon – I just call it Reference setting – set it to stretch both ways. Also set the left,top,right and bottom to zero. These values denote how much gap we want around the object. We need to stretch it to the maximum available space, i.e., the screen dimensions.

stretch

Now whatever you add to the UI, add it as a child of this Stretch game object. If we want a button to be on the right bottom corner, set its reference point as bottom right and set its values like this. This way, the button will display cornered to all devices.

Also Read:   How to automate Godot Android build process in 5 easy steps

button

Experiment with this and feel free to ask any questions.

Never miss any content from Codetuto!

Subscribe to Codetuto Newsletter and be the first to recieve our latest posts and tutorials

Subscribe Now For Free

[Total: 0    Average: 0/5]