2D Mobile Game: HUD Setup

Intro

In this article, we are going to setup the Heads Up Display that will have health bars, gem count, mobile input decals. We will being using different UI elements to create this Heads Up Display.

HUD Panel

In the Canvas, we will create a new panel that will house all of the HUD UI elements.

There is an image that will be added to the panel.

To ensure the import quality of the HUD image, we will want to set the size of the image to match the actual size of the image. After the size have been matched, we anchor it to the top left corner and position to our liking.

Mobile Input Decals

These decals will be turned into a joystick and buttons to be used to control the Player when played on a mobile device. These UI elements will be images for the setup and the importing steps will remain the same with matching the source size of image, anchoring to the correct point in the screen and giving it a position that makes sense to UI layout.

The Joy Stick source image is 512 x 512, so we will match these dimensions and anchor it to the bottom left corner. This will ensure the image stays in that corner, no matter the device the game is played on and the scale of the device’s screen.

The B Button decal will be anchored to the middle of screen, the size set to 256 x 256.

The A Button will be the same, but the positioning will be different.

For all three of these input images, we will want to decrease the Alpha to make it more translucent and less obstructive to the game play.

Health Bar

The HUD image has a place for health bars to be place. Again, match the source image sizing. Once we have the original health bar image setup, we can duplicate to have a total of 4 health bar images.

We number the health bar images and position them, in order, to fill the health bar.

Lastly, we will place all of the health bar images into a empty container of hierarchy organization and ease of access.

Gem Count

We are going to create a UI Text element that will track the amount of Gems the player’s have collected.

We will put a place holder number for the text field to help us get the sizing and spacing of this text element in the grand scheme of the HUD. We changed the Font type and size, and allowed the Overflow of the text which makes it possible to increase the font size.

Position the Gem Count text and ensure it fits the HUD.

Conclusion

The HUD is setup and is ready to become interactive through code. The health bars can be depleted or regenerated, the gem count will increase and decrease, and those button decals will actually become buttons. But, for now, the scene is set and everything looks good.