Quick Disclaimer:
Naguide (Naguide owner: Abdullah Kartal) has stolen this guide and posted it on his website without my express permission. He has also claimed that this steam guide belongs to him (Abdullah Kartal). This is FALSE and should be ashamed of himself for being a thief. This guide is only available on Steam!

This guide is going to assume you're very familiar with the program and it's basics; So I will not be explaining the basics. If you need a proper foundation, I suggest reading my previous guide on how to create a Save and Load system, the other quick start guides here on Steam and the Pixel Game Maker MV manual for more information. At the time of this writing, the instructions are based off Pixel Gamer Maker version 0.9.7, but should be applicable to future versions (provided no major changes have occurred).

You're going to need some external tools to get this done. To make some of the aspects of the HUD, you'll need to make it in some sort of art program. I recommend "Aseprite" mainly because it's lightweight, very easy to use, and cost effective (all my opinion, not sponsored to say this) & works for pixel art based projects. Of course, you're free to use whatever you want to use.

First things first, I highly suggest that you need to setup your project properly and lay down some foundations to scale up for everything we do here. Part of designing the HUD interface for your game comes down to overall project resolution setup. You need to select a resolution and stick with that in order to avoid having to redo assets.

I can recommend 480x270 as an internal game resolution. Why? At this resolution, it's a tad easier to make game assets that aren't going to be huge time sinks to get right; And this is a pretty optimized resolution for 16:9 resolutions allowing you to scale to 1080p resolution without it looking incorrect (since it's a resolution that scales by the power of "2").

The overall takeaway here: At the end of the day, pick a resolution you're happy with, and stick to it for this guide to be it's most effective. When I designed my HUD element, I designed it around my game's internal resolution. You'll see why this is later on.

My project settings from my upcoming game in case you want to follow me step for step.

After you've designed your HUD. Register the assets into your project in "Resources" tab as an Image. The HUD Element file itself takes the entire game screen but is mainly translucent except the one area where my baked in HUD is. Simply put, my HUD image file is the same size of my project's internal resolution (480x270), but the HUD itself only takes a small portion of the screen.

After you've registered your asset, head over to the "Tiles" tab and create a new tileset. We're creating a Basic Tile and don't need to configure any of the settings. Just make sure you've selected your HUD as the source image under "Select Image".

It's very basic settings.

Now that we've made the HUD into a usable tileset, let's paint it in so it will display in game. We're going to use the "Menu Scene" under "Scenes".

To briefly touch on the concept of the "Menu Scene", it's a scene dedicated to handling of all overlays in your game. So, you literally can use this scene, and the many layers at your disposal to create menu and overlay systems. Pretty handy if I do say so!

Right click the "Menu Scene" and click on "Scene Settings". In Scene settings, register your HUD tileset so we can paint it into the scene. Once registered, paint it into the scene into Layer 1.

HUD tileset is registered in the "Menu Scene".

This is what it looks like painted in the editor.

Now that your HUD is painted into your Menu Scene, we need to create the appropriate objects to handle display of these elements in a way that's independent of your Player character. We'll break this section down piece by piece to make this as easy to follow as possible. The steps lined out here should be agnostic for creating both your HP and MP bars.

In the "Objects" tab, create a new Object to control your gauge display (HP or MP). The initial settings of the Object should be sufficient for what we need.

Object settings.

Inside the object we made for the gauge of our choice, head over to the tab called "Display and parent-child relationship". Under "Display Related", click the "+" icon to create a new gauge.

In the settings, make sure "Show Variable Value" is selected. Then in the space next to it, select the variable you want displayed. We'll select the player object's internal "HP" variable (since all objects have this variable built in). For an MP gauge, you'll need to create new variable values to handle the "Current MP" and the "Max MP" values.

Next, make sure the selection for "Show as Gauge" is enabled and select your colors for the gauge and the background to your liking. Below this, make sure to enable the options "Set Gauge Upper Limit" and "Adjust gauge ratio based on upper limit". That way, if your character's max HP/MP increases, it'll be properly reflected. Then, select the variable to represent the "Max" value of your HP/MP gauge in the middle space between the aforementioned settings.

Lastly, configure the "Adjust Layout" settings to your liking. This part will require a bit of trial an error, but some initial tips/suggestions I can offer here is to leave the offset values alone; As these settings are based off the relative position of the object itself. For our purposes, setting the "Scale (%)" value is what we want to modify here. These control how long and thick you want the gauge to be. Use the "Preview" button on this page as you adjust the values to get what you want.

Gauge settings setup.

Now that you have set up your gauges, it's time to place them in your "Menu Scene". From here, head back over to the "Scenes" tab. Within the layer to placed your tile for the HUD element, place your object for each respective gauge in relation to where you placed your HUD element.

This will take some trial and error to get going, but if you didn't adjust the offset values for the gauges back in Object settings, you should be able to place them on the menu scene around the HUD to get the display correct.

This is where I had to place my HP Gauge Object to display on top of my HUD Element tile.
To get the placement correct, using "F5" to initiate test play is your friend.

I hope I was able to help some of you out there who might be struggling with designing HUD elements in your games!

Please leave a comment below if there's anything you'd like me to try and cover that I haven't stated that I would cover in the future, or is currently missing from this guide. I always appreciate constructive feedback.

And if you found this guide helpful, feel free to follow me on Twitter for more Game Dev/Art content!

Abstract the Origin on Twitter