How to Make an AWESOME Segmented Circular Health Bar in Unity

in this tutorial i will show you how to make a fully dynamic circular segmented health bar in unity's shader graph by the end of this tutorial we'll have something that looks like this you can customize the radius line width spacing and color of the health bar along with the segment count and of course the value this tutorial is based off my asset which is available in the asset store which has many more features than described here the link for that is in the description as well so feel free to check it out okay with that out of the way let's go ahead and create a new project using unity 2019 or newer and hdrp or urp i'm going to be using unity 2019 so my shader might look a little different to the one you are using but generally things should work the same once the project is loaded up go ahead and remove all the bloat that comes with the standard urp project and we can get started now let's create a new shader graph by right clicking assets and selecting create shader unlit graph this places a blank shader graph into our assets folder next we need to create a new material to use our shader graph select the material and in the material inspector change the shader in the drop down to the new shader graph you just created now let's create a new sprite renderer in the hierarchy to take advantage of this material choose a random sprite for your sprite render i'm going to use a simple white rectangle i made in ms paint now apply the material and we get a warning stating that we are missing a main texture this is just saying that the sprite renderer has nowhere to send its sprite and is not rendering anything to fix this we can open our shader graph by double clicking it and in the blackboard to the left click on the plus button and add a texture 2d from the drop down rename this to main text and name the reference underscore main text so that the sprite renderer stops complaining we won't be using this this is just here to satisfy the sprite renderer now that this is added you can click on save asset and go back to the editor as you can see the warning is gone nice now we can finally move on to the actual shader graph to begin open the shader graph and right click the main preview to change the shape to a quad since this is the best way to visualize this specific shader if you don't see the main preview just click main preview in the top right corner to open it up in the graph we currently have two values that are important to us the color value and the alpha value currently the color is set to a slight gray value which is also what you see in the editor the alpha value has no effect at the moment let's change that click the cog in the top right corner of the unlit master node and change the surface parameter from opaque to transparent this allows our shader to display translucent pixels now when we change the alpha we can see the output change respectively moving on the first thing we want to create is a simple circle shape to do this let's pull in a tiling and offset node by right clicking and searching for tiling and offset then just left click it to add the node to the scene this specific node simply translates and scales uv coordinates we want our health bar to be centered in the middle of our output so let's set the offset to negative 0.5 for both the u and v axes now we have values 0 and 0 in the middle going to the left we get negative 0.5 and going to the right we get positive 0.5 to the bottom we get negative 0.5 and to the top we get positive 0.5 we can use this to create a circle to do this create a length node by right-clicking and searching length then drag the output of our tiling and offset node into the length node this node basically takes a vector2d value and outputs the magnitude to the screen as a value from 0 to 1. since we offset our uv coordinates the middle of this display is black and it goes to white the further from the center it strays this already looks pretty circular let's add another node to give our circle a concrete radius right click and search subtract to create a subtract node add the output of the length node to the input of the subtract node the subtract node performs the operation a minus b if we change the value for b we can see the circle changing size let's create a property called radius so we can change this value in the unity editor outside of shader graph click on the plus in the blackboard and select vector 1 which is simply a float value rename it to radius and underscore radius as seen here convention has it that shader property names are preceded by an underscore so that's what we're doing here then select an arbitrary radius value to test it out you can drag this property right into your graph to use it and drag its output into the b input of the subtract node to apply the value now when you change the value it updates in the graph next step is the process to create a ring shape to do this simply add an absolute node that turns every value from the input positive take the output from the subtract node and feed it into the input of the absolute node and we have a ring this is because we had a range of values in the negative area when we perform the subtract earlier if we invert just the negative values a ring shape is what is left now to change the width of the ring we can add another subtract node add the output of the absolute node to the a input of the new subtract node and play with the b input you can see the line width change you can imagine this as shifting all the values downwards a bit so the lower values are below zero it's kind of like raising a hypothetical water level we can add another property to set this value from the editor click the plus button in the blackboard and create another vector 1. we'll call this one line width and underscore line width drag it into the graph and feed the output into the subtract node b input now we already have something we can try out in the editor feed the output of the subtract node into the color input of the unlit master node and we see our main preview change this is basically what we see in the unity editor now it's time to give some definition to the edges of our circle there's a handy trick we can use to get some anti-aliased edges for our circle right click and search ddxy in the graph to add a partial derivative node with respect to the x and y axes then add the output of the first subtract node to the input of the ddxy node now create a divide node and add the output of the ddxy node to the b input of the divide node add the final subtract node's output to the a input of the divide node look at that smooth and well-defined edges now add a 1 minus node to invert the values and finally clamp the output to a range of 0 to 1. we do this because we currently have values in our output that are not in that range and that can lead to funky looking outputs so always be sure to clamp your values before you output them to the screen to test our output feed the clamp node output into the color input and the alpha input of the unlit master node this gives us a nice white circle with a transparent background okay now let's add some color to our health bar create a multiply node and add the clamp output to either one of the inputs then create a color node and add its output to the remaining input of the multiply node lastly set the multiply output to the inlet master color input and you can play around with the color to get a color that you like let's also create a color variable in the blackboard and use it to replace our current hard-coded color [Music] pretty neat no okay so now we have an adjustable circle but is still not what we would be able to consider a health bar for that it needs a health value to add this let's first create a rotate node this rotates uv coordinates by some amount we can use this to set our start and end values to somewhere we like later on drag the output of the tiling and offset node to the uv input of the rotate node change the center to zero zero and the unit two degrees or you can leave it as radians if you prefer that and let's create a new rotation variable to take control of the setting click the plus button in the blackboard and add a new vector one we can name this rotation add it to the graph and set it as the input for rotation in the rotate node next let's add an arc tangent to node the uv output of the rotate node doesn't fit into any of the a102 inputs so we have to add a split node to get access to the individual components of our uv coordinates now drag the uv output into the split node and set the r output to the a input of the a102 node now set the g output to the b input of the a102 node now we have our circular pattern this goes from negative pi to positive pi i want this to go from 0 to 2 pi so i'll add pi on top of it by applying an add node to the output of the a102 node just type 3.141 for the other input now add a subtract node and insert the output of the add into the b input of the subtract if we adjust the top value you can already see what we're going for we can multiply some arbitrary value by pi to change the working range 0 to 2 pi to 0 to 1. now if we play with this value you can see the range has changed let's perform our anti-aliasing step move from earlier once again by adding a ddx y node use the subtract output as the ddxy input add a divide node and divide the subtract node by the ddxy node there we have our well-defined edge now we still need to clamp this to a zero to one range since it still is in the zero to two pi range and that should be all we need to do with that done let's merge this with the rest of our health bar the best way to do this is with a simple subtract note fill the b input of this new subtract node with the clamp output let's zoom out a bit to get a big picture view of our graph i'm going to move the circle clamp node and everything beyond it a little out of the way to make room for this subtract node then i'm going to make a new clamp node just before the other one and shove the subtract node in between both of these clamp nodes okay let's just add a variable to take full control of our health bar value go to the blackboard hit the plus button and add a new vector 1. i'll call this removed segments because we currently only have one segment but that will change in the future and this value is supposed to represent the removed segments and not the removed percentage drag it into the graph and replace the hard-coded value in the multiply node so that we now multiply our removed segments by two pi now that that's done it's time to move on to the final part of this tutorial adding segments for this we want to define a segment size in radians simply create a divide node and divide 2 pi by your desired segment count now insert a modulo node and drag the output of the add node above to the a input of the modulo node if you adjust the bottom value you can see vaguely how some lines have formed to control how many lines are depicted we can set the b input of the modulo node to the output of the segment divide node to make this node a little clearer i'll right click it and select group selection this surrounds the node in a group box which i can rename to segment size next create a subtract node and set the output of the modulo node to the a input then divide the segment size by 2 to get half a segment i'll just group this too and use that output as the b input for the subtract node now feed the subtract output into a sine node we do this to prevent some odd results later on and then feed the output of the sine node into an absolute node you can see with the subtract node we basically shifted the values halfway into negative space then with the absolute node we inverted the negative values to get a smooth line pattern with equal falloff in both directions of each line to control the width of these lines we can use another subtract known like we did with the circle before you'll see though that we aren't creating lines but cones to fix this let's deviate from here and create a tiling node below what we have now set the offset to negative 0.5 and negative 0.5 and then feed the output into a length node then we can simply multiply the absolute node by the length node and feed that into the a input of the subtract node play with the b input of the subtract node to see the result let's just create a variable here for the spacing width create a variable of type vector 1 i'll call mine segment spacing and drag it into the graph and set it to the b input of the subtract node i'll create another vector one called segment count and set it to the segment count divide b input okay back to the lines the lines are still pretty smooth so it's time for our anti-aliasing step create a ddx y node and a divide node set the subtract output to the ddx y input and then divide the subtract node by the ddx y node this gives us black lines we want white lines so let's quickly invert this with a one minus node and finally let's clamp the result to a range of zero to one with that done it's time to add this to the rest of the health bar i'll drag the last clamp and everything beyond a little further out of the way to make some more room now add a subtract node and set the line clamp to the b input drag the subtract node up and place it between the other subtract node from before and the final clamp node if we now look at our result we can see that there are still some small things to fix first when we set the segment count to one we still get two segments second when we remove a part of our health bar it seems to start from the middle of a node and not from the beginning let's start by fixing the second issue first this is luckily a simple fix all we have to do is add half a segment size to the output before we do the modulo operation we can just move everything out of the way a bit to make room for this i'll place the add node right between the last add node and the modulo node and i'll add the half segment to the other add node and use that as the modulo a input and that should fix our misalignment issue let's also change our removed segments multiply to multiply our removed segments by our single segment size for the segment count issue we want to basically disable the lines if our segment count is less than 2. we can do this by multiplying the line clamp output by either zero to disable it or one to enable it place the multiply node between the subtract and clamp nodes and replace the connecting line with it to determine if the line should be visible or not add the segment count variable to the graph and remap it from 1 to 2 to 0 to 0.51 this makes every value below 2 less than 0.51 and every value above 2 greater than 0.51 clamp this to 0 and 1 and round it off the round basically forces the value to be 0 or 1. if we have a segment count of 2 the remap node makes it so the value is actually 0.51 and then we round it it results in one everything below that results in zero set the output of the round node to the a input of the multiply node and we are officially done we can zoom out to look at everything we've done at a glance be sure to always save your graph in the top left corner before quitting your project or trying out your shader and that is all of course there is so much more that is possible with this specific shader and if you'd like to see everything i've done with it head over to my asset page in the unity asset store the link for that should pop up in the video right about now or you can check the description and you'll find it there too as always be sure to subscribe to get more tutorials and of course devlogs and a like is always appreciated and with that said have a nice day and i'll see you in the next video [Music]

Channel: Sam Schiffer

Views: 15,626

Keywords: unity, C#, indie game, indie, game, unity tutorial, ios game, ios, android, app game, video games, physics, rope swinging, 2d game, game development, procedural, unity game, C# Game, C# programming, unity c#, c# game development, game programming, gamedev, programming, unity 2020, unity 2019, orenge devlog, orenge, orange devlog, orange, devorenge, health bar, radial health bar, healthbar, circular health bar, circular segmented health bar, segmented, segments, shader graph

Id: V5h2ClMUguQ

Length: 15min 28sec (928 seconds)

Published: Thu Apr 01 2021