Create HUD Elements (HP,MP)
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 480×270 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.
Chapter 1: Placing the HUD into your project & Making it a Tileset
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 (480×270), 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”.
Chapter 2: Placing the HUD into the Menu Scene
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.
Chapter 3: Creating the Objects to display HP/MP
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.
Chapter 3-1: Initial Object setup
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.
Chapter 3-2: Gauge display and setup
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.
Chapter 4: Placing the Gauge Object in the “Menu Scene”
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.