Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Basic HUD Tutorial

Status
Not open for further replies.
Yeyinde's Basic HUD Tutorial


Introduction

This is a tutorial to help people learn how to script a basic HUD.

Getting Started

If you want to make a good HUD, you are going to need some basic knowledge of RGSS, but not much.
There are two parts to this tutorial: The Window, and the Scene. Absolutly no screenshots will be taken; I trust you to know if it looks right, or not.
First of all, Hit F11 on your keyboard. Scroll down and highlight Main, then press Insert. This creates a new script holder for us to use.

The Window

In order to have a HUD, you will need a Bitmap, which is in a Window, or a Sprite. I think people find Windows easier, so that's what we will use.

To create a window, we type in two lines:
Code:
class Window_YourHUD < Window_Base
end
That creates the holder for the window(Window_Base)
Currently, our window isn't quite a window. To fix this, will will make the initialize method.
Code:
class Window_YourHUD < Window_Base
  def initialize
  end
end
This alone won't do anything, so we will call Window_Base's initialize method with super, followed by a bitmap creation. While we are there, let's call the refresh method
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
end
Of course, the x, y, width, and height values are set by you. REMEMBER! width and height must be larger than 32, or you will get an error.
Now, we will create the refresh method. This is the method that draws all the text, and junk.
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  def refresh
    self.contents.clear
  end
end
As you can see, I threw in the line 'self.contents.clear'. This readies the bitmap for us to draw on.
Next, we will add a method I like to do to keep it all organized, the reset_variables method.
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  def refresh
    self.contents.clear
    reset_variables
  end
  def reset_variables
  end
end
In the reset_variables method, we will set four variables: HP, MAXHP, SP, asn MAXSP of the first character.
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  def refresh
    self.contents.clear
    reset_variables
  end
  def reset_variables
    @actor = $game_party.actors[0]
    @old_hp = @actor ? @actor.hp : 0
    @old_maxhp = @actor ? @actor.maxhp : 0
    @old_sp = @actor ? @actor.sp : 0
    @old_maxsp = @actor ? @actor.maxsp : 0
  end
end
Now, I bet you're asking "What is up with the @actor ? @actor.value : 0?" I do this as a safety precaution. If you try and call the hp method of a party member who is not there, an error will occur. Errors are bad.
Now that that's settled, we will finish the refresh method.
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  def refresh
    self.contents.clear
    reset_variables
    return if !@actor
    draw_actor_hp(actor, x, y)
    draw_actor_sp(actor, x, y)
  end
  def reset_variables
   @actor = $game_party.actors[0]
   @old_hp = @actor ? @actor.hp : 0
   @old_maxhp = @actor ? @actor.maxhp : 0
   @old_sp = @actor ? @actor.sp : 0
   @old_maxsp = @actor ? @actor.maxsp : 0
  end
end
It wasn't much. Just a return if the @actor was nothing(!), and draw hp and sp at coordinates that you decide.
Finally, we will make the window refresh if necessary. We will do this in the update method.
Code:
class Window_YourHUD < Window_Base
  def initialize
    super(x, y, width, height)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh
  end
  def refresh
    self.contents.clear
    reset_variables
    return if !@actor
    draw_actor_hp(actor, x, y)
    draw_actor_sp(actor, x, y)
  end
  def reset_variables
   @actor = $game_party.actors[0]
   @old_hp = @actor ? @actor.hp : 0
   @old_maxhp = @actor ? @actor.maxhp : 0
   @old_sp = @actor ? @actor.sp : 0
   @old_maxsp = @actor ? @actor.maxsp : 0
  end
  def update
    super
    refresh if (@actor = $game_party.actors[0] or
                @old_hp = @actor ? @actor.hp : 0 or
                @old_maxhp = @actor ? @actor.maxhp : 0 or
                @old_sp = @actor ? @actor.sp : 0 or
                @old_maxsp = @actor ? @actor.maxsp : 0)
  end
end
That's our window! Next comes the edit of Scene_Map. For this, we will be using the very useful alias command.
Code:
class Scene_Map
  alias yourhud_main main
  alias yourhud_update update
end
We just set up the aliases. Now you will see why aliases are very useful.
Code:
class Scene_Map
  alias yourhud_main main
  alias yourhud_update update
  def main
    @yourhud = Window_YourHUD.new
    yourhud_main
    @yourhud.dispose
  end
  def update
    @yourhud.update
    yourhud_update
  end
end
Wow! You just shortened up a huge amount of code into a mere 11 lines! Aliases allow one to insert, and do things to a variable while keeping compatibility to a maximum.

End Product
That's the end of my tutorial, so save and test play your window. If you got an error, go back and try this tutorial again. I don't know why you would get an error; it's so easy to make HUDs.

Later, until next time. Yeyinde, the Local Yautja
 
I'm really interested in making a simple HUD for my game but I don't seem to get one from following your tutorial.

Could you break it down to exactly which bits of your code go where?
I've got the creation of a new script and typed up the window creation, but I dont know where the aliases and such go :/
 
I'm getting an error:
ArgumentError

wrong number for arguments (0 for 4)

on line 34

which is: @yourhud = Window_YourHUD.new
 
If you're using the SDK in the part of the script:
Code:
class Scene_Map
  alias yourhud_main main
  alias yourhud_update update
  def main
    @yourhud = Window_YourHUD.new
    yourhud_main
    @yourhud.dispose
  end
  def update
    @yourhud.update
    yourhud_update
  end
end

delete @yourhud.dispose as the windows on Scene_Map are automatically disposed if you use the SDK.
 
thanks man =]

looks great.

I'm gunna try and work around RGSS, my freind does it for me but I guess learning it myself will make life easier lol.
 
one of the tutorials i was really able to follow!

Code:
class Window_YourHUD < Window_Base
  def initialize
    super(0, 416, 640, 64)
    self.contents = Bitmap.new(640 - 32, 64 - 32)
    refresh
  end
  def refresh
    self.contents.clear
    reset_variables
    return if !@actor
    draw_actor_hp(@actor, 0, 0)
    draw_actor_sp(@actor, 320, 0)
  end
  def reset_variables
    @actor = $game_party.actors[0]
    @old_hp = @actor ? @actor.hp : 0
    @old_maxhp = @actor ? @actor.maxhp : 0
    @old_sp = @actor ? @actor.sp : 0
    @old_maxsp = @actor ? @actor.maxsp : 0
  end
  def update
    super
    refresh if (@actor = $game_party.actors[0] or
                @old_hp = @actor ? @actor.hp : 0 or
                @old_maxhp = @actor ? @actor.maxhp : 0 or
                @old_sp = @actor ? @actor.sp : 0 or
                @old_maxsp = @actor ? @actor.maxsp : 0)
  end
end
class Scene_Map
  alias yourhud_main main
  alias yourhud_update update
  def main
    @yourhud = Window_YourHUD.new
    yourhud_main
    @yourhud.dispose
  end
  def update
    @yourhud.update
    yourhud_update
  end
end
 

wlzza

Sponsor

This tutorial is great! However, this may sound like a noob question but how do you make it so that it shows a number which is stored in a variable? And how to make the HUD show when a switch is on and disappear once it's off?

Thanks
 
You can show it with the draw_text method. Juat use after self.contents.clear:
Code:
self.contents.draw_text(x, y, width, height, text[, align])
Just use the variable you want in the "text" field. To make your HUD visible depending on a switch, just add below @yourhud.update
Code:
@yourhud.visible = $game_switches[[i]id[/i]]

Where id is the id of the switch you want to use.
 

wlzza

Sponsor

Ok.. I've managed to get the switch part working... But, I'm still having troubles with displaying the variables on screen.

This is what I did just after self.contents.clear:

self.contents.draw_text(20, 20, 200, 200, $game_variables[1])

However, in game, I get this msg "cannot covert Fixnum into String"

Thanks
 
I'm wandering what is the x y positions?
I have my hud to appear in the upper right corner.
and I also have the window (480, 0, 160, 64)
and want the HP and SP to be something like this
Hp ????/????==
==SP ????/????

-=NOTE=-
the == are spaces
 
Status
Not open for further replies.

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top