Jump to content
Sign in to follow this  
  • entries
    3
  • comments
    22
  • views
    6,890

Creating a HUD (Beginner / Intermediate) using Common Events

Pixii

9,753 views

Example HUD created using Pictures and Common Events.

2qd3eid.png

 

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.

 

:ph34r: 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.

:ph34r: OVERVIEW

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.

 

 

 

 

2qty4ol.png

:ph34r: WHAT YOU'LL NEED

You will need the following Images to complete this Tutorial:

  • 1 Image for an HP Slider 34g3crl.png
  • 1 Image for an MP Slider 24fihpk.png
  • 1 Image for a HUD Background fmmikp.png

SAVING THE IMAGES TO YOUR HARD DRIVE

 

 

To Save these Images:

  1. Click on each Image 34g3crl.png
  2. Select 15hc1t1.png
  3. This will open up a New Window with the Image
  4. RIGHT CLICK the Image and select "Save Image As" **
     
    ** The words "Save Image As" may be different depending on your Browser

:ph34r: IMPORT THE IMAGES

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.

 

 

 

 

 

 

25p69td.png

 

 

:ph34r: GETTING STARTED

Create 2 Switches named "Game Initialize", and "HUD: Toggle"

Create 3 Common Events named "Game Initialize", "HUD" and "HUD: Toggle"

 

 

 

2a7y5qr.png

General Settings for each Common Event

  • [Game Initialize] Common Event
    :) Trigger: NONE
  • [HUD] Common Event
    :) Trigger: PARALLEL PROCESS
    ;) Conditional Switch: GAME INITIALIZE
  • [HUD: Toggle] Common Event
    :) Trigger: NONE

ABOUT EACH COMMON EVENT

 

 

:wub: [ 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]

:wub: [ HUD: TOGGLE ] Common Event

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

:wub: [ HUD ] Common Event

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 End

Let's break down this Common Event

  1. Create a Conditional Branch that executes when Switch HUD: Toggle is ON.
  2. Uncheck the box labeled "Set handling when conditions do not apply".
    We do not need to do anything if the Switch is OFF.
  3. 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
    ==========================================
  4. Insert the Script that calculates the HP values and changes the Zoom Width of the Picture
  5. [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 End

Let'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.

 

:ph34r: TESTING THE HUD

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"

 

 

 

 

2rwan9h.png

ABOUT EACH EVENT

 

 

:wub: [ GAME INITIALIZE ] 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

:wub: [ TOGGLE HUD ] 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

 

 

:ph34r: FINAL STEPS

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.

 

 

:ph34r: 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

Woah, impressive! Are you new to the rpg maker scene?

New to the RPG Maker VX Ace scene, but I purchased RPG Maker 2&3 for PS2/PS3 when they were first released. I'm still in my free trial for RPG Maker VX Ace lol

Share this comment


Link to comment

Ah I see! You're doing really well! Especially in the Ruby and Eventing area from what I've seen and with only the trial at that. x) 

Thanks~! I'm super noob to Ruby, but I've always been really great at correlation. So I can pick things up fairly quickly. Like, when I was younger, my mother brought home a keyboard and a handbook of beginner songs. I actually finished the songbook by the end of the day and memorized a few of the songs by the end of the week. I'm no prodigy though, I actually knew how to play the violin, and as a result, was able to play the keyboard (although, I can't play either anymore! hahah I haven't touched either instrument since like 9th grade haha)

 

But since I speak PHP fluently, and I have a general knowledge of C, C++, Java (to name a few), and I'm a web designer/programmer, and I actually started programming this game for my 3DS... I'm kind of getting the hang of Ruby hahaha. There's a lot of reading to do, and most of it is just knowing what goes where, but I think if I keep at it, I should be able to conquer it soon. Although, I don't have NEARLY as much free time as I did when I was a kid... so it's going slowly :P

Share this comment


Link to comment

 

Ah I see! You're doing really well! Especially in the Ruby and Eventing area from what I've seen and with only the trial at that. x) 

Thanks~! I'm super noob to Ruby, but I've always been really great at correlation. So I can pick things up fairly quickly. Like, when I was younger, my mother brought home a keyboard and a handbook of beginner songs. I actually finished the songbook by the end of the day and memorized a few of the songs by the end of the week. I'm no prodigy though, I actually knew how to play the violin, and as a result, was able to play the keyboard (although, I can't play either anymore! hahah I haven't touched either instrument since like 9th grade haha)

 

But since I speak PHP fluently, and I have a general knowledge of C, C++, Java (to name a few), and I'm a web designer/programmer, and I actually started programming this game for my 3DS... I'm kind of getting the hang of Ruby hahaha. There's a lot of reading to do, and most of it is just knowing what goes where, but I think if I keep at it, I should be able to conquer it soon. Although, I don't have NEARLY as much free time as I did when I was a kid... so it's going slowly :P

 

o.o Wow. Maybe not a prodigy but definitely a developer with some experience! ^~^ 

Share this comment


Link to comment

You see, my issue is that eventing a HUD restricts you to a horizontal bar and no vertical bar. Every time I have tried to make one work, it goes wonky on me.

In the above Tutorial, we worked with a horizontal image

screen.pictures[99].move(0, 10, 10, calculate, 100, 255, 0, 60)

To change a vertical image, you would use:

screen.pictures[99].move(0, 10, 10, 100, calculate, 255, 0, 60)

 

screen.pictures[n].move(position, x, y, x-zoom, y-zoom, opacity, blend-type, wait)

  • set x-zoom to 100 (which means it wouldn't change it's horizontal shape)
  • set y-zoom to the percentage value that you're calculating

I went ahead and created a blank project from scratch using this Tutorial, just to ensure that a Vertical value would work, and it does ^.^

 

2cmnexg.png

 

NOTE: If you're having issues, keep the following in mind:

  • x-zoom and y-zoom are percentage values.
  • So your calculate variable needs to be represented as a percentage value
  • The Image that you're using as a Slider, should be the largest it can possibly be

    (100% width and 100% height).

5zioso.jpg

Share this comment


Link to comment

Huh... Every time I tried to make one and adjusted the bar length, it moved the image all over. Perhaps I used the wrong corner/center setting...

I'll have to tinker with this again and see if I can get it to work.

Share this comment


Link to comment

For the script calls, I use a script similar to Picture Wrapper to allow me to change specific properties without having to worry about other properties.

 

So for example if I wanted to make the width shorter, I can just say

 

zoom_pic(3, 0.5, 1)
To shrink pic 3's width to 50% and height to 100%

Share this comment


Link to comment

Thanks for the little snippet Tsukihime~! I love your scripts, they're all very organized!

@Necromedes - if you're still having trouble, I'm certain we will be able to assist you. I personally would recommend NOT using a "Centered" image, but instead setting your Picture to "Top Left".

All Grids start at (0,0), and it's much easier to move an image by X or Y from (0,0) since the Window size never changes. But when you Center an image, the starting coordinates will always be different based on the size (in pixels) of the image.

Share this comment


Link to comment

This is an interesting tutorial! I've always been wanting to do something similar to this, but didn't have the slightest clue how the scripting would look. Till now anyway.

 

I do have one question though. Is it possible to event this for multiple party members? If I'm reading it right, it looks like this only references a single character. Say there's a party of three, I'd want to display their values on screen like so: http://puu.sh/eM4dT/b45a365b90.jpg

 

I'm no coder, but I have evented in 2k3 a ton. If I were to do it, then I would have a variable for each party slot(three in this case), and then have HP/MP/TP display in each slot depending on the number of the slot variable. 

 

So if 'Slot 1 Variable' was 2, then character 2 in the database would have their information referenced and displayed in Slot 1 coordinates. But what I want to know is; is there a way to check which party members are in which party position without using a manual variable reference system? I know it's possible to reference whether they are in the party via conditional branch, but not which specific slot.

 

I know this might be quite a bit beyond the simplicity of this tutorial, but I was curious!

Share this comment


Link to comment

I do have one question though. Is it possible to event this for multiple party members? If I'm reading it right, it looks like this only references a single character. Say there's a party of three, I'd want to display their values on screen like so: http://puu.sh/eM4dT/b45a365b90.jpg

sorry it took me a minute to reply back, I've been a bit busy in RL as of late

 

Anything is possible really, but if you're going to use this method for multiple party members, it will just require a little more planning.

 

Take a look at the Script in the [HUD] Common Event: (specifically the numbers in red)

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)


$game_party.members[0] - Refers to Party Member Number 1

screen.pictures[99] - Refers to the HP Slider with the ID number 99

move(0, 10, 10, calculate, 100, 255, 0, 60) - The blue numbers set this image at (10,10)

 

All you really need to do is calculate where you want each image to be in relation to the screen.

If you have Photoshop (or even MS Paint, you can use anything) create a mock up of what you want your HUD to look like and where you want it to appear. The default screen size for the game is 544x416 pixels. This will help you determine where each (x,y) coordinate should be for each image.

 

It would be easier for you to script a loop for each party member, but since you said you're not a coder (which is totally fine) you could simply copy and paste each section and change the IDs.

 

So this section: Refers ONLY to Party Member Number 1's HP

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)

 

and this Section: Refers ONLY to Party Member Number 2's HP

mhp = $game_party.members[1].mhp

hp = $game_party.members[1].hp

calculate = (hp * 100) / mhp

screen.pictures[98].move(0, 10, 20, calculate, 100, 255, 0, 60)

 

Obviously, 98 and 99 can be anything. You'll just use whatever numbers you assign to these images.

The same would be said for coordinates (10,10) and (10,20). These coordinates would be in relation to wherever you place your images.

 

Hope that helps. If you need anymore help, you could take a screenshot of your mock up, and I could break it down for you even further ^^

 

 

So if 'Slot 1 Variable' was 2, then character 2 in the database would have their information referenced and displayed in Slot 1 coordinates. But what I want to know is; is there a way to check which party members are in which party position without using a manual variable reference system? I know it's possible to reference whether they are in the party via conditional branch, but not which specific slot.

I'm not quite sure I understand the question, it could just be because I'm running on like 4 hours of sleep lol

 

Essentially, the way I handle party members is just to reference them by

$game_party.members[x] - Where x is their position in the party

when x = 0, that is Party Member #1. (In programming, elements typically start at 0)

 

So say your Party is set up as so, and you want to display all 4 Main Party Members in your HUD

0 - Hercules

1 - Xena

2 - Zeus

3 - Hades

 

And you decide to change the Formation of the Group, so (1) Xena and (3) Hades switch places.

You won't need to make any script/event configuration or changes. The set up will then be:

0 - Hercules

1 - Hades

2 - Zeus

3 - Xena

 

You're basically telling the program,

"I don't care WHO is in this POSITION in the Party, just show me their HP/MP/EXP/Face"

 

By using $game_party.members[x], you can then gather any information that you need on that Party Member without using a variable.

 

So, $game_party.members[2].hp says to the program:

"Show me the Current HP for Party Member Number 3"

 

Hope that answers that question, if not I apologize, I must be reading it wrong :unsure:

 

Share this comment


Link to comment

You actually answered my question perfectly! Let me reiterate to see if I understand.

 

So by inputting a number into game_party.members, the system will grab the data of whoever is occupying that slot?

 

So $game_party.members[2].hp will grab the HP of the second party member, regardless of whether it is Hercules, Hades, Zeus, or Xena? So there is no need to actually track the changing of the party formation. Just grab the data from the party slots themselves?

 

If I got that right, then it sounds pretty handy!

Share this comment


Link to comment

You actually answered my question perfectly! Let me reiterate to see if I understand.

 

So by inputting a number into game_party.members, the system will grab the data of whoever is occupying that slot?

 

So $game_party.members[2].hp will grab the HP of the second party member, regardless of whether it is Hercules, Hades, Zeus, or Xena? So there is no need to actually track the changing of the party formation. Just grab the data from the party slots themselves?

 

If I got that right, then it sounds pretty handy!

Yes you got that right! Just remember that the number in red is -1, since the element numbers start at 0.

 

So members[0] = Party Member #1

and members[2] = Party Member #3

 

 

Share this comment


Link to comment

 

I do have one question though. Is it possible to event this for multiple party members? If I'm reading it right, it looks like this only references a single character. Say there's a party of three, I'd want to display their values on screen like so: http://puu.sh/eM4dT/b45a365b90.jpg

sorry it took me a minute to reply back, I've been a bit busy in RL as of late

 

Anything is possible really, but if you're going to use this method for multiple party members, it will just require a little more planning.

 

Take a look at the Script in the [HUD] Common Event: (specifically the numbers in red)

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)

 

$game_party.members[0] - Refers to Party Member Number 1

screen.pictures[99] - Refers to the HP Slider with the ID number 99

move(0, 10, 10, calculate, 100, 255, 0, 60) - The blue numbers set this image at (10,10)

 

All you really need to do is calculate where you want each image to be in relation to the screen.

If you have Photoshop (or even MS Paint, you can use anything) create a mock up of what you want your HUD to look like and where you want it to appear. The default screen size for the game is 544x416 pixels. This will help you determine where each (x,y) coordinate should be for each image.

 

It would be easier for you to script a loop for each party member, but since you said you're not a coder (which is totally fine) you could simply copy and paste each section and change the IDs.

 

So this section: Refers ONLY to Party Member Number 1's HP

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)

 

and this Section: Refers ONLY to Party Member Number 2's HP

mhp = $game_party.members[1].mhp

hp = $game_party.members[1].hp

calculate = (hp * 100) / mhp

screen.pictures[98].move(0, 10, 20, calculate, 100, 255, 0, 60)

 

Obviously, 98 and 99 can be anything. You'll just use whatever numbers you assign to these images.

The same would be said for coordinates (10,10) and (10,20). These coordinates would be in relation to wherever you place your images.

 

Hope that helps. If you need anymore help, you could take a screenshot of your mock up, and I could break it down for you even further ^^

 

 

So if 'Slot 1 Variable' was 2, then character 2 in the database would have their information referenced and displayed in Slot 1 coordinates. But what I want to know is; is there a way to check which party members are in which party position without using a manual variable reference system? I know it's possible to reference whether they are in the party via conditional branch, but not which specific slot.

I'm not quite sure I understand the question, it could just be because I'm running on like 4 hours of sleep lol

 

Essentially, the way I handle party members is just to reference them by

$game_party.members[x] - Where x is their position in the party

when x = 0, that is Party Member #1. (In programming, elements typically start at 0)

 

So say your Party is set up as so, and you want to display all 4 Main Party Members in your HUD

0 - Hercules

1 - Xena

2 - Zeus

3 - Hades

 

And you decide to change the Formation of the Group, so (1) Xena and (3) Hades switch places.

You won't need to make any script/event configuration or changes. The set up will then be:

0 - Hercules

1 - Hades

2 - Zeus

3 - Xena

 

You're basically telling the program,

"I don't care WHO is in this POSITION in the Party, just show me their HP/MP/EXP/Face"

 

By using $game_party.members[x], you can then gather any information that you need on that Party Member without using a variable.

 

So, $game_party.members[2].hp says to the program:

"Show me the Current HP for Party Member Number 3"

 

Hope that answers that question, if not I apologize, I must be reading it wrong :unsure:

 

 

 
I do have a question though.  Say I wanted to add a fancy frame to the sliders with a picture of the character's face.  How would I add that in and would it change locations as easily as mentioned previously?  Would it be possible to make it look like the 'sliders' in Baldur's Gate, Icewind Dale, Arcanum, etc, or something similar and/or fancier?
 
After rereading this, I believe what I'm trying to ask is how to do a foreground image?  Also, if I had the character's face displayed next to the HUD, how would I make it change when they were 'hit' or low on health?  Would it simply be changing the foreground layer when a 'hit' is detected or they hit a certain low health?  How would I set that up?

Share this comment


Link to comment
×