so much knowledge in this, how to make cone into line, make procedural ring, divide segments, use DDXY to make smoother effect than Step node, even when my end graph is different, this still helps a lot!
I created a GLSL shader following this. What I found strange is that I didn't have the 2nd problem you mentioned. I put in the code and it actually caused the problem lol. The first solution though was genious to hide the cut if it was 1. There is a problem of removed_segments orientation. Instead of starting at the bottom, I needed to put code in to start at top. This was a easy fix to just subtract 2*PI (or TAU) from the rotation angle.
Amazing. Thanks. To get this to work in Unity3d with screenspace overlay, I had to add in a raw image. Then I changed the shadergraph to Sprite Unlit and enabled Alpha Clipping.
Awesome tutorial man! I'm decently new to shader graph, but I was able to make my own radial menu shader with the knowledge you shared here. Keep up the good work :)
Nice tutorial, however surely it should fill clockwise and not anti clockwise, Its fairly easy to make it fill clock wise just out the the Multiply that "RemoveSegments is connected into, into the B of the subtract instead of the A and then the Add Node that was once connected to the B , Reconnect it to the A of the Subtract and then it seems to fill the right way.
Just to add it also did not show up in the Game Window using a spriteRenderer Component IDK ? maybe I did something wrong, however I added the material to just a general UI image Component and it solved this problem for me plus using ScreenSpace Camera, which kinda sucks but it works with ScreenSpace OverLay in the Game Window and Editor Window , however when I run my game I can only see faintly the edges of the Circular bar and I am guessing this has something to do with the Z Axis and I am not sure how to fix this ill just keep using ScreenSpace Camera for the time being Any help would be appreciated ??
@@duane7032 Nice work! The screenspace overlay thing is a bug with shadergraph. You have to switch the shader to sprite mode or something in the shadergraph (I forget what exactly it's called, sorry, there's another comment here somewhere describing the same issue). The spriterenderer thing is weird to me! I never experienced any issues with that, nor have I heard anyone have any similar issue.
For me the preview of the centered tiling & offset is distorted and not separated as clear as in your video (using unity 2020.1). Any reason why that is? Because at the end the resulted sprite for 100% has a small cutout (to be noted that I skipped the whole separation part due to the fact that my application of this technique refers to a pie chart and not a heath bar) { Later edit: For who has the same problem with the unnecessary cutout, got it fixed by adding a ceil/round to the values right before the One minus / clamp for the subtraction part}
Oh my! DDX and the Divide complicate the expense of the Atan2. I suggest Dot product with step-nodes subtracting from one another. This should reduce the cost of your shader by 50% or more.
@@SamSchiffer Thank you! It's an amazing shader, it looks really good. I'm doing a small RTS project and using this shader on a quad that's at knee height makes it easy to see individual troops health from a birdview perspective.
This is absolutely cool - never knew you could do this kind of thing! Question - is there an advantage to doing this versus programatically creating a circular mesh with segments/arcs/etc and using the shader graph to fill it in based on the percentage? I've alway used shader graphs to 'fill in/color/etc' meshes... never actually used shader/graphs to "create" meshes like this!
There's a great blogpost that talks about making circular health bars using shaders. The downside to using a mesh is that it has to be fairly high-poly. My method uses atan2 which is pretty expensive to compute and has some REALLY annoying aliasing issues (My implementation isn't from the blogpost btw.). I'm working an switching to a more efficient method for my asset, but who knows when that'll be done. bgolus.medium.com/progressing-in-circles-13452434fdb9
@@SamSchiffer nice! I'll checkout the blog. In my particular case, I think it makes more sense to use a mesh because then I can use GPU instancing which means that I should be able to have thousands (theoretically hundreds of thousands to millions) and it should still be performant - even with a high poly count. But this is cool nonetheless. I'll definitely check out your asset as well. cheers!
Hey, can you please make an updated version for Unity 2022? A lot of things have changed since the tutorial and saying that I'm lost would be a massive understatement. It'd be much appreciated
@@SamSchiffer For starters, the Unlit Master node is straight up non-existent. I did try to recreate it, but then I couldn't change the Surface from Opaque to Transparent, because the gear icon does not exist on my recreated version of it. I didn't even bother following the whole tutorial after that, because if the first steps can't be reproduced, I don't see the whole thing working in the end. I tried looking up solutions for the missing of the Unlit Master node, but I couldn't find anything useful.
You need to make a new unlit shader graph, then in the top right corner of the shader graph window, enable graph inspector, and in there click on the tab for graph settings. you’ll be able to select transparent surface from there if you scroll down a bit. Also change blend to alpha and material to unlit if they aren’t already set to that.
Definitely a simple UI radial bar. There's more arithmetic operations in a shader like this. If you're only going for a circular health bar you should use the built in option. If you need some segments, then this is basically the way to go unless you want to make a custom sprite.
I have a weird bug . Thr colors aren't behaving right red seems to be acting as the Linesegments alpha thr division ones not the main bulk. for some reason that and the colour itself is inverted
Can you do a tutorial on this but a linear one please? Ive tried to work out how to use the rounded rectangle fragment shader stuff but i cant seem to figure out how to get it to tile correctly.
This is very intersting and well explained. I tried to use this to do something but I'm stuck. I want to be able to color each individual segment individually. Kind of like a pie chart that could change dynamically and it won't go above 5 segments. I have no idea where to start to have my shader do that. I planned on using a flag enum to communicate to the shader which colors to use.
@@SamSchiffer I don't really know where to use it, when I try to it displays black. My setup ends with the black and white multiply, the last one you have in your video before going into a lerp that colors between only 2 colors. I am confused I would've expected the gradient to be put at the end?
@@SamSchiffer If I try to use the gradient shape it gets the color from value 0 and 1 only since I give in in the Time input the multiply in the end. I can't wrap my mind around how to get each individual segments. My setup is a bit different, I'm mainly using the bottom part. I don't really know where to get help for that excepted here but it's kind of hard to get help just by text.
@@Tanathos2you have the shape of your “pie chart” in white at the end, correct? You can take this shape and use it as a mask for the gradient. As in: clamp the mask between 0 and 1, then lerp between the gradient and 0. You sample the gradient with the polar coordinates node to conform it to a circular shape.
@@Samuel-bd1ms If I didn't do something wrong, I clamped the mask, lerped betweet 0 and the gradient sample with the polar coordinates in its time input. What I get is a radial gradient, from the center out of the circle instead of following the "pie chart" shape. Thank you both for the help.
I'm usually not a fan of multiply, because it makes the AA edges harder in some cases (like when multiplying two values that are less than 1 and greater than 0). In this case it would be fine to use multiply, I think. But would require an extra one minus node to invert the values before multiplying. These days though, I would probably try to combine everything into a single sdf shape before applying AA to give more of a smooth look. Essentially, multiply is ok to use too.
dude this is amazing! i used this for my hp gauge and it worked really well! but now i got a new problem that maybe you can help with ? Can we do this...but with a Bar instead? The reason i ask is because i wanted to have a HP bar that grows with segments if i gain more hp.
That's a tough problem, I'm working on the same thing and solved it but am still working on getting it to work right. I have some calculations that you might want to try, but I'm not sure if you'll be able to make anything of them: combinedIntervalWidth = widthSlope + widthNonSlope currentCombinedInterval = floor(currentX / (combinedIntervalWidth)) currentIntervalStart = currentCombinedInterval * combinedIntervalWidth distanceIntoCurrentInterval = currentX - currentIntervalStart inSlopeSection = distanceIntoCurrentInterval < widthSlope ? 1 : 0
@@SamSchiffer Thank you so much man! ill try what you said! If you ever do get it to work right, maybe that could be an idea for a future video ^_^! again thank you for your time man!
SpriteRenderer sr; ... sr.material.SetFloat("_Radius", 0.3f); "_Radius" -> would be replaced with any property you want to change. there's also material.SetColor for colors
I can get this to work in the Scene when I play the game it all works properly. For some reason I can't get it to show up in the game window or when i build the game on the canvas. I've got it set to an Image on the canvas.
@@SamSchifferlittle problem here. I turned it into sprite unlit and turned on alpha clipping to remove the background, but there are artefacts like a black ring surrounding the radial bar in the game view but not the scene view. You got any idea how to fix this?
Thanks for the tutorial! I was able to make a nice looking crosshair using it. However, I stumbled upon an issue you might have an answer to. I put the shader material on a unity UI Image, and it looks fine in the scene, but as soon as I start the game it disappears (in the game window, it is still visible in scene). It doesn't seem to be a render queue issue. Do you know what might cause this?
This is because Shadergraph has an issue with overlay canvases. You have to go into the shader graph, switch the URP mode to sprite unlit (or unlit, can’t remember right now) and activate alpha clipping, then switch the mode back to what it was originally
@@SamSchiffer Switching the shader graph Universal material to Sprite Unlit fixed the issue! Thank you for your fast reply and informing videos, it helps a ton.
Hey man, someone else in the comments was/is trying the same thing and I shared my formula for how to basically go about doing that. combinedIntervalWidth = widthSlope + widthNonSlope currentCombinedInterval = floor(currentX / (combinedIntervalWidth)) currentIntervalStart = currentCombinedInterval * combinedIntervalWidth distanceIntoCurrentInterval = currentX - currentIntervalStart inSlopeSection = distanceIntoCurrentInterval < widthSlope ? 1 : 0 it's not complete and requires some tinkering to get work, but maybe this can supply a foundation for how to go about doing it.
@@SamSchiffer Thanks for the head start. I'll keep taking a crack at it and see if I get it to work. This guy made what im looking for 4 years ago in this video. Works great with even more functionality than i even need. This is the link if you've never seen it but i figure it may help give hints as to what is needed based on what variables he's able to set in the editor: th-cam.com/video/fvr5gfMGezA/w-d-xo.html
@@SamSchiffer Hey thanks i think i figured something out for it to work. Only thing is removing segments but i guess if i cant figure that out i can just code it by fill percentage. Here is the list of nodes I used to produce stripes: (UV -> split R) -> Multiply A (Segment Count + Cons Pi) -> Multiply B -> Add A, with an offset property as B input -> Sine -> Absolute -> Power with 80 tightening property -> Blend with the colors blue and black and previous power node into opacity. -> the blend node into base color. This works near perfectly as far as looks. Only thing is for some reason in order to get X number of bars, it requires a segment count value of X -.15. Im not sure why this is and maybe u know why since you're more experienced with shaders.
![เปิดบ้าน โคตรสวย ป๋องกพล รู้จักตั้งนาน เพิ่งรู้ว่ารวย!!! l [Nickynachat]](http://i.ytimg.com/vi/tmgCF_2HfYI/mqdefault.jpg)
so much knowledge in this, how to make cone into line, make procedural ring, divide segments, use DDXY to make smoother effect than Step node, even when my end graph is different, this still helps a lot!
Was finding a lot of tutorials to do this in UI, which wasn't going to work for my game. You gave me the answer. Thanks.
I don't even use unity but I still subbed... Nice video
Thank you! Maybe you'll find something you like on my channel hahaha
I created a GLSL shader following this. What I found strange is that I didn't have the 2nd problem you mentioned. I put in the code and it actually caused the problem lol. The first solution though was genious to hide the cut if it was 1. There is a problem of removed_segments orientation. Instead of starting at the bottom, I needed to put code in to start at top. This was a easy fix to just subtract 2*PI (or TAU) from the rotation angle.
Well explained for everything. Besides the node connection, also managed to teach audience knowledge. Keep going!
Amazing. Thanks. To get this to work in Unity3d with screenspace overlay, I had to add in a raw image. Then I changed the shadergraph to Sprite Unlit and enabled Alpha Clipping.
Just such a lovely tutorial. You are a hidden gem for developers. Keep on making videos man, and one day you'll boom! I know it. You earned a sub
Awesome tutorial man! I'm decently new to shader graph, but I was able to make my own radial menu shader with the knowledge you shared here.
Keep up the good work :)
Thank you! I'd be interested in seeing your radial menu shader too!
I've been looking for this kind of thing for weeks! Thanks for sharing :)
Where you going?? Lovely tutorial. thank you!!
Good, good, good. We need more.
Thank you, helped
This video offers so much value!! Good job 👍
Thank you! I actually remade this video once, to redesign the graph to better optimize it.
great approach, great tutorial, thank you!
Nice tutorial, however surely it should fill clockwise and not anti clockwise, Its fairly easy to make it fill clock wise just out the the Multiply that "RemoveSegments is connected into, into the B of the subtract instead of the A and then the Add Node that was once connected to the B , Reconnect it to the A of the Subtract and then it seems to fill the right way.
Just to add it also did not show up in the Game Window using a spriteRenderer Component IDK ? maybe I did something wrong, however I added the material to just a general UI image Component and it solved this problem for me plus using ScreenSpace Camera, which kinda sucks but it works with ScreenSpace OverLay in the Game Window and Editor Window , however when I run my game I can only see faintly the edges of the Circular bar and I am guessing this has something to do with the Z Axis and I am not sure how to fix this ill just keep using ScreenSpace Camera for the time being Any help would be appreciated ??
@@duane7032 Nice work! The screenspace overlay thing is a bug with shadergraph. You have to switch the shader to sprite mode or something in the shadergraph (I forget what exactly it's called, sorry, there's another comment here somewhere describing the same issue). The spriterenderer thing is weird to me! I never experienced any issues with that, nor have I heard anyone have any similar issue.
I was wondering how I'd be able to accomplish an interface similar to the "Thief Meter" from the Sly Cooper series of stealth video games. Thanks! 😁🎉
Thanks for this vid mate. Will put it on my list of things that might help with my game later. Cheers!
No Problem! Hope it'll help in a future project!
For me the preview of the centered tiling & offset is distorted and not separated as clear as in your video (using unity 2020.1). Any reason why that is? Because at the end the resulted sprite for 100% has a small cutout (to be noted that I skipped the whole separation part due to the fact that my application of this technique refers to a pie chart and not a heath bar) { Later edit: For who has the same problem with the unnecessary cutout, got it fixed by adding a ceil/round to the values right before the One minus / clamp for the subtraction part}
not exactly sure what you're referring to, but glad you figured it out.
Oh my! DDX and the Divide complicate the expense of the Atan2. I suggest Dot product with step-nodes subtracting from one another. This should reduce the cost of your shader by 50% or more.
Could you elaborate on this? I'm not sure exactly what you mean.
This is a great tutorial.
Thank you!
@@SamSchiffer Thank you! It's an amazing shader, it looks really good. I'm doing a small RTS project and using this shader on a quad that's at knee height makes it easy to see individual troops health from a birdview perspective.
Nice! Can you send me a screenshot of that to my email? Devorengegames@gmail.com
@@SamSchiffer Sure, I'm also thinking of making a short video showing the project so far but I really just started it so there isn't much to it yet.
This is absolutely cool - never knew you could do this kind of thing! Question - is there an advantage to doing this versus programatically creating a circular mesh with segments/arcs/etc and using the shader graph to fill it in based on the percentage? I've alway used shader graphs to 'fill in/color/etc' meshes... never actually used shader/graphs to "create" meshes like this!
There's a great blogpost that talks about making circular health bars using shaders. The downside to using a mesh is that it has to be fairly high-poly. My method uses atan2 which is pretty expensive to compute and has some REALLY annoying aliasing issues (My implementation isn't from the blogpost btw.). I'm working an switching to a more efficient method for my asset, but who knows when that'll be done.
bgolus.medium.com/progressing-in-circles-13452434fdb9
@@SamSchiffer nice! I'll checkout the blog. In my particular case, I think it makes more sense to use a mesh because then I can use GPU instancing which means that I should be able to have thousands (theoretically hundreds of thousands to millions) and it should still be performant - even with a high poly count. But this is cool nonetheless. I'll definitely check out your asset as well. cheers!
Can’t you do gpu in stanching with a simple quad too? How would the mesh variant be more efficient then?
Hey, can you please make an updated version for Unity 2022? A lot of things have changed since the tutorial and saying that I'm lost would be a massive understatement. It'd be much appreciated
Hey, the different versions should be more or less the same with some UI differences. What step are you having issues with?
@@SamSchiffer For starters, the Unlit Master node is straight up non-existent. I did try to recreate it, but then I couldn't change the Surface from Opaque to Transparent, because the gear icon does not exist on my recreated version of it. I didn't even bother following the whole tutorial after that, because if the first steps can't be reproduced, I don't see the whole thing working in the end.
I tried looking up solutions for the missing of the Unlit Master node, but I couldn't find anything useful.
You need to make a new unlit shader graph, then in the top right corner of the shader graph window, enable graph inspector, and in there click on the tab for graph settings. you’ll be able to select transparent surface from there if you scroll down a bit. Also change blend to alpha and material to unlit if they aren’t already set to that.
Good video. Which one do u think is faster and optimised: the shader graph health that u showed or a simple UI radial bar ?
Definitely a simple UI radial bar. There's more arithmetic operations in a shader like this. If you're only going for a circular health bar you should use the built in option. If you need some segments, then this is basically the way to go unless you want to make a custom sprite.
@@SamSchiffer thanks for the reply. Kudos on the well made tutorial!!
I have a weird bug . Thr colors aren't behaving right red seems to be acting as the Linesegments alpha thr division ones not the main bulk. for some reason that and the colour itself is inverted
Great video
Thanks!
Can you do a tutorial on this but a linear one please? Ive tried to work out how to use the rounded rectangle fragment shader stuff but i cant seem to figure out how to get it to tile correctly.
I’d love to, but life currently is getting in the way of me making new content. I’ll be sure to update you when I get to it.
@@SamSchiffer Would be great 🙂 Looking forward to it!
there is no unlit Master in the graph . (2020.3.12f1)
thanks allot, this was very helpfull
This is very intersting and well explained. I tried to use this to do something but I'm stuck. I want to be able to color each individual segment individually.
Kind of like a pie chart that could change dynamically and it won't go above 5 segments.
I have no idea where to start to have my shader do that. I planned on using a flag enum to communicate to the shader which colors to use.
Have you tried using a gradient? That’s how I do it in my asset
@@SamSchiffer I don't really know where to use it, when I try to it displays black. My setup ends with the black and white multiply, the last one you have in your video before going into a lerp that colors between only 2 colors. I am confused I would've expected the gradient to be put at the end?
@@SamSchiffer If I try to use the gradient shape it gets the color from value 0 and 1 only since I give in in the Time input the multiply in the end.
I can't wrap my mind around how to get each individual segments. My setup is a bit different, I'm mainly using the bottom part.
I don't really know where to get help for that excepted here but it's kind of hard to get help just by text.
@@Tanathos2you have the shape of your “pie chart” in white at the end, correct? You can take this shape and use it as a mask for the gradient. As in: clamp the mask between 0 and 1, then lerp between the gradient and 0. You sample the gradient with the polar coordinates node to conform it to a circular shape.
@@Samuel-bd1ms If I didn't do something wrong, I clamped the mask, lerped betweet 0 and the gradient sample with the polar coordinates in its time input.
What I get is a radial gradient, from the center out of the circle instead of following the "pie chart" shape.
Thank you both for the help.
Any reason for using subtract instead of multiply for combining the seperate effects?
I'm usually not a fan of multiply, because it makes the AA edges harder in some cases (like when multiplying two values that are less than 1 and greater than 0). In this case it would be fine to use multiply, I think. But would require an extra one minus node to invert the values before multiplying. These days though, I would probably try to combine everything into a single sdf shape before applying AA to give more of a smooth look. Essentially, multiply is ok to use too.
What if I wanted the outside of the ring to have that blur and the inside to be sharp?
dude this is amazing! i used this for my hp gauge and it worked really well! but now i got a new problem that maybe you can help with ? Can we do this...but with a Bar instead? The reason i ask is because i wanted to have a HP bar that grows with segments if i gain more hp.
That's a tough problem, I'm working on the same thing and solved it but am still working on getting it to work right. I have some calculations that you might want to try, but I'm not sure if you'll be able to make anything of them:
combinedIntervalWidth = widthSlope + widthNonSlope
currentCombinedInterval = floor(currentX / (combinedIntervalWidth))
currentIntervalStart = currentCombinedInterval * combinedIntervalWidth
distanceIntoCurrentInterval = currentX - currentIntervalStart
inSlopeSection = distanceIntoCurrentInterval < widthSlope ? 1 : 0
@@SamSchiffer Thank you so much man! ill try what you said! If you ever do get it to work right, maybe that could be an idea for a future video ^_^! again thank you for your time man!
how do I access the attributes through script
SpriteRenderer sr;
...
sr.material.SetFloat("_Radius", 0.3f);
"_Radius" -> would be replaced with any property you want to change.
there's also material.SetColor for colors
How would I get this to show up on my game screen
I can get this to work in the Scene when I play the game it all works properly. For some reason I can't get it to show up in the game window or when i build the game on the canvas. I've got it set to an Image on the canvas.
This is because shader graph doesn’t like to play along with canvases. You have to go into the shader graph and switch to sprite unlit mode I believe.
@@SamSchifferlittle problem here. I turned it into sprite unlit and turned on alpha clipping to remove the background, but there are artefacts like a black ring surrounding the radial bar in the game view but not the scene view. You got any idea how to fix this?
Hey how would i set this up to the player?
Thanks for the tutorial! I was able to make a nice looking crosshair using it. However, I stumbled upon an issue you might have an answer to. I put the shader material on a unity UI Image, and it looks fine in the scene, but as soon as I start the game it disappears (in the game window, it is still visible in scene). It doesn't seem to be a render queue issue. Do you know what might cause this?
This is because Shadergraph has an issue with overlay canvases. You have to go into the shader graph, switch the URP mode to sprite unlit (or unlit, can’t remember right now) and activate alpha clipping, then switch the mode back to what it was originally
@@SamSchiffer Switching the shader graph Universal material to Sprite Unlit fixed the issue! Thank you for your fast reply and informing videos, it helps a ton.
Thats a black magic
im desperately trying and failing to use this tutorial to make my rectangular segmented health bar and its not good.
Hey man, someone else in the comments was/is trying the same thing and I shared my formula for how to basically go about doing that.
combinedIntervalWidth = widthSlope + widthNonSlope
currentCombinedInterval = floor(currentX / (combinedIntervalWidth))
currentIntervalStart = currentCombinedInterval * combinedIntervalWidth
distanceIntoCurrentInterval = currentX - currentIntervalStart
inSlopeSection = distanceIntoCurrentInterval < widthSlope ? 1 : 0
it's not complete and requires some tinkering to get work, but maybe this can supply a foundation for how to go about doing it.
@@SamSchiffer Thanks for the head start. I'll keep taking a crack at it and see if I get it to work.
This guy made what im looking for 4 years ago in this video. Works great with even more functionality than i even need.
This is the link if you've never seen it but i figure it may help give hints as to what is needed based on what variables he's able to set in the editor:
th-cam.com/video/fvr5gfMGezA/w-d-xo.html
@@SamSchiffer Hey thanks i think i figured something out for it to work. Only thing is removing segments but i guess if i cant figure that out i can just code it by fill percentage.
Here is the list of nodes I used to produce stripes:
(UV -> split R) -> Multiply A
(Segment Count + Cons Pi) -> Multiply B
-> Add A, with an offset property as B input
-> Sine
-> Absolute
-> Power with 80 tightening property
-> Blend with the colors blue and black and previous power node into opacity.
-> the blend node into base color.
This works near perfectly as far as looks. Only thing is for some reason in order to get X number of bars, it requires a segment count value of X -.15. Im not sure why this is and maybe u know why since you're more experienced with shaders.
@@GiggityxGamer nice that you got something working! I'm not able to see what exactly is causing the offset issue you're having, sorry.
two millions instructions shader.for that effect? what about the perfs compared to a smple image based solution.
The idea behind this shader is to make progress bars that are dynamic in a way the texture based approach isn’t.
Why did u overcomplicate this so much. Polar coordinate and step is all u need?
Damn they should show this in highschool to explain math.