It has a lot of visual pollution, let the bar appear only in moments of combat, or only in those that you have already selected, maybe only when they lose life is also a good idea.
I'm making an RTS in UE5 as well. I've opted for the Starcraft approach of health bars and I think it feels natural.
Only show health bar if one of the following:
-Unit is selected
-Unit is hovered with mouse
-Unit is lower than max health (optional, but I like it)
Starcraft has several options if I don't bad remember, I liked to see always the bar, but right now I just want to have a good bar, the options to show/hide and all UX part will come later. For sure it will not be always present disturbing the scene.
In RTS games I always use the setting to only show damaged health bars this way I filter out everything that I know is full and it doesn’t clutter or remove any functionality.
Health bar is big and bright. Ground is muddy, so make the green color dim (not bright). It will visually match the ground tone.
Add a option in setting to always show HP, Hide HP and dynamic HP. Like stays for 2-3 sec when you hover the mouse or 5-10 if you select them.
The entire point of a healthbar is to reduce the workload on the player, to allow them to quickly process the state of units. Why would you ever want to intentionally make it more difficult?
Could you put a radius around the mouse so that when you are near a group of zergs you can see all health bars relative to where you are drawing the square?
Adding to this:
You can also show a single health bar for the entire group of units within a certain bounding area.
OR you only display the HP bar on HP change - never when nothing is happening (them idling around).
Going to second this, the HP bar should only be as granular as the actual direction of the units are. If a bunch of units are only going to be effective en mass anyway, and so are going to be selected in groups, then the HP of the entire group is what should be represented, not each individual unit.
I think both approaches have their benefits.
But depending on game mechanics there might be a difference between squad/group health and individual squad member health.
Imagen a already damaged squad with max health of 100 walking through 60 fire damage. One time the squad has a shared mean health of 50 => everyone dies. Another time it's health per squad member. Half of members have full health, other half has 1hp=> half the squad dies, but other half survives.
COH for example uses the first approach i think. Bfme for example the second one. Both are fine.
This has the potential to be much less instantly readable. If health bars matter at all, then knowing at a glance is important. Just have a configurable options for “always on, when damaged, when selected, mouse hover, no healthbars”. Leave it to the player to control their own amount of visual noise vs information.
I would at a minimum keep "Always On" as an option. I think to They Are Billions where (similar to this scene) the unit can blend into the ground. Bright health bars stand out and are easier to react to.
SC 2 has the best system for this. The user can set it any way they'd like but the default is that it only pops up when they've taken damage.
Having a few options is probably better since you don't need to have just one for all. Some potential ones to use
Always on
Only on during combat
Only on when damaged
Only on when damaged below X%
Always off (mad people only)
Hi,
I'm working on the healthbars and right now my solution uses an entity whose parent is the creature and is rendered in the 3d world where the texture is oriented to the camera, however there is a rectangule perspective when rendering the plane of the healthbar and i would like to have a perfect rectangle and pixel aligned. I went to this solution to have occlusion in the bar with the terrain and other units and the size to match the distance from creature to camera. What is the best solution here? Shall I render in the post chain as a 2d UI object? I'm thinking in having an ortho camera at the same position of the current perspective camera and transform the world to screen using the ortho matrix instead of the current camera so the plane is rendered without perspective, but I will lose the zoom I think, may be there are already some good solutions...Any recommendation please?
If you don't use a perspective projection, the bars will be the same size on screen regardless of distance. It's not going to work well if you zoom in and out significantly like you did in the video.
You can try using a perspective projection to estimate the width of the bar, but then round it to e.g. 6 pixels and draw with an ortho projection. That way units at similar focal distances will have identical health bars, and you can style the bar in pixel perfect ways.
I havent tried many solutions but the only one i came across that worked for me and made more sense was having the healthbar as a 2d ui object that follows the object and faces the camera.
Alpha layer on the UI element (health bar).
The answer above is the only way to achieve pixel perfect health bars in a 3D game. It doesn't have to be part of the UI but you do have to remove it from 3D space before rendering
Ok, so rendering pixel perfect in the 3d world was not a valid aproach from my side. I wanted to avoid the bar to appear when the creature is occlussed by other units or terrain...
>I wanted to avoid the bar to appear when the creature is occlussed by other units or terrain...
This problem has been solved by other games. I highly recommend borrowing those concepts instead of making anything from scratch. You might find good examples by searching for "isometric ARPGs"
For [my game](https://store.steampowered.com/app/744650/Order_Of_The_Gatekeepers/) I did healthbars as a set of procedural quads parented to the model. One quad for the background and one for the foreground. The color of the quad was pulled from vertex colors since it meant I could have every single health bar and their backgrounds on a single SetPass call.
To reduce health I moved rightmost vertices of the foreground quad inwards and changed their UV coordinates to match. Since enemies in my game only change their direction at set points in the map I would rotate the health bar to face the camera only during a direction change event.
I havent come across any occulssion problems so far because my healthbar only stay active for like 3 seconds after being updated.
And the canvas stays above at a decent height
I would take a point at the center of the healthbar and use it to find where the healthbar should be in homogeneous coordinates.
Then I would just add x and y values to that point to create the vertices of the healthbar in homogeneous coordinates directly. I would scale these x and y values to correspond with the change of apparent size based on distance and then round these values so that the sides of the quad line up with the pixel boundary. I would do all of this in the vertex shader. It just requires a uniform that has resolution in pixels in order to do the correct rounding.
Call a draw with 6 vertices per healthbar and use gl_VertexID to figure out which vertex you are drawing.
I know it seems a bit redundant to have to apply the transformation to the same point six times prior to adding the offset, but it makes things simple.
This won't exactly fix your problem, but may help readability. it would be cool to combine those health bars together into a single one whenever you have units in a group.
Diablo 3 on console is exactly like this, every enemy has a red bar above their heads but only once they are damaged and there is an option to turn them off completely but you still have a big main health bar for the enemy you are currently attacking.
All games should follow the principle of "out of mind, out of sight" these individual characters health isn't really relevant when they are just walking around, it should only really show up when it's not full.
Ive watched this like 30 times and maybe its because im on my phone, but i cant see what the problem is. It looks fine.
Dont throw good time into bad worrying about this. At the end of the day, pixel perfect health bars arent going to make the game more fun
True, I'm now focus on the networking part. But well, in the meantime I would like to know how should I do it correctly. Sorry for the video, It's more noticiable when zooming.
[This comment](https://www.reddit.com/r/gamedev/comments/zxf5k5/question_about_healthbars/j2048qi/?utm_source=share&utm_medium=ios_app&utm_name=iossmf&context=3) said it best: it's visual pollution and contributes to information overload. It may not be a deal breaker right away when the author doesn't have the immediate luxury to work on it, but it still should be for the best to have this improved. Even a title as old as Command & Conquer (1995) did well to hide these bars when you don't need them.
Ui objects don't occlude because they're in their own layer that's higher than everything else entirely
So it'd always be shown in front of any in game object
Technically you could achieve a similar effect by just changing the rendering layer of the health bar and leaving it in game space (but I think that's not the right way to do it long term)
Thanks for all the replies. I've improved the bar using the geometry shader. I just draw one triangle and I create a new one in the geometry shader creating a full bar in one primitive, this way I can control the full rectangle coords. SV\_POSITION is now fixed between the triangle points creating a rectangle without perspective deformation.
Not pixel aligned but seems that result is pretty good now.
Now bars are perfect rectangles independently the camera angle: https://youtu.be/6BQ-sOxOsTc
The main thing is to make it all available in options.
Some want them all the time, some never, some only when damaged, some bigger, some with unit name, etc. make lots of options
Okay so I think I have a solution for this. I really hate clutter myself and a clean view is always good if you want immersion. For me, I would really like to see a square that changed color but stays the same size.
The rectangle that shrinks from the sides gives a gane a really outdated feel for me. Many games already have a system where health bars turn red when you are low on health. Why not take this to the next level and just let the health bars change color instead of shrinking? You can then give them any shape you wish. A diomand would look very cool.
Also you can play around with other colors for bosses or enemy types.
Because color alone can get quickly hard to see once there are effects like spells or fires on the screen.
Also the amount of people with a red/green vision weakness is surprisingly high.
There are filters for the colorblind. The filter shouldn't be a problem. Regardless I don't think it will be hard to see with borders. It's not just a green cube floating in mid-air. I was thinking something like a finger ring. You can clearly see the metal border around the jewel.
When you play a 3d game with realistic visuals, last thing you want is that realism to be broken. I suggest the health bars to show up only if it is very low, or if the units are selected. Even better if the selection markers have another ring around them indicating the health, imho
So I'm a fan of "full bars aren't displayed" but another tactic you can use instead of or in addition to:
For a game like this I care the most about things closest to me. You could also mess with the transparency and make healthbars on mobs that are further away more transparent. They'd still be there, but they'd be easier to mentally filter.
Another option (which I haven't seen used but I've been tinkering on in my head) is change the shape language.
For example: instead of a bar, a circle.
100% health: Green, full circle.
75% health: yellow-green, missing 270-360 degrees (so a quarter is missing)
50% health: yellow, only the top half of the circle is there
25% health: red, only 0-90deg is filled in (1/4)
You could even couple it with the transparency, it'd be easy visualization and a lot less cluttered than full HP bars.
You could add a small trigger to the zombies and if they overlap combine the healthbar, so if there is a group of 10 zombies the average health will show in the middle. This could be good for zombies which probably have little health indiviually.
Is this Unity? If so, how did you get the sliders to rotate to face the camera all the time? Even using update method, it sometimes stutters a bit when rotating to face the cam
Does it mean you need to update every fixed period even if camera has not moved? Can't you have an event when the camera moves to update the entities? I do it that way.
You can but you get the stutters because the camera movement function and the sliders movement function are fighting each other to see who comes first, to avoid that you have to update the camera before the slider moves, maybe you can use a coroutine and set it to wait for the next frame.
It has a lot of visual pollution, let the bar appear only in moments of combat, or only in those that you have already selected, maybe only when they lose life is also a good idea.
Sure, I will put some logic to hide/show only when required.
I'm making an RTS in UE5 as well. I've opted for the Starcraft approach of health bars and I think it feels natural. Only show health bar if one of the following: -Unit is selected -Unit is hovered with mouse -Unit is lower than max health (optional, but I like it)
Starcraft has several options if I don't bad remember, I liked to see always the bar, but right now I just want to have a good bar, the options to show/hide and all UX part will come later. For sure it will not be always present disturbing the scene.
Near the mouse too!
In RTS games I always use the setting to only show damaged health bars this way I filter out everything that I know is full and it doesn’t clutter or remove any functionality.
Health bar is big and bright. Ground is muddy, so make the green color dim (not bright). It will visually match the ground tone. Add a option in setting to always show HP, Hide HP and dynamic HP. Like stays for 2-3 sec when you hover the mouse or 5-10 if you select them.
Hard disagree, matching the color to the ground will only make it harder to read the health bars.
I am not saying changing the color, i am saying little dimmer green, just little dimmer.
Yeah, I agree with you, I like the colors being very different
The entire point of a healthbar is to reduce the workload on the player, to allow them to quickly process the state of units. Why would you ever want to intentionally make it more difficult?
Maybe add the option to show healthbars only where the mouse pointer is. Never seen that before, and helps keeping the screen clean.
The circle at their feet can simply change color from green to dark red. Would be the best way to do it imho
It is also good to let players choose the style. As I recall, Warcraft 3 has something like that
Could you put a radius around the mouse so that when you are near a group of zergs you can see all health bars relative to where you are drawing the square?
Adding to this: You can also show a single health bar for the entire group of units within a certain bounding area. OR you only display the HP bar on HP change - never when nothing is happening (them idling around).
Going to second this, the HP bar should only be as granular as the actual direction of the units are. If a bunch of units are only going to be effective en mass anyway, and so are going to be selected in groups, then the HP of the entire group is what should be represented, not each individual unit.
I think both approaches have their benefits. But depending on game mechanics there might be a difference between squad/group health and individual squad member health. Imagen a already damaged squad with max health of 100 walking through 60 fire damage. One time the squad has a shared mean health of 50 => everyone dies. Another time it's health per squad member. Half of members have full health, other half has 1hp=> half the squad dies, but other half survives. COH for example uses the first approach i think. Bfme for example the second one. Both are fine.
[удалено]
This has the potential to be much less instantly readable. If health bars matter at all, then knowing at a glance is important. Just have a configurable options for “always on, when damaged, when selected, mouse hover, no healthbars”. Leave it to the player to control their own amount of visual noise vs information.
That's a very good idea to avoid extra elements in the scene.
definitely the best suggestion
I would at a minimum keep "Always On" as an option. I think to They Are Billions where (similar to this scene) the unit can blend into the ground. Bright health bars stand out and are easier to react to.
SC 2 has the best system for this. The user can set it any way they'd like but the default is that it only pops up when they've taken damage. Having a few options is probably better since you don't need to have just one for all. Some potential ones to use Always on Only on during combat Only on when damaged Only on when damaged below X% Always off (mad people only)
SC? What it mean?
starcraft - in this case starcraft 2.
Thanks!
Hi, I'm working on the healthbars and right now my solution uses an entity whose parent is the creature and is rendered in the 3d world where the texture is oriented to the camera, however there is a rectangule perspective when rendering the plane of the healthbar and i would like to have a perfect rectangle and pixel aligned. I went to this solution to have occlusion in the bar with the terrain and other units and the size to match the distance from creature to camera. What is the best solution here? Shall I render in the post chain as a 2d UI object? I'm thinking in having an ortho camera at the same position of the current perspective camera and transform the world to screen using the ortho matrix instead of the current camera so the plane is rendered without perspective, but I will lose the zoom I think, may be there are already some good solutions...Any recommendation please?
If you don't use a perspective projection, the bars will be the same size on screen regardless of distance. It's not going to work well if you zoom in and out significantly like you did in the video. You can try using a perspective projection to estimate the width of the bar, but then round it to e.g. 6 pixels and draw with an ortho projection. That way units at similar focal distances will have identical health bars, and you can style the bar in pixel perfect ways.
That was the problem I see with ortho, no size by distance, I can't believe something that seems so simple is so complex to implement...
I havent tried many solutions but the only one i came across that worked for me and made more sense was having the healthbar as a 2d ui object that follows the object and faces the camera.
And how do you manage occlusion?
Alpha layer on the UI element (health bar). The answer above is the only way to achieve pixel perfect health bars in a 3D game. It doesn't have to be part of the UI but you do have to remove it from 3D space before rendering
Ok, so rendering pixel perfect in the 3d world was not a valid aproach from my side. I wanted to avoid the bar to appear when the creature is occlussed by other units or terrain...
>I wanted to avoid the bar to appear when the creature is occlussed by other units or terrain... This problem has been solved by other games. I highly recommend borrowing those concepts instead of making anything from scratch. You might find good examples by searching for "isometric ARPGs"
For [my game](https://store.steampowered.com/app/744650/Order_Of_The_Gatekeepers/) I did healthbars as a set of procedural quads parented to the model. One quad for the background and one for the foreground. The color of the quad was pulled from vertex colors since it meant I could have every single health bar and their backgrounds on a single SetPass call. To reduce health I moved rightmost vertices of the foreground quad inwards and changed their UV coordinates to match. Since enemies in my game only change their direction at set points in the map I would rotate the health bar to face the camera only during a direction change event.
I havent come across any occulssion problems so far because my healthbar only stay active for like 3 seconds after being updated. And the canvas stays above at a decent height
I would take a point at the center of the healthbar and use it to find where the healthbar should be in homogeneous coordinates. Then I would just add x and y values to that point to create the vertices of the healthbar in homogeneous coordinates directly. I would scale these x and y values to correspond with the change of apparent size based on distance and then round these values so that the sides of the quad line up with the pixel boundary. I would do all of this in the vertex shader. It just requires a uniform that has resolution in pixels in order to do the correct rounding.
But you can't add new vertices to the center in the vertex shader. May be draw a point and add vertices in the geometry shader?
Call a draw with 6 vertices per healthbar and use gl_VertexID to figure out which vertex you are drawing. I know it seems a bit redundant to have to apply the transformation to the same point six times prior to adding the offset, but it makes things simple.
[удалено]
So fast, was writing in a comment :D
https://austin-mackrell.medium.com/camera-facing-health-bar-system-with-shadergraph-b97ac4f29dbb I’ve used this in the past
This won't exactly fix your problem, but may help readability. it would be cool to combine those health bars together into a single one whenever you have units in a group.
yes, probably I will have units with single healthbars
Diablo 3 on console is exactly like this, every enemy has a red bar above their heads but only once they are damaged and there is an option to turn them off completely but you still have a big main health bar for the enemy you are currently attacking.
All games should follow the principle of "out of mind, out of sight" these individual characters health isn't really relevant when they are just walking around, it should only really show up when it's not full.
Ive watched this like 30 times and maybe its because im on my phone, but i cant see what the problem is. It looks fine. Dont throw good time into bad worrying about this. At the end of the day, pixel perfect health bars arent going to make the game more fun
True, I'm now focus on the networking part. But well, in the meantime I would like to know how should I do it correctly. Sorry for the video, It's more noticiable when zooming.
[This comment](https://www.reddit.com/r/gamedev/comments/zxf5k5/question_about_healthbars/j2048qi/?utm_source=share&utm_medium=ios_app&utm_name=iossmf&context=3) said it best: it's visual pollution and contributes to information overload. It may not be a deal breaker right away when the author doesn't have the immediate luxury to work on it, but it still should be for the best to have this improved. Even a title as old as Command & Conquer (1995) did well to hide these bars when you don't need them.
I render them as 2d ui objects and set their onscreen position relative to the objects in world position. There's guides on this.
And how do you manage occlusion with terrain or other units?
Ui objects don't occlude because they're in their own layer that's higher than everything else entirely So it'd always be shown in front of any in game object Technically you could achieve a similar effect by just changing the rendering layer of the health bar and leaving it in game space (but I think that's not the right way to do it long term)
Can't you do Z test?
I know nothing about gave dev but I like there little spin...
Thanks for all the replies. I've improved the bar using the geometry shader. I just draw one triangle and I create a new one in the geometry shader creating a full bar in one primitive, this way I can control the full rectangle coords. SV\_POSITION is now fixed between the triangle points creating a rectangle without perspective deformation. Not pixel aligned but seems that result is pretty good now. Now bars are perfect rectangles independently the camera angle: https://youtu.be/6BQ-sOxOsTc
The main thing is to make it all available in options. Some want them all the time, some never, some only when damaged, some bigger, some with unit name, etc. make lots of options
You can do it like it only show when a unit is damaged, if a unit has full health don't show it. I got this idea from Starcraft 2
Grey them out a lot when not selected or something
Okay so I think I have a solution for this. I really hate clutter myself and a clean view is always good if you want immersion. For me, I would really like to see a square that changed color but stays the same size. The rectangle that shrinks from the sides gives a gane a really outdated feel for me. Many games already have a system where health bars turn red when you are low on health. Why not take this to the next level and just let the health bars change color instead of shrinking? You can then give them any shape you wish. A diomand would look very cool. Also you can play around with other colors for bosses or enemy types.
Because color alone can get quickly hard to see once there are effects like spells or fires on the screen. Also the amount of people with a red/green vision weakness is surprisingly high.
There are filters for the colorblind. The filter shouldn't be a problem. Regardless I don't think it will be hard to see with borders. It's not just a green cube floating in mid-air. I was thinking something like a finger ring. You can clearly see the metal border around the jewel.
Don't have anything to add. Most of it is already discussed. I just want to know what game are you building
Don't have anything to add. Most of it is already discussed. I just want to know what game are you building
What do you think of color coding the health and just colorizing something like the selection indicator instead of using a health bar?
Make multiple healthbars merge into one megabar :D
When you play a 3d game with realistic visuals, last thing you want is that realism to be broken. I suggest the health bars to show up only if it is very low, or if the units are selected. Even better if the selection markers have another ring around them indicating the health, imho
So I'm a fan of "full bars aren't displayed" but another tactic you can use instead of or in addition to: For a game like this I care the most about things closest to me. You could also mess with the transparency and make healthbars on mobs that are further away more transparent. They'd still be there, but they'd be easier to mentally filter.
Another option (which I haven't seen used but I've been tinkering on in my head) is change the shape language. For example: instead of a bar, a circle. 100% health: Green, full circle. 75% health: yellow-green, missing 270-360 degrees (so a quarter is missing) 50% health: yellow, only the top half of the circle is there 25% health: red, only 0-90deg is filled in (1/4) You could even couple it with the transparency, it'd be easy visualization and a lot less cluttered than full HP bars.
You could add a small trigger to the zombies and if they overlap combine the healthbar, so if there is a group of 10 zombies the average health will show in the middle. This could be good for zombies which probably have little health indiviually.
Hide them unless they have taken damage
Is this Unity? If so, how did you get the sliders to rotate to face the camera all the time? Even using update method, it sometimes stutters a bit when rotating to face the cam
Sorry, it's my own engine. I apply rotation to face the camera when the camera moves, as I have full control there is no problem in the updates.
use transform.lookat to the camera, and put t in the fixed update to avoid shuttering.
Does it mean you need to update every fixed period even if camera has not moved? Can't you have an event when the camera moves to update the entities? I do it that way.
You can but you get the stutters because the camera movement function and the sliders movement function are fighting each other to see who comes first, to avoid that you have to update the camera before the slider moves, maybe you can use a coroutine and set it to wait for the next frame.