Guide

How to make a health bar

A number on the screen tells a player they have 60 health. A bar tells them they are in trouble. In Max2D a health bar is not something you draw and not something you script — it is a component you add to an object, and it draws itself. This guide wires one up, then shows the four looks it can take and when each one is the right choice.

One component, four looks

The Life bar component has a Style setting. The same bar can be a classic filling bar, a segmented meter split into notches, a row of hearts that empty one by one, or a radial ring that drains around a circle. Everything else — the variable it reads, the colours, the position — works the same whichever you pick.

What a life bar actually is

Three numbers and a look:

SettingWhat it means
Max ValueFull. A bar at Max Value is completely filled.
Current ValueWhere it is right now. This is the one your game changes.
StyleHow it is drawn — Bar, Segmented, Hearts / Icons or Radial.

The bar fills to Current Value ÷ Max Value. That is the whole rule. 30 out of 60 is half full whether the style is a bar, four hearts or a ring.

Step 1: a variable to track

The bar shows a number, so first there has to be a number.

  1. Open the variables panel and add a number variable named hp.
  2. Give it a starting value of 100.

Make the variable before you build any block that uses it. A block pointed at a variable that does not exist yet fails silently — nothing happens and no error appears.

Step 2: add the Life bar component

  1. Select the object that should carry the bar. For a player HUD, add an Empty object and name it barHealth.
  2. Tap Add Component and choose Life bar.
  3. Set Max Value to 100 so it matches your variable.
  4. Set width and height200 by 16 is a good HUD bar.
  5. Use pos x and pos y to nudge the bar around its object. Half the width as a negative pos x centres it.

Press Play. The bar is already on screen — it just never moves yet.

Step 3: the one rule that catches everybody

Set life bar acts on the object it is on

Just like Move (Velocity) moves the object whose script it lives on, Set life bar changes the bar on that same object. A Set life bar block sitting on your player cannot touch a bar that lives on a HUD object. Nothing happens, and nothing tells you why.

So the pattern is always the same: the player writes the variable, and the bar object reads it.

On barHealth — the object with the component — build two blocks:

  1. Add On Play. It runs every frame, so the bar is re-read constantly.
  2. Add Set life bar and connect On Play to it.
  3. Next to current value, tap the small arrow and choose Expression solver.
  4. Pick hp from the variables list. The field now reads {expression}.
  5. Leave max value empty.
Leave max value empty on purpose

Set life bar writes every field you fill in, every time it runs. Type 100 into max value and it will stamp 100 over the component's own Max Value on the very first frame — which quietly ruins a hearts bar whose max is 5. Fill in only what you actually want to change, which is nearly always just current value.

Now anything that changes hp moves the bar. Add a Set variable block somewhere that does hp = hp - 10 and watch it drop.

Step 4: pick the style

Open Style at the top of the Life Bar inspector. The fields underneath change to match your choice.

StyleBest forIts own settings
BarHealth, boss health, loading, anything continuousCorner Radius for rounded ends
SegmentedAmmo, energy, gun heat, stamina — anything counted in chunksCount and Gap
Hearts / IconsLives, where each hit is a whole unitCount, Gap, and the shape: heart, star, circle or square
RadialShields, cooldowns, timers, boss metersRing Thickness

Three settings work on every style: Border (a toggle, then a colour and a width), Direction — left or right, which end the bar drains towards — and Vertical, which turns a bar or a segmented meter on its side so it fills upwards.

Width and height mean different things per style

For Bar and Segmented they are the whole bar. For Hearts / Icons they are the size of one icon — five hearts at 24×24 with a gap of 5 makes a row about 130 wide. For Radial, width is the diameter and height is ignored. Max2D resets these to sensible numbers when you switch between those groups, so a 200×16 bar does not become five smeared hearts.

Step 5: hearts, done properly

The trick with hearts is to make one heart mean one hit.

  1. Set Style to Hearts / Icons.
  2. Set Count to 5.
  3. Set the component's Max Value to 5 as well.
  4. Change your variable to match: hp starts at 5, and damage does hp = hp - 1.

Now each hit removes exactly one heart. If Max Value and Count disagree — say max 100 with 5 hearts — you get half-filled hearts as the health drops, which looks fine for a Zelda-style half-heart but is confusing if you meant one heart per hit.

Step 6: a health bar that follows an enemy

A bar floating above a boss is the same component, put somewhere else:

  1. Select the enemy object itself.
  2. Tap Add Component and choose Life bar.
  3. Set width 130, height 13, and Corner Radius 6.
  4. Set pos x to -65 and pos y to -76 — half the width to the left, and up above the sprite.
  5. On that same enemy, add On PlaySet life bar with boss_hp in current value.

Because the bar is part of the enemy, it follows the enemy everywhere — walking, flying, being pushed around by physics — with no position script at all. That is the real reason to attach a bar to an object rather than build a HUD for it.

Step 7: HUD or world?

One setting decides whether a bar sticks to the screen or sits in the world, and it is not on the Life Bar at all:

The object carrying the barWhere the bar lives
Has a Rigid BodyIn the world. The camera moves past it — right for an enemy's bar.
No Rigid BodyOn the screen. It ignores the camera — right for a HUD.

So a player's HUD bar goes on an object with no body, and a boss bar goes on the boss, which has one.

Beyond health

A life bar is not really a health bar. It is a picture of any number with a floor and a ceiling, and that covers most of what a game needs to show:

MeterStyle that suits itHow it moves
LivesHeartshp - 1 on a hit
ShieldRadialDrains on a hit, and shield + 0.12 every frame to regenerate
Gun heatSegmentedheat + 25 per shot, heat - 0.55 every frame to cool
Boss healthBar, on the bossboss_hp - 10 per bullet
Fuel or staminaVertical barDown while sprinting, up while resting
Balance the two together, or one of them stops mattering

A regenerating shield in front of a health bar is really one economy, and it is easy to get wrong in the player's favour. If the shield refills as fast as it is drained, it absorbs every hit for ever and the health behind it never moves — the bar is still working, it simply never gets asked. Check the arithmetic: refill per second times the gap between hits, against the cost of one hit. In the example project the shield covers two hits and refills about 8 per hit, so the hearts start dropping on the third.

A meter that only ever goes down teaches half the idea. The two most satisfying bars in any game are the ones that come back — a shield refilling while you dodge, a gun cooling while you wait. Both are one Set variable block on an On Play.

Make the meter mean something

A heat bar that only decorates the screen is wasted. Put an If (True/False) in front of your shot that checks heat <= 75, and suddenly the bar is the rule — players learn to read it because it stops them.

The blocks you used

BlockJob
On PlayRuns every frame, so the bar is always in step with the variable
Set life barCopies the variable into the bar on its own object
Set variableDoes the damage, the healing and the regeneration
If (True/False)Blocks the shot when the heat meter is full
Is Colliding WithNotices the hit that costs health

When it doesn't behave

What you seeWhat's wrong
Bar never movesSet life bar is on a different object from the Life Bar component. It only ever changes the bar on its own object.
Bar is stuck at one valueA plain number in current value instead of an expression. Check the field reads {expression}.
Hearts never emptymax value was filled in on the Set life bar block, stamping 100 over the component's Max Value of 5. Clear it.
Bar is always full or always emptyMax Value does not match the variable's real range — 100 on the component with an hp that only ever reaches 5.
Bar jumps to the wrong placepos x and pos y are measured from the object, not from the screen. A bar 200 wide needs pos x around -100 to look centred.
Hearts look smeared or stretchedWidth and height are still the size of a whole bar. In the Hearts style they are the size of one icon — try 24 by 24.
Bar scrolls off screenIts object has a Rigid Body, so it lives in the world. Remove the body for a HUD.
Enemy bar lags behind the enemyThe bar is on a separate object being moved by a script. Put the component on the enemy itself instead.
Health drops all at once on one hitA collision lasts several frames. Set an invuln variable to 1 when you take a hit and back to 0 after a short Wait, and only take damage while it is 0.
Bar goes past full or below emptyClamp it: math_min( hp + 10 , 100 ) when healing, math_max( hp - 10 , 0 ) when hurt.

Try it: Health Bars

The example project is a one-screen shooter with all four styles on at once, each doing a real job:

  • Hearts for your five lives.
  • A radial shield that regenerates and soaks a hit before the hearts do.
  • A segmented gun-heat meter — fire too fast and the gun refuses.
  • A bar on the boss, attached to the boss so it moves with it.

Open barLives, barShield or barHeat to see the two-block script that keeps each one in step, and open boss to see the version that rides on the object. Every script has a note beside it explaining what it does.

Things worth changing: swap the hearts for stars, turn the heat meter vertical, change Count from 8 to 20 notches, or set the boss bar's Direction to right so it drains the other way.

Get the example project

Download HealthBars.zip (42 KB)

In Max2D: ProjectsImport Project → pick the zip. Play it in landscape.

Frequently asked questions

How do I add a health bar in Max2D?

Select the object that should carry the bar, tap Add Component and choose Life bar. It draws straight away. To make it move, add On PlaySet life bar on that same object and put your health variable into current value with the Expression solver. No drawing code, no second object to keep in position.

Why doesn't my health bar move?

Nearly always because Set life bar is on a different object from the component. The block acts on the object whose script it lives on — exactly like Move (Velocity) — so one sitting on your player cannot touch a bar on a HUD object. Put it on the same object as the bar. The other cause is a plain number in current value: a number never changes, so the bar freezes.

How do I make a hearts health bar instead of a bar?

Set Style to Hearts / Icons, set Count to how many hearts you want, and set the component's Max Value to that same number so each heart is worth one hit. Remember that width and height are the size of one heart here, not the whole row. You can swap the heart for a star, a circle or a square.

How do I put a health bar above an enemy?

Add the Life bar component to the enemy itself rather than to a HUD object, and set pos y to a negative number such as -60 to lift it above the sprite. Because the bar is part of the enemy it follows it everywhere with no position script. Its Set life bar block goes on that same enemy.

Can I use a life bar for something other than health?

Yes, and you should. Anything with a floor, a ceiling and a current value fits: a regenerating shield, weapon heat, a boss timer, fuel, a level-up meter, loading progress. Giving each one a different style is how a player tells them apart without reading a single label.

Why does my health bar scroll off the screen?

Its object has a Rigid Body, so it lives in the world and the camera moves past it. An object with no body is drawn onto the screen and stays put. Remove the body from any bar you want pinned as a HUD, and keep it on bars that belong to something in the world.

Can one object have more than one life bar?

Give each meter its own object. It keeps each Set life bar block pointed at exactly one bar, which is what makes them easy to reason about — and HUD objects are free, since they need no Rigid Body and no collider.

Hearts, rings or a plain bar — same component.

Build it tonight on your phone. Max2D is free on Google Play.

Free onGoogle Play