Health Bar Design | Pixel Art Tutorial

[@toochmcgooch4678]

Fantastic! I'd love to see this become a mini series where you fill in the rest of the elements to make a full scene to go with your health/magic bar!

[@BJGpixel]

Thanks! That's a great idea; would allow for covering each component in great detail. I kinda loved just focussing on one specific thing for this ☺️

[@wrenmacneil7703]

I second this! Loving the concept of it

[@CushionSapp]

I third this

[@SeymourDisapproves]

That's such a cool idea!

[@james5mith]

Oooo, I would also be very interested in this becoming a playlist or mini series. :D

[@ARDIZsq]

Man, I was JUST trying to design a health bar last night, so this is a super convenient time to have this video release. One of the most unique health bars in gaming, not in terms of design, but rather, functionality, is in the MOTHER series, most recognizably Earthbound. The rolling HP system is just so unique in how it plays, and the numbers even kind of look like those you'd see on an old style slot machine, which is really fitting. (Also a nice touch because originally the HP system would have behaved similarly to Pachinko)

[@griffinissupercool]

I've always loved the look of the Terraria health and mana bars, especially the new ones really fit the feel of the game imo

[@ShinoSarna]

11:03 I would animate the heart so the heart itself works as a vertical bar - so the less health you have, the more the heart fills with black from the top. Kinda like health/mana orbs in Diablo.

[@codelyo_ko9123]

or like in hollow knight?

[@ShinoSarna]

@@codelyo_ko9123 Yeah, exactly!

[@elfstar7514]

@@ShinoSarna magical knight moment

[@brendenchee16]

I have always loved your pixel art! and you inspired me to make my profile pic!

[@baileyneville8067]

Very cool 👍

[@loopit_3]

I see, very cool shop :)

[@BJGpixel]

Ooh nice! Thanks for your support and best of luck with your pixel art! :D

[@Lirrez]

I still find it really fun seeing you make game mockups and it's something I enjoy doing myself. You should definitely do more of those. Great video!

[@dansanga]

Finding a new video here is always a treat. This channel has been instrumental in me finding and leaning into my own pixel art style, which also got me to stop comparing my work against what other people do and getting disappointed because it's not "as good". I'd stopped pixelling for several years because I felt I wasn't progressing but these videos inspired me to get back into it. I'm always looking out for new stuff from you and re-watching your old stuff for inspiration.

[@iamsushi1056]

One of my favorites isn’t quite a health bar, but in vs battle games there’s sort of a progress bar that starts in the middle, with one player in a color on the left and another on the right. In some cases it can also act as a true health bar by shrinking inwards as well as progressing side to side to show progress. Super cool design.

[@iamsushi1056]

Another that’s less of a health bar and more of a variable HUD is the bottom of the screen in Dome Keeper, a relatively new game. It keeps to the theme of the game delightfully, and manages to balance looks and the ability to convey information. It would be interesting to see a pixel artist’s perspective on that game as a whole because the alpha and beta releases went through many many graphic redesigns.

[@angrypotato_fz]

Very cool niche topic to investigate :) I liked how the purple gemstone turned out! There's another (maybe not-optimal) way of health representation - a character portrait or silhoutte that either changes color (for example - every limb is healthpoint, they turn from green to red, possibly through yellow) or just gets visually 'beaten up'. An easy example would be hero's portrait in Return to Castle Wolfenstein, but I'm sure I've seen something similar in other games. Being not really clear, these would be usually acompanied by a number or other indicator. Aladdin's sidescroller also has interesting features. In some versions health is represented as smoke from the lamp - it's really to tell how many more hits you can take :D And in some versions time remaining for the level is represented by an hourglass and Genie's portrait, who get increasingly worried the less time remains.

[@lou5y]

You did skip a type that's an old favourite of mine: the health portrait. Sometimes it's shown with a complementary healt bar or number like in Doom, but some versions will function more like a regular health bar, gradually revealing a picture under the player's standard portrait as they take damage. The best example I can think of here is Terminator II on the Amiga.

[@BJGpixel]

Haha oh that's right! Would have been nice to include; I'd almost make that an honourary mention in the Themed category. Such a unique presentation

[@CamAlert2]

Another good example is in the first Advance Wars, where the likelihood of your units succeeding or failing is reflected in the COs portraits during battles.

[@1001digital]

Fright Night on the Amiga had something like this, too.

[@michaelmann7816]

The Amiga Batman (I think based on the movie, but there's only so much you can know about the larger world when you're 5 or so...) was a good example too. (Anyone know why it seems like every game that did this was on the Amiga?) As you took damage, the picture of Batman on the status bar would slowly be replaced by the Joker.

[@Vicious-scribbles]

I love the iterations you did and how you explained your thinking for each design change. Really makes me feel better for when I change a small detail in one of my drawings lol.

[@DanteYewToob]

I like to imagine your final design has a heart that starts red, and loses vibrancy and you “die” when it becomes grey and the orb cracks. The little white “feathers” signal your double jumps available, kinda like Celeste and when she double jumps a cute little fairy wing animation appears as little wings that give her a magic boost up or forward. The rainbow would be the best pickup in the game because you can refill anything with them, red=health blue=magic and yellow/gold just gives you a big score boost, and it’s a trade off for high level players… sacrifice a potentially valuable resource for a higher score if you’re confident in your skills. The crystals at the end of the scepter change with the magic you have equipped, and bigger gems are more powerful spells that cost more magic to cast. Lastly the scepter itself changes color/Metal type as you play. It upgrades from a basic wooden staff, to bronze, silver, gold, and eventually a colorful shimmering metallic, and the upgraded scepters have boosts to health, magic… etc. The only changes I would make would be that the scepters change design slightly as they upgrade and have different shaped crystal/bulbs on the end of health. It’s a well designed bit of interface because it inspired me to imagine all of that instantly… I could imagine a cute game similar to Celeste meets Hollow Knight where it’s a platformer action/adventure game with a cult following of extremely high skill level players. A fun game anyone can play with a super high skill ceiling with absurd players who do crazy things! Haha

[@Amburger232]

This is sick. I felt like I've learned so much many techniques I was just unaware of from just watching a few videos, Keep making videos I would to see more of your style!

[@LEROILAPIN]

I love these videos that will break down a small part of retro games. Who doesn’t love a good mock-up?! It’s my go to when I’m too overwhelmed to actually work on my game. I really liked the overworld map you made for like a racing game or something. I’d love to see your take on a game over countdown screen.

[@thatonefella101]

Very thematic and clean design! I love that color pallette and your videos, it's really helpful to me to see why you choose what you do in certain scenarios and then apply that to my drawings! I'm new to pixel art but your work has helped me on my way I and wanted to thank you for that! Keep up the great work!

[@mindelofortes12345]

Since I got my 16x16in Divoom speaker, Its always been extra exciting when I get to learn from videos like this. Thank for the great content always Brandon!

[@ArtistthiccArttwerks]

I love your videos man. I hope that you continue to make more tutorial like these that talks about game design elements in a technical yet digestible format. As an aspiring pixel artist, this has really helped me improved and better understand pixel art and it's process. Looking forward for more tips like these.

[@shiwakao]

oh wow i have no idea how it has taken me this long to discover your channel i love your designs n u have a fantastic grasp of pixel art techniques

[@littleblueriolu9093]

Health bars and game UI have always been my favourite things to draw, nice video!

[@corican]

You make it look so easy. True talent.

[@Retrofire-47]

Keep swinging an axe everyday of your life - pretty soon the axe becomes another appendage. What distinguishes the visionary from the legend is persistence... nothing more.

[@retro3188]

I love designing HUD elements, and one of my main goals is readability. The Resurrect 32 palette looks cool too-might use that sometime. Coming from a long-time fan and subscriber, your health bar looks really impressive.

[@DragmoraProductions]

Exactly what I have searched for when it comes to ui creation. Awesome work

[@CKTDanny]

Awesome coverage on the various meter techniques at the beginning! These retro UI elements are so charming to look at and I think you captured that look very well in yours too! Gotta agree that the 3rd variant looks like it has the most potential and is more interesting. Animating the 💗 through the various levels is a clever and space-efficient way to make room for all the other things! Though, I also really like the way that glowing yellow warmly fills out that meter in the first variant too 😌

[@BJGpixel]

Thanks dude! Yeah lots to work with here; I think I should explore the animations for these as well - could definitely help realize the potential to play with some of those dynamic effects 😎✨

[@1001digital]

Over 20 years ago I was involved in the making of two Amiga games as a graphics artist (a skin for dynAMIte that was shipped with the game and map gfx for Tales of Tamar). That was a fun experience, I really liked pixeling. I had to grin when you said, you choose your palette. When I did this work I had to stick to the colors that were given by the developers. No choosing there, this is set and you have to see what you can do with it. Some colors even were restricted as they where used e.g. for color cycling. This is a technique that alters the position of colors in the palette in fixed intervals to animate graphics. As you do not swap the whole image for every frame but just the position of the colors in the palette this is very efficient. Tales of Tamar used this a lot to animate the map, it made it look like the wind moves grass and trees.

[@mparis130]

I also love the last one. I'd love to see what kind of magic girl goes with that health bar!

[@Timpers]

Now i wanna see the game haha. DO ITTT

[@martjanamoon1785]

this came together amazingly well! funny enough, i was looking for some inspiration for health bar designs, and my game actually includes carrying a staff and having multiple types of magic to choose from now i just need to be aware not to make my designs look too similar to yours :D but you mentioned so many important aspects of health bars, and you gave me some great ideas, thank you!

[@svenhegenmusic]

Another great video. I love that you do variations. For health bars especially I find that the principle of "form follows function" is most important. the first design mainly consists of decorations. the healthbar itself is really simple compared to the decorations around it. Those take up too much space and therefore grab your attention too strongly. the second design does this way better, by reducing the rainbow to a small diamond. the main focus is on the health and energy bars. those also grab your attention better with the dotted style. But they look kinda sci-fi-ish. So not quite fitting the mood. Still a great design. the third one does the best of both by making the healthbar stand out better with the little lines. also the right end does not stand out that much anymore, which is a plus. I am though not sure if the heart idea really works that well. but maybe that's because we can only see one stage of it at the moment. if the glass shatters and / or the heart grows, that might change completely. In my oppinion the second approach is the best for the proportions, but the third one is the best for the overall design. A mixture of both might be perfect. I do like the different color palette of this version tho. the cyan and yellow / golden really fits and the red looks way cooler than the purple of the other designs.

[@BJGpixel]

Thanks dude! Totally, that's a perfect account of my internal thoughts on each iteration. Yeah I should explore the heart animations; might make for a nice follow up video about health bar animation 🤔

[@zackpi7874]

So cool! I like all the variants but I think the last one is the most creative and I would love to play a game with that style

[@silentkillaa2673]

bro! ..... just in time when I actually looking for this all day. .. Thank you!

[@noahabry619]

I wanted to ask, did you ever think about making art for an actual game? I'm sure you could get in contact with a dev to make some gorgeous pixel art for a working video game. I'd love to see that!

[@jcmacleod]

This is a really incredible video, it got me to think totally differently about pixel UI

[@vinwebytwo]

Giving life to life bars bruh

[@loik1loik1]

keep it up man! Your videos always bring a smile to my face, i'm nos sure if it's because of your drawings, voice or both ❤

[@oddysay]

Epic video my dude Really glad to see you pushing this amazing content to us consistently !! I love megaman legends health bar.

[@james5mith]

Great video! I love the way you share your process and thinking behind the choices you make and how you explore different possibilities. Very inspiring! Also love your artwork too.

[@Skeffles]

Great variations! I really like that first rainbow. This will definitely be on the front of my mind next time I need to make a health bar.

[@The_Timeking]

Very insightful video! It's important to make the most of your limited space, without taking up too much space.

[@BainesMkII]

For actual game design, there are some advantages and disadvantages to the different health representations. Continuous life bars make the most of the given space (outside of using numbers), can be "stacked" to represent much higher health values (like having to deplete a "green" health bar before the underlying "yellow" bar starts depleting), and can be used to subtly "fudge" values to create more dramatic moments (some fighting games increase player defense or otherwise reduce incoming damage as health depletes, meaning your final 20% of health can potentially absorb more actual damage than 20%). Continuous bars can also be good for representing key spots or ranges of health, like warning at 20% life or giving an attack boost when you have 66-100% life). Numbers give the most precision, work well with wildly varying damage amounts, and also can work well with "uncapped" health systems where your max health itself can potentially vary wildly. Tick marks "waste" more screen space as you have to allow for drawing the separators, they tend to not subdivide well, and high health counts can turn them into relatively meaningless blurs that might as well have been a continuous bar. Zelda's heart system is effectively a tick system with more graphics devoted to its delivery and readability. Ticks can also be good for marking key life value points, particularly that final tick before death. They can even work as a more obvious "life fudge", such as a game where any one attack can only bring you to your final tick regardless of the damage it does.

[@SethKotta]

Well, now we're gonna have to see the rest of this game designed. Those health bars are too cool to be left as is.

[@BJGpixel]

Haha yeah bit of tease on this one; gonna have to consider a full mockup! :D

[@txrom]

I think I could watch a 1-hour long video of you working through and talking about different health bar designs

[@ShampooCell]

I just love your art Brandon! Well done!

[@jacksonland2091]

The orb colour and contents should change based on different Magic. An idea for the end of the staff, based on different equitable end pieces, they change your stats slightly, beit range, strength and speed

[@GhostLP799]

Wonderful video! Seeing it layed out like this makes it really simple and approachable; saves head ache on how to design/incorporate these elements :D .

[@cinnamonkittamon]

I really love the ones in metroid games that are a bar, a number, and a set of segments

[@K0BRAKID]

you're an absolute pixel art god bro

[@frg]

i love kerrie lake's 2bit palettes!

[@The-Zer0th-Law]

As a sucker for UI elements, this is like seeing the prep of gourmet food.

[@LuckySketches]

Sly Cooper (except for the first game) uses an arc for its health instead of a bar, which is more space efficient. Plus you get the character's logo in the middle, which changes based on who you're playing as.

[@brotaytohpotato4272]

These would be the perfect health bar for a Magical Girl game!🌈✨ It also kinda looks like it could be Sailor Moon’s staff ~ 🌸

[@kylekyleson3971]

I find it really interesting that you basically ended up with the inverse of Hollow Knight's health and magic UI. That game makes it really important to know exactly how much health you have, but it's okay to only have a rough idea how much magic you have. Maybe the game you're designing this health bar for is the opposite, where you don't take much damage but have to watch your magic really closely.

[@ap0kalyps3]

the healthbar from the Legacy of Kain games is always amazing, either a tall vial of blood that fills and empties or a swirl of soul energy :D

[@cinnamonsugarcourtney6073]

I like the health bar/magic bar in Hollow Knight, I know Hollow Knight isn't pixelart, but the principles are the same. It uses 'masks' as the 'hearts' and it has a globe to the left that shows your 'soul' or magic charge. When the vessel (soul globe) changes and has eyes you know you have enough soul to use some soul as a spell. When you reach zero masks in Hollow Knight if you're playing the normal mode the vessel shatters and can only hold enough soul to power one spell at a time until you retrieve your shade. (Aka go back to where you were killed and get your stuff back from a ghost you) If you're playing Steel Soul mode you just die and it's game over, but the decorations around the ui are different. It's simple but effective.

[@Zilten_]

I think my favourite healthbar (or rather, lack of one) from a game has to be the one from Drawn to Life. Since you draw your hero in that game your hero is your healthbar, and as you get hit parts of you come off. The sequel keeps this, though since theres additional transformations they get a normal healthbar (that you still get to draw, somewhat, anyway.)

[@bolson42]

I wish more games had more tangible health indicators like that. Probably the most famous is just the 2d mario games, none of them have a health bar but it’s so easy to just understand that when you get hit, you get visually weaker, until you’re small, where you know the next hit will be death. Some games also take the approach of Doom 1 and 2, which had visual indicators where as doomguy took more damage his face would look worse. But you didn’t need to use that to measure health, you could just look at the health number and the face was more of a cosmetic addition.

[@bt2984]

Yes, 🙏 Thank You this was exactly what I was look for!! I need to find a video about making health bars!! 🤝 A very helpful video tutorial 😁👍

[@crystanubis]

The "heart status" idea reminds of Ahoy's "chicken-o-meter" video, especially the glass of the scepter cracking.

[@iamsushi1056]

10:27 the segmentation isn’t the problem, but rather that slate grey background color. It feels like the edges of the staff are fantasy with a touch of clockpunk, but the middle is an LCD panel display like you’d see showing departure times at a train station in the 90s. Making that background color either a dark green to mimic dyed leather, or some sort of tan color to blend with the rest of the handle would help, along with some shading at the very edges to represent roundness. One thing that helps break up the digital look is to make the segmenting lines 45° angles for a more “dotted line” vibe. This can also help break up the flat look by providing some roundness or almost “barber pole” like patterning. Although I usually have an eye for design and details and stuff, I haven’t gotten to work much with pixel art, so take everything I’ve said with a grain of salt.

[@iamsushi1056]

Some of my critiques about color and stuff are actually just in the nature of this palette: with a bit of work, it could be a digital retrofuture, or a lightly washed out but bright/cheerful/colorful past like you’d find in a renaissance fair. Major props to the maker of this palette!

[@leogcavalli]

jeez this is GOLD bro keep it up!

[@JosiCraftStudios]

it looks great but i personally would have mirrored it so the decoration matched the area were the profile pic normally is. and it brings the important part closure to the center witch is were the player most likely will be looking

[@Junkuza]

surprised you didn't include the old 'a face of your character that gets more upset/injured the lower the health bar is' but maybe that's not as common as I thought it was XD Great vid.

[@EndoScorpion]

I love the art style of Gunstar Heroes. A great game all around, but I remember as a kid I would try to draw the characters off the box art. Same with Streets of Rage 2.

[@Callam001]

whys everything look so damn clean

[@ErnoSallinen]

Very nice. Best topic in a while!

[@chicknhawk]

Looks very cool!

[@adhdraw]

spriters-resource has been a godsend when it comes to studies

[@oddysay]

yeah been studying alot of the octopath and marvel vs capcom sprites.

[@usuallychill]

the last design was so cool! Perhaps it would of been awesome if the back red colour would deplete as you lost life

[@ShiriaruKitaOld]

oh nice, didn't expect to see Sakura in one of your vids. Well deserved like

[@cailreagh9398]

Veeeeery sweet. loved this one alot

[@lukas_nascky5792]

I really like the Haiku's life bar

[@NeroTheAngel]

I think a combination from the first and the last would be perfect.

[@Retrofire-47]

Thank you - absolute legend.

[@lexibyday9504]

I'd love a game that can somehow comunicate everything that a full hud would normally comunicate but on the mouse pointer/terget reticle.

[@PeterMilko]

dope

[@alu2901]

I never really though about how health bars are designed. Turns out it is a bit more complicated than "add bar go brrr".

[@angeldude101]

Of the three designs given here, the last one I would agree is the best one, but also the hardest to actually use, at least if you were actually using a limited tileset, since you'd either need different tiles for each stage of the heart, or you could potentially do palette switching to convey its progress. Granted if this was targeting a more modern system and simply using pixel art as an art style, then the only concern would be the effort to draw each frame. The second was also good, but just a tad thick to actually be believable as a scepter. A shorter wand though could be possible. Regarding it being "too sci-fi," this is actually pretty funny to me since a lot of Japanese fantasy media, and _especially_ Magical Girl series, often include a lot of sci-fi elements. It's literally easier to find a Magical Girl in _space_ than it is to find one in a more western-style fantasy setting. So honestly? No, I wouldn't consider it "too sci-fi" for the aesthetic. Probably my favourite style health bar is... _none!_ Or more accurately, the entire border of the game acts as a health bar. CrossCode has a more traditional health bar, but also an option to disable it outside of the quick menu. With it off the screen, the way to judge your health is actually by looking at the red patterned border creeping in from the sides of the screen. If it starts flashing, that's your cue to either heal _right now,_ or run away, but it still provides plenty of warning before getting to that point.

[@minorseven8134]

This was awesome!

[@flikkie72]

Cassette beasts uses cassettes to show a plethora of bars in the menu. Very nice

[@fritchoffnilsson2574]

You should have made the striped background move in a loop. Would have added more life to your life bar descriptions. ❤️

[@xburbs]

i really like this design but can’t help but think a vertical design would work better for a magical wand/scepter

[@ShortArtGuy]

I designed a health bar concept using a pixelated liquid in a glass vial. When the player is hit the vial will crack and leak your “blood” which can be regained by killing enemies or repairing the vial

[@mikaelded7438]

Yo Brandon, it'll be cool if you did a tutorial on how to do shmups backgrounds !

[@mugitchi]

feels weird to not hear you say "crt time" xD but this is a very helpful video, i def learned a lot! thank you :D

[@BJGpixel]

Thanks! Hahaha ikr, I love how the video ended awkwardly - was thinking of saving a CRT Time if this could become a full mockup 🤔✨

[@plush_unicorn]

Cool! It would be interesting if heart shatterse when character looses all life points

[@djalexander968]

"uhhh AcTuhCtUaLly ThE zElDa HeArTs ArE tHeMeD" but for real great video man! helps alot!

[@DigitalinDaniel]

Awesome! I like the 2nd ones bar, and the 3rd ones gemstone thing on the right. What about keeping the "lightbulb" idea and having a big lightning bolt the size of all 3x3 tiles... then when you get hurt it shrinks to a smaller bolt the size of one tile, then when you're hit a 3rd time poof the bulb breaks.... "lights out" xD haha Maybe more steampunk than magic though... unless you're a lightning wizard >:)

[@IgnobleKin]

I really want to see a game made from your art

[@alsolii]

the last iteration's health mechanic reminds me a bit of Hallow Knight's mana system

[@nthSonata]

I always thought the health and mana bar (or orb?) designs from Diablo II looked really cool

[@PirataGalactico]

The "Back to the future" C64 game had the family photo (and another one with just Marty) disappearing or not depending of your progress, pretty clever. It wasn't a great game and i sucked at it but i loved it anyways.

[@TheNei]

Pretty!

[@dannyreyes8324]

castelvania aria of sorrow, one of my favs games

[@ben.alldridge]

I guess you could also probably describe the themed ones as being generally skeuomorphic too.

[@ziggysimpsonofficial]

I’d love to try it out sometime, but maybe in some different kind of 2D artstyle or something.

[@richardcahill3406]

My favourite was always the roast chicken in Atic Atac which reduced to bones

[@Poetax]

Just a quick question. Are their any games out there with multiple characters that have a good solution for displaying each individual character's health on screen without it getting cluttered?

[@MaxwellCatAlphonk]

Resurrect32 Is a cool color palette. Someone needs to remind me

[@sataStrike]

Doom had the health system of just the avatar getting more bloody until you die

[@owllegator]

i loved this video!!!

[@cinthiaMP]

this is great! id love to see u create spritework for a magical girl character in one of ur videos, if the idea pleases u ^^

[@boxoid5230]

Could you make a video on how to make Retro Pixel Art effectively? Like the enemies from classic DOOM. Would be cool if you could.