The complete RPG Engine for Unity
Create a simple player HUD using the Unity UI module.
In this tutorial we’ll create a Combatant type HUD to display the player’s name and Consumable type status values (HP, MP). How you name your status values (or how many you have) doesn’t really matter for this setup.
Your project’s UI system should already be set to use the Unity UI module. If not, check the Makinom UI system documentation for details.
First, we’ll set up the Status Value UI for our HP and MP status values. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual status values.
We’ll create a UI that shows the status value’s name on the left side, it’s current value at the right side and a value bar. The value bar uses a sprite and fills it according to the status value’s filled state.
You can download a simple, white sprite below in case you don’t have any sprite at hand. Using a white color allows us to color the sprite however we want using the Image component’s Color setting.
Download White Sprite
Creating our status value prefabs is pretty straight forward. We create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (for prefabs)
This will create a Canvas to style our UI in – the canvas is set up as Makinom’s default canvas would be. The ready to use status value game object is also set up for us and we can now style it to our liking.
The structure of the created game object is as follows:
We need to set the sprite the value bar will use. Change the Image components on the Empty Sprite and Value Sprite game objects (child objects of Canvas > Status Value > Value Bar).
Set the Value Sprite to use a Filled image type.
You can check how a partially filled status value will look like by changing the Fill Amount setting.
You can change the color of the value bar using the Color setting of the value sprite’s Image component. I leave the Color you use to your imagination. I’ll use a Green color for the HP and a Blue color for the MP. You can also change the color of the Empty Sprite if you want.
The text for name and value is defined in the ORK HUD Status Text Content components on the Name and Value child objects. E.g. if you also want to display the maximum value, change the Value child object’s text to <value>/<valuemax>.
Displaying the text of name and value is handled by the TextMeshPro – Text (UI) components on the Name > Text and Value > Text child objects. This is where you can change the font, font size, font color, etc.
You can also further style the setup as you like, e.g. I’ll let the value bar go from center to bottom instead of the whole size.
We add a Layout Element component to the the Status Value game object.
This ensures the status value will have a height of at least 20 when it’s added to layout groups (which we’ll use).
We’ll create 2 prefabs out of our status value game object (i.e. Status Value, not the Canvas). You can either create 2 individual prefabs or a prefab and a prefab variant.
One prefab for the HP (green color in my setup) and one prefab for the MP (blue color in my setup). The color is the only difference in my setup, but you can style them however you like, e.g. use different sprites.
You can remove the game object from the scene after creating the prefab.
Next, we’ll set up the Status Value UI in the HP and MP status values with our prefabs.
Open the Makinom editor, navigate to Status > Status Values.
Select our HP/health status value (Consumable type).
Select your MP/mana status value (Consumable type).
Alternatively, you can also define a Key Status Value UI instead of setting the default UI. In this case, make sure to later also use the same UI key in the HUD Status Value List component setup.
Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.
Next, we’ll set up the actual HUD, starting with the prefab. 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 (Vertical Layout)
This creates an empty HUD with a vertical layout. We use a Vertical Layout Group to arrange the HUD’s content in a vertical list.
We adjust the width of the HUD.
We’ll add a Content Size Fitter to the HUD to make it adjust it’s size to the displayed content.
We’ll add an Image component to display a background image in the HUD.
Now that we’ve got our basic HUD, it’s time to add some content to it.
We’ll add an ORK HUD Status Text Content to display the combatant’s name and level. See this documentation for details.
Right-click on the base HUD game object in the scene hierarchy and add it using the context menu: ORK Framework > HUD > Content > Status Text Content (TextMesh Pro)
This adds the text content as a child object of the HUD. Change the text of the ORK HUD Status Text Content component:
Like we did for the status value UI prefabs, you can change the style of the text in the TextMeshPro – Text (UI) component on the Status Text Content > Text child object. E.g. I’ll use a bold font, font size 25 and a yellow font color.
We’ll add a HUD Status Value List to list the status values using their Status Value UI we just set up.
Again, right-click on the base HUD game object in the scene hierarchy and use the context menu: ORK Framework > HUD > Status Value > Status Value List (Vertical Layout)
This adds the status value list as a child object of the HUD. It contains another vertical layout, since it’ll add the individual status values to this game object. This way adding the status value during the game will not interfere with any additional HUD elements we’ll add after the status values.
The default setup is already correct for what we want to do (show Consumable status values with the default UI). To make sure, let’s check it:
You might be wondering about the placement of the HUD. We’ll use a UI Layout to handle this, but you can also use the actual HUD game object’s position if you want. In that case, place the HUD on the canvas where you want it to display.
That’s already everything we need to do. Create a prefab out of the HUD, e.g. save it as Player HUD.
You can now remove the canvas (and HUD) from the scene.
As a last step, we’ll set up the HUD in the Makinom editor.
First, we create a UI Layout that’ll handle placing the HUD for the player and other player group members. We want the player HUDs to display at the lower right corner, adding additional combatants to the left. You can learn more about UI layouts in the Makinom documentation.
Open the Makinom editor, navigate to UI > UI Layouts and create a new UI layout.
Next, we’ll set up the HUD. Navigate to UI > HUDs, add a new HUD and change the following settings.
You can use these settings to only show the HUD based on conditions. E.g. only during battles, etc.
We’ll ignore this for now.
Once again, don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.
Hit play and test your HUD! Naturally, you need a combatant in your player group for this to work.
If you’re not satisfied with the look, open up the prefabs for the HUD and/or status values and adjust them to your liking.
You can also create an alternative setup without using Status Value UI prefabs and the HUD Status Value List.
Use HUD Status Value components to define a single status value in the HUD instead of the HUD Status Value List component. Similar to the status value prefabs we created, you can use the scene hierarchy context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (single)
The styling process is the same like the prefabs. All you need to do is define the displayed status value in the HUD Status Value component.
This setup avoids creating prefabs in-game and can improve the performance of your UI (creation).
© 2015 Gaming is Love e.U.
Disclosure: This site may contain affiliate links, which means I may receive a commission if you click a link and purchase something that I have recommended. While clicking these links won’t cost you any money, they will help me fund my development projects while recommending great assets!