Introduction

In video game jargon, HUD stands for “head-up display” -which is “the method by which information is visually relayed to the player as part of the game user interface”.

Video games employ this method to convey information like “the main character's health, items, and an indication of game progression.”

Probably the most well-known HUD example is from Super Mario Bros. , released for the Famicom / NES in 1985:

As you can see, it is very rudimentary information (from left to right) like your score, the numbers of coins you have collected, what "World" or level you are in, and the amount of time you have to complete the level.

The most memorable HUD for me though comes from another Nintendo title, A Link To The Past :

As Faraway Foibles (the game I am creating) is a pastiche of the Zelda, Earthbound, and the Final Fantasy series, I wanted to employ a similar looking HUD.

There Are Many HUD Plug-Ins Available For RPG Maker MV. Atelier RGSS , Hudell , And SumRndmDde Have Created Some Of The Most Impressive And Sophisticated, Customizable HUD Plug-Ins Out There. There'S Even The DMV Zelda HUD By Dekita That "Creates A simply health hud inspired by the well known Zelda RPG ".

SumRndm Dude's plug-in even scared me into thinking I had broken my project. I think it has to do with the fact that I am using OSX) until I rebooted my system.

So I set out to create my own.

Luckily, I stumbled upon an excellent tutorial by a user named Pixii from the RPG Maker Central forums.

The tutorial was originally written for the VX Ace version of the RPG maker and an HP Slider format (rather than the Zelda hearts style), but using the RMMV Script Calls spreadsheets and stacks Overflow as references it wasn't specially dignit .

Tutorial

The first thing I did was use Piskel and Photoshop to create the look of my Zelda Heart HUD:

As you can see, I borrowed from the Link to the Past design and all I did was flip “LIFE” to “EFIL” 14 hearts.

My HUD Will Not Be As Complex. Currently, In Faraway Foibles, You Start Out With A Complete Set Of 14 Hearts, Which Represents Link To The Past Has 24 Maximum Hearts , You Start Out With Three And Collect The Rest As You Traverse Hyrule. your maximum HP.

Like Zelda, each heart has three states- full, half-full, and empty:

In Pixii's tutorial, she uses a single image:

Whose zoom width she manipulates depending on how much HP her character has:

Show Picture: 99, 'HUD_HP', Upper Left (10, 10), (100%, 100%), 255, Normal

and,

Script: mhp = $ game_party.members [0] .mhp
hp = $ game_party.members [0] .hp
calculate = (hp * 100) / mhp
screen.pictures [99]. Move (0, 10, 10, calculate, 100, 255, 0, 60)

I could fake it and overlay transparent hearts on a progress bar that decreased and incresed like but it would have been the same effect as the Zeldagames.

My solution was to create 29 different files:

They are all variations of the heart HUD I created with Piskel and Photoshop.

I put them in the IMG / PICTURES folder of my project file.

Here's what a few of them look like-

zhud_hp_112.png :

zhud_hp_52.png:

zhud_hp_0.png:

As you can see, they all represent different HP states, which are reflected by the number before the .png extension. So, zhud_hp_ 112 .png represents a full HP, while zhud_hp_ 0 .png represents no HP.

The reason I choose a range of 0-112 for HP value (as opposed to 0-100) is because of the 14 hearts. One-hundred doesn't divide equally among 14.

With these image files created, I can now modify what Pixii did:

  ◆ Show Picture: # 1, zhud_hp_0, Upper Left (10, 10), (100%, 100%), 255, Normal

and,

  ◆ Script:
Number.prototype.roundTo = function (num) {

var xBuff = this% num;

if (xBuff <= (num / 2)) {

return this-xBuff;

} else {

return this + num-x Buff;

}

}

var calcHP = ($ gameActors.actor (1) .hp * 112) / $ gameActors.actor (1) .mhp;

var pSuffix = calcHP.roundTo (4);

$ gameVariables.setValue (38, pSuffix);
  ◆ Script: Var PName = "Zhud_hp_" Tasu $ GameVariables.Value (38); 
  : Script : $ GameScreen.ShowPicture (1, PName, 0, 10, 10, 100, 100, 255, 0);

The first command, Show picture, pretty much stays the same as what Pixii did-I use a command that places the 0 HP version of the HUD ( zhud_hp_0.png ) in the top left corner of the screen.

In the script, I use a function (round to) proposed by Makram Saleh on Stack Overflow that will round a given number to another whole number that you specify. Here it is 4 (which can be multiplied 28 times to become 112).

I use this function on calcHP , which, per Pixii's script, is "a variable that creates a percentage value based off current and Maximum HP". Again, instead of multiplying the current HP by 100 as she did, I multiply it by 112.

It's hit by an enemy and loses 38 HP. It's current HP is 412:

412 * 112 = 46144

46144/450 = 102.542222222222222

When we feed 102.542222222222222 into the round to function it returns "104".

"104" is appended to "zhud_hp_", and becomes "zhud_hp_104".

A Show Picture command is called again, now with "zhud_hp_104" which is reflective of the character's current HP.

I have having multiple conditional statements that would be used to determine the character's HP.

Using the zHUD in a Project

Pretty much, do as Pixii in her tutorial.

Create 2 switches:

Game_Init
HUD_Toggle

Create a variable:

zhud_hp (remember its ID, in this example it is 38)

Create a Common Event called "Game_Init":

Create a Common Event called "HUD" (with Trigger: Parallel Process, and Switch: Game_Init):

The contents of "HUD" are:

A Conditional Statement IF HUD_Toggle is ON
Within that condition, a SCRIPT:

Number.prototype.roundTo = function (num) {

var xBuff = this% num;

if (xBuff <= (num / 2)) {

return this-xBuff;

} else {

return this + num-x Buff;

}

}

var calcHP = ($ gameActors.actor (1) .hp * 112) / $ gameActors.actor (1) .mhp;

var pSuffix = calcHP.roundTo (4);

$ gameVariables.setValue ( 38 , pSuffix);

Replace 38 with the ID of the zhud_hp variable you created.

Within that condition, a second SCRIPT:

var pName = "zhud_hp_" + $ gameVariables.value ( 38 );

$ gameScreen.showPicture (1, pName, 0, 10, 10, 100, 100, 255, 0);

Again, Replace 38 with the ID of the zhud_hp variable you created.

END Conditional Statement.

Create a Common Event called "HUD_Toggle":

Pixii uses an Autorun Map event that is placed on every map you have to start the HUD and calls the "Game_Init" Common Event.

I prefer to use a plug-in called MapTransferCommonEvent by Exhydra, that runs a common event every time a character is transferred to a map if the following tag is put in the map's Note box:

<mtceEn: commonEventId>

In my case, I put <mtceEn: 7> :

Now, when I playtest:

Welp, that's it. It's not perfect but it works for me.

Addendum (2019/04/05)

I stopped triggering the script using Common Events and opted for running it using the Pv_Scriptlets plug-in. More details here.

[RPG MAKER MV] DIY Zelda HUD (with CommonEvents)