Quest Pals Tutorial 3 : Health Set-Up and Drawing

A wild sledge hammer bearing mech approaches your quest pal and BAM! Oh no… time to start the level over again. Your health is gone, isn’t it?

Let’s add some health to our game. After all, an invincible character is a little unfair. Maybe amusing at first, but not really that entertaining in the long run. In this tutorial, we’ll learn some basic set-up and how you can draw a health bar to the screen using Stencyl’s draw events.

Behavior Set-Up

Make an actor behavior to host your health logic. We may want to attach this to other actors later; for instance, maybe our future sledge hammer bearing mech could benefit from using this behavior as well.

Now, our most basic info is very simple. First, we will want an attribute to indicate the maximum amount of health our character can have. In this tutorial, my attribute will be named Max Health. Second, we will want a hidden attribute that keeps track of where our character’s health is at in-game. This will be the attribute that will increase or decrease based on damage or recovery. In this tutorial, I will call it Current Health.

Guess what? That’s about all we need in terms of attributes for a bare bones health behavior. No need to make it any more complicated than it need be. Once we start adding the bells and whistles like drawing a health bar is when we will add some more. So for now we only have two number attributes:

• Max Health
• Current Health

Why A Drawing Event?

Draw events may sound a little complicated and scary… kind of like lists, but just like lists, they just involve knowing a few pointers to get you through it.

Now maybe you’re thinking “Why not use an actor/set of actors to represent health?” Personally, I think this is slightly inefficient at times. Your actor’s sprite sheet can quickly grow to a pretty big size if you are doing this all through a single actor. That scenario, though, I don’t think is nearly as painful as the next one I will mentions. What if you represent each health bar as its own actor? It’s possible: what if you want your character to be able to get more bars to their health? But as your max health climbs, so does your actor count on screen.

Ultimately, it may be more preference than for efficiency’s sake, but I like doing it this way. So let’s get into it.

Drawing Our Health Bar

Since its a lot of repetition (select color, draw/fill rect, select color, draw/fill rect, etc.), I decided to just put the picture of the final drawing code near the bottom of the code instead of using multiple pictures. Also, I put a picture near the bottom that shows the progression of our drawn health bar as we add each rect, so as you add code you can see if it looks similar.

Let’s make four new attributes:

• Bar X: X position where we will draw our bar
• Bar Y: Y positon where we will draw our bar
• Bad Width: Width of our bar
• Bar Height: Height of our bar

First, in the same behavior we started above, make a drawing event and set it up. You will notice in my behavior that I want this bar to draw to a static place on the screen, not relative to the actor. As such, I have “switched to screen space”. Where you decide to draw the bar, relative to the screen or actor, is up to your preference.

Now, I want my health bar to look nice, so I’m going to draw a roughly-shaded border first that will enclose my health bar. My colors for this will be white and black. In order:

1. Set the stroke thickness (here I have set it to 1)! Otherwise, the “draw rect” events will not show anything, because stroke thickness is at 0 by default.
2. Draw the white rectangle for the top-left corner. Don’t forget to set stroke color! This one is simple: use Bar X and Bar Y for the position and Bar Width and Bar Height for the dimensions.
3. Draw the black rectangle which will make up the darker bottom-right corner, giving that soft shading effect we want. Again, set your stroke color! Now this one is a bit different; we want it to cover up the bottom-right corner of our white rectangle. We will draw it similar to our white rectangle then, but move it over slightly as to NOT cover up the top left of the white rectangle. In the example, I added 1 (our stroke thickness) to both the Bar X and Bar Y to move it over slightly, and then adjusted its width and height to 1 less than Bar Width and Bar Height to keep it inside of what we want our boundaries to be yet at the same time cover up the bottom right corner of our white rectangle.

So we have our basic outline of the health bar. If you draw it as is, that black rectangle may look a little weird sitting inside of the white rectangle, but do not fear. Just like we did before, we will use the actual health bar part to cover up the top left of the black rectangle that we don’t want to see.

Health Bar Math

NOTE: You may want to set your Current Health attribute to something other than zero in When Created to test your bar drawing. Otherwise, you will have a completely “empty” health bar.

Before we continue, make two new attributes:

• Bar Color: a color attribute for storing our main health color (you may so choose to make the other colors attributes too, but here I decided only to make this one an attribute so that different potential characters can have different colored health if they want.)
• Current Width: a number attribute that indicates how long in pixels the “filled” part of our health gauge is.

So how do we calculate how much to “fill” our bar based on current health versus maximum health? We use a fraction. Simply put, divide current health by max health. This will produce a percentage of sorts that will allow us to draw our health in relation to how much is left. As an example, if you have a max of 100 and current health is at 50, you get 50/100 or 1/2… 50%. Once you have your fraction, multiply it by your actual bar width (here subtracted by 1 so it will fit in our previously drawn border). Using our prior example, we now know to fill our health bar up half way (50%). Also, take the ceiling of this amount (found under Numbers & Text >> Math) so that you have a clean whole number to work with. After all, if you take 50% of 15, a computer can’t make your filled area 7.5 pixels long. Taking the ceiling will round it up to 8 and, though not exact, is close enough.

NOTE: I chose ceiling because this means so long as your health is not at zero or below, the health bar will always round up to a number equal to one or larger. This indicates graphically there is health left even if health is only at one.

Now, after setting your color (not stroke color) to Bar Color, we will use “fill” instead of “draw” to fill in our health gauge:

• Again add 1 (our stroke thickness) to Bar X and Bar Y and use these for our top left coordinates. This is the same as our black rectangle, and will help to cover up the black rectangle’s top left corner just like we wanted to.
• The width of this rectangle will be the calculated Current Width.
• Subtract your bar height by 1 (again, our stroke thickness) to account for the border.

Great! Now, we’re going to fill in the rest of the bar with another color that represents the missing or empty part of our health bar. Here, I select a gray that would meshes well in between the white and black. So:

• Bar Y stays the same, but this time add Current Width to your [Bar X + 1] to move it over beyond our filled-in part of the bar.
• Now, we want to make our width the rest of the way across the bar. Simply take [Bar Width – 1] (“- 1” again accounts for our border) and subtract Current Width from it.
• Our height is the same as last time (Bar Height – 1).

And there you have it. Hope you were able to follow all of that!

A Text Display

Want to give the player a little more by showing their exact health? Trust me, that’s much easier than what I just did above. Designate some coordinates of your choice (I chose below the health bar in my game), and simply use “text + text” blocks (found under Numbers & Text >> Text), and add in order:

• The attribute Current Health
• Something like a “/” character, or whatever you like best
• The attribute Max Health

A sample progression of our drawing code. May vary depending on what current health is equal to.

My final draw code, based on my selected parameters.

In Conclusion

Really, if you understand the math behind the drawing and avoid a few quirky errors (like the default stroke at zero thing), then drawing is a little less intimidating. Hopefully you feel at least a little more comfortable with drawing now that the tutorial is said and done. We still need to add some features to manipulate our health data, but for now we have a nice looking health bar. Stay tuned for more on health!

Advertisement