How to Make Circular Progress Bar(or Rounded Rectangle)

How to Make Circular Progress Bar?

Step 0.

Circular bar is cool to look, but find angle(or percentage) per pixel in runtime is costly. Especially rounded tip(or rectangle) is worse.

So, we need...
 - Texture that has angle per pixel from center.
 - The value must have sufficient resolution. 2 byte(1/65536) will be OK.
 - Must support various shapes.

Step 1. Prepare angle lookup-texture and diffuse texture.

Prepare angle lookup-texture and diffuse texture. These are that textures that I made. I'll let you know in another post how I made that textures with C#.

Step 2. Import Textures.

To keep original value, change lookup texture properties just like a screen shot below.

Step 3. Material

This is a material that work with the lookup textures.
It is Unreal Engine 4 material but you can make it Unity version easily.
In most cases, this is sufficient, the improved version will be shown in another post.

Step 4. Setup widget with UI material

There are many examples on google. I will skip this step.

Result

This screen is an improved version of the material, but we can make some of them now.

You can see it on youtube :
https://www.youtube.com/watch?v=RqJo53Fyms8

Related posts :
How to make circular progress bar(2nd)
c# code to generate a custom texture