Unity + circular progress bars

Tuism

So I have this weird little problem. I'm trying to make
1) a circular progress bar (very, very simple)
2) that is in world space and not on UI canvas
3) that has transparency that can be altered.

I got a transparent progress bar with the cutout shader (unfortunately it's Legacy/Transparent/Cutout/Specular and therefore expensive shader but I don't know how to write shaders so this'll have to do). But then I can't alter its transparency. If I can get a cutout shader that also does transparency, GREAT. But I have no idea how that works.

I tried unity UI circular bar thing and then tried to resize it according to screen size and world object size but the maths across multiple device sizes proved to be too difficult for my brain to handle.

SURELY this can't be that hard??? Does anyone have any experience on this?

This is what it looks like. Literally dead simple:

Rigormortis

Hey @Tuism,

I had a quick look and this tutorial seems to go through all the appropriate steps. The main thing you are looking for is the radial fill on the images.



Speaking to point 2. Everything related to Unity UI has to be on a canvas. You have to move the canvas itself(or the child objects) to where they need to be in the world. You also need to set the canvas to render in world space. I believe it defaults to screen space.

Tuism

Yeah I have done radial fill in canvas space - BUT:

I currently have everything in the game built in screen space, and to change everything to world space would be a huge mission. ALSO, having the UI in world space brings new problems which I couldn't sidestep easily........

ACTUALLY

I JUST REALISED I CAN MAKE A SECOND CANVAS AND DO THE RADIAL FILL UI ON THAT AND LEAVE ALL THE OTHER UI UNTOUCHED

YESSSSS LEMME TRY THAT

Elyaradine

Oooh, cool video. I didn't know you could do it that way -- way faster than what I've done in the past.

I've attached linked the way that I typically do it, though it has its own downsides. (It uses a custom mesh that's a circle with 64 subdivisions, which could be too much or too little depending on its scale on screen.)

Update its progress using

material.SetFloat("_Progress", newValue);

I'm mainly linking this because it's transparent, but has that cutout, progress-bar-like behaviour that it seems you're looking for.

https://www.dropbox.com/s/551jnxzkyjg4ns8/CircleProgress.unitypackage?dl=0

Rigormortis

I JUST REALISED I CAN MAKE A SECOND CANVAS AND DO THE RADIAL FILL UI ON THAT AND LEAVE ALL THE OTHER UI UNTOUCHED

Indeed. That will work fine. I believe it is intended to work like that from Unity's point of view.

Tuism

Yarp I got it to do what I needed it to do without messing with shaders and cutout whatevers, which was hacky as hell because the edges would inevitably go wonky due to cutout thing... Yes I could have gone with zero feathered edges but meh, this works. YAY :D