Creating a HUD (Beginner / Intermediate) using Common Events
Example HUD created using Pictures and Common Events.
The HUD BACKGROUND is ONE Image.
The SLIDERS make up THREE different Images.
The HUD FOREGROUND is ONE Image.
I realize, there is a Tutorial already written about creating a HUD using Common Events. It's a fantastic Tutorial that gives you a general idea of what you need to do, but it uses too many images and would only work if your Player took damage in multiples of 10s. I wanted a simple way to display actual percentage values instead of set numbers. As such, this Tutorial was born.
FOR BEGINNERS {OR THOSE OF YOU WHO ARE CURIOUS}
This Section creates a Visual HUD using Common Events from Scratch.
This Tutorial assumes you are able to Navigate through RPG Maker VX Ace, and that you already know how to Create Switches and Common Events. Any Questions should be posted in the Comments or Replies.
OBJECTIVE OF THIS TUTORIAL
This Tutorial will show you how to create an HP Slider as an Example. From there you should be able to create your own MP Slider and any other Sliders or Images you would like to finish your HUD.
This Tutorial will NOT show you how to create the Example HUD displayed at the top of this post.
Let's take a look at the HP and MP Slider already programmed into RPG Maker VX Ace. As you can see, there are 2 Slider Images and 1 Background Image. We are going to use these images to create our own Sliders.
You will need the following Images to complete this Tutorial:
- 1 Image for an HP Slider
- 1 Image for an MP Slider
- 1 Image for a HUD Background
SAVING THE IMAGES TO YOUR HARD DRIVE
To Save these Images:
- Click on each Image
- Select
- This will open up a New Window with the Image
- RIGHT CLICK the Image and select "Save Image As" **
** The words "Save Image As" may be different depending on your Browser
Import the Images you just Saved into Resource Manager > Graphics/Pictures.
You can name these Images whatever you'd like, but I recommend calling them: HUD_HP, HUD_MP, HUD_Background.
This will allow you to easily organize these images.
Create 2 Switches named "Game Initialize", and "HUD: Toggle"
Create 3 Common Events named "Game Initialize", "HUD" and "HUD: Toggle"
General Settings for each Common Event
- [Game Initialize] Common Event
Trigger: NONE
- [HUD] Common Event
Conditional Switch: GAME INITIALIZE
- [HUD: Toggle] Common Event
ABOUT EACH COMMON EVENT
[ GAME INITIALIZE ] Common Event
This Common Event should be used in your Game to set any and all default settings. It should typically hold Switch and Variable data. In my Game, this Common Event is used to 1) Turn on the Game Initialize Switch 2) Set a Default Gender 3) Set a Default Game Mode 4) Set Default Settings for the HUD. You can use this Common Event to set all default values for your Game as well, but for now, you should only have the following 3 lines in this Common Event:
- Control Switches: [0001: GAME INITIALIZE] = ON
- Control Switches: [0002: HUD: Toggle] = ON
- Call Common Event: [HUD: Toggle]
This Common Event will be called when you want to Toggle the HUD ON or OFF. Ideally, you would want to create an Options Scene that does this for you, but for the purposes of this Tutorial, we're going to create an Event that Toggles this Switch ON or OFF. If you add additional Images to your HUD, you should Initialize (Show Picture) and Delete (Erase Picture) them here.
- Conditional Branch: Switch [0002: HUD: Toggle] == ON
Show Picture: 99, 'HUD_HP', Upper Left (10,10), (100%, 100%), 255, Normal
Show Picture: 98, 'HUD_Background', Upper Left (10,10), (100%, 100%), 255, Normal- Else
Erase Picture: 99
Erase Picture: 98- Branch End
[NOTE] The following information is Optional. Questions will be addressed in the Comments
The [HUD: Toggle] Common Event can get pretty extensive if you're using multiple images. You could always insert a quick Script snippet that will Show or Erase Images for you. An example of this would be:
- Script: for n in 88..100 do
screen.pictures[n].erase
end
This is the Common Event that will hold all of the necessary changes to the HUD, specifically the Slider Data. In the HUD, we won't be accessing the Background or Foreground Images (if you're using any). Instead, we will only change the Zoom Width% for the HP Slider.
- Conditional Branch: Switch [0002: HUD: Toggle] == ON
Comment: Calculate HP%
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)
Branch EndLet's break down this Common Event
- Create a Conditional Branch that executes when Switch HUD: Toggle is ON.
- Uncheck the box labeled "Set handling when conditions do not apply".
We do not need to do anything if the Switch is OFF.- Create a Comment that lets you know what this Script is going to do. I prefer Comments, because you can use them to describe your actions in great detail, and you can format them so they jump out at you. For Example:
Comment: ==========================================
CALCULATE HP%
-------------------------------------------------------------------
Changes the Zoom Width % for the Picture
==========================================- Insert the Script that calculates the HP values and changes the Zoom Width of the Picture
- [NOTE] If you would like to add additional Sliders, you will use the following Format:
Conditional Branch: Switch [0002: HUD: Toggle] == ON
Comment: Calculate HP%
Script: .....
Comment: Calculate MP%
Script: .....
Branch EndLet's break down this Script that we've created
- mhp - is a variable that retrieves the Maximum HP of Party Member #1
- hp - is a variable that retrieves the Current HP of Party Member #1
- calculate - is a variable that creates a percentage value based off Current and Maximum HP.
so far, we're just using Simple Math that we've learned in Elementary School- Lastly, we're going to MOVE the Screen Picture with the ID number 99 to the Zoom Width% determined by calculate.
The format for screen.pictures is:
screen.pictures[id].move(position, x, y, x-zoom, y-zoom, opacity, blend-type, wait)
id - in this case, the id is 99 (HUD_HP)
position - set to 0, which indicates the Top Left of the Screen.
([0] = Top Left, [1] = Center)
x - set to 10, this can be any x value on the screen
y - set to 10, this can be any y value on the screen
x-zoom - set to calculate. This will change the horizontal shape of our slider
y-zoom - set to 100. We do not want the vertical shape of our slider to change
opacity - set to 255. We would like for our slider to be visible.
([0] makes the slider invisible)
blend-type - set to 0. Changing this value will alter the overall color scheme of your Picture
([0] = Normal, [1] = Add, [2] = Subtract)
wait - set to 60. This is the standard wait time for Picture animation, but you can set this to any number.
Personally, I like to have a separate MAP that I use to Test all Changes, named as EVENTS.
On your Test Map, Create 2 Events named "Game Initialize" and "Toggle HUD"
ABOUT EACH EVENT
The Game Initialize Script should be an Invisible Event that executes as SOON as your Game Starts. Ideally, you would place this Script on your first Map. In this case, I'm also using this Event on an Event Test Map. This Event will ONLY EVER be 2 Lines long. It will call the Common Event: Game Initialize and then Kill itself. If you ever need to make changes to the start of your game, you should do so within the Game Initialize Common Event.
GAME INITIALIZE EVENT SETTINGS
- Name: Game Initialize
- Graphic: None
- Priority: Above Characters
- Trigger: Autorun
GAME INITIALIZE EVENT CONTENTS:
- Call Common Event: Game Initialize
- Erase Event
This Event will test our HUD. We're going to create a little Dude that will Hurt us, Heal us, and Toggle the HUD. He (or she, or it) can be anything.
TOGGLE HUD EVENT SETTINGS
- Name: Toggle HUD
- Graphic: {ANY}
- Priority: Same as Characters
- Trigger: Action Button
TOGGLE EVENT CONTENTS:
- Show Choices: Take Damage, Heal HP, Toggle HUD, Cancel
- : WHEN [Take Damage]
Change HP: Entire Party, -50- : WHEN [Heal HP]
Change HP: Entire Party, +50- : WHEN [Toggle HUD]
Conditional Branch: Switch [0002: HUD: Toggle] == ON
Control Switches: [0002: HUD: Toggle] = OFF
Else
Control Switches: [0002: HUD: Toggle] = ON
Branch End
Call Common Event: [HUD: Toggle]- : WHEN [Cancel]
- Branch End
Run The Game and Interact with the TOGGLE HUD Event. Your HP Slider should display on the Screen. When you take Damage, the HP slider should decrease. When you're Healed, the HP slider should increase. You should also be able to Toggle the HUD ON and OFF.
CONCLUSION
You can use the same process described in the [HUD] Common Event to create a Slider for MP or even EXP. The possibilities are endless. You can even use Pictures to show numerical values of HP, MP, EXP, etc (as shown in the Example Image at the start of this Tutorial) This will require a lot more planning and a little more work, but it can be done.
There are more advanced ways to display this data using a Script, but that's a Tutorial for another time.
With a little patience, you can easily create your own HUD designed specifically for your Game.
18 Comments
Recommended Comments