Create a virtual control HUD using the Unity UI module.

In this tutorial we’ll create a Control type HUD to display virtual controls – a joystick and 2 buttons.

Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.

You can download the completed HUD setup here:

Download HUD

This contains the control HUD prefab. You’ll need to select the input keys you want to use (in the HUD Joystick Control Content and HUD Button Control Content components of the prefab) and use the prefab for the HUD setup in the Makinom editor.

For simplicity, we’ll create a single HUD for the used virtual controls. In your game, you’ll most likely need to place virtual controls at different parts of the screen, e.g. a joystick on the left sice and accept/cancel inputs on the right side. For such a setup, simply create multiple HUDs and place them where you need them.

HUD Prefab Setup #

The Unity UI module uses prefabs to create HUDs, i.e. your HUD’s setup is done in the scene view via game objects and components.

We use the scene hierarchy’s context menu to create our base HUD: Makinom > HUD > HUD (i.e. without any layout)

This creates an empty HUD without any layout group, we’ll freely place the virtual controls as we need them.

Rect Transform #

We’ll adjust the placement of the HUD, placing the virtual controls in the lower left corner of the screen.

Joystick #

Next, we’ll add a joystick control to the HUD game object.

Create a ready-to-use setup using the scene hierarchy’s context menu: Makinom > HUD > Control > Joystick Control Content (Sprite)

This adds a virtual control for a joystick (i.e. with horizontal and vertical axis) and uses a sprite to show the control.

Rect Transform #

We’ll place the joystick on the left side of the HUD.

Select the Joystick Control Content game object and change the following settings.

HUD Joystick Control Content #

The HUD Joystick Control Content component manages which input keys will receive input from this virtual control.

For a joystick, this requires horizontal and vertical input.

HUD Input Display #

Select the Input Display child object of the joystick control.

The HUD Input Display (Sprite) component manages how an input will change the displayed sprite. You can change the used sprite as well as change the color of the image. We’ll leave it as is for this tutorial (i.e. no changes) – when you change the sprite or color for one of the states, keep in mind that you also need to set up the default (non-pressed) sprite/color to return to.

When using the Game Object variant instead of Sprite, you can select the game objects that will be enabled/disabled for the different input states.

Image #

Since the created default setup doesn’t have any sprite selected, let’s just select a standard Unity UI sprite for this simple setup.

Feel free to use your own sprites.

So far, the HUD will look like this.

Button (Accept) #

Next, we’ll add a button to the HUD game object.

Create a ready-to-use setup using the scene hierarchy’s context menu: Makinom > HUD > Control > Button Control Content (Sprite)

This adds a virtual control for a button (i.e. a single input key) and uses a sprite to show the control.

Rect Transform #

We’ll place the button on the upper right of the HUD.

Select the Button Control Content game object, rename it to Accept Button and change the following settings.

HUD Button Control Content #

The HUD Button Control Content component manages which input key will receive input from this virtual control.

For a button, this requires a single input.

Image #

Select the Input Display child object of the button control.

Like the joystick, the display of the input is handled by the HUD Input Display (Sprite) component.

We’ll again use a standard Unity UI sprite for this simple setup. Feel free to use your own sprites.

Button (Cancel) #

We can just copy the button we just set up and adjust it a bit.

Duplicate the Accept Button game object and rename it to Cancel Button.

Rect Transform #

We’ll place the button on the upper right of the HUD.

Select the Button Control Content game object, rename it to Accept Button and change the following settings.

HUD Button Control Content #

Change the used input key.

Image #

Change the used color (and/or sprite).

And with that, our virtual control HUD’s prefab is ready. It should now look something like this.

Create Prefab #

Create a prefab out of our HUD game object (without the Canvas). E.g. name the prefab Control HUD.

You can now remove the game object from the scene (and the canvas, if you’ve set this up in one of your regular game scenes).

HUD Setup #

Finally, we’ll set up the HUD in the Makinom editor. Navigate to UI > HUDs, add a new HUD and change the following settings.

HUD Settings #

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only when the player controls are enabled (game state In Control being active).

We’ll ignore this for now.

Unity UI #

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out. You can also set up default schematics for all HUDs.

See this tutorial for details.

Save Settings #

That’s it for the setup.

Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

Testing #

Hit play and test your HUD!

You’ll see your virtual controsl in the lower left corner of the screen, being able to move your player (if you’ve used the movement input keys) and accept/cancel (e.g. start interactions).

Tip: Mix and match #