Jaggedness on circular spinner

Questions & Answers
1

Hey Community,

About two weeks ago I had to make a circular progress bar that acted as a timer for a trivia game. Naturally, I browsed the unity answers first and found this solution:

This solution worked great up until a couple of days ago. My clients felt the circular timer didn’t draw enough attention to itself when the trivia round was counting down. So, one of their suggestions was to make the circular timer a bit thicker so it would be more dominate in the scene. So, I said sure that’s no problem. I doubled the size of the circular spinner and now this clear jaggedness/corrosion is visible on the circular timer. (Examples below) This is a big no-no since clients only notice visual things they will realize this and asked for it to be fixed.

First off, I must admit I couldn’t for the life of me figure out how this circular spinner works. I understand in the script that I send it a constant and variable parameter and based off of those two parameters the spinner will fill up or empty depending on how I want it to act. This is part of my problem. If I understood how this worked I might be able to tweak it so I can get a smooth edge on the circular timer.

So, my question is does anyone know how I can make the edge much more smoother or possibly have another solution to how I can make a circular spinner based on time? (9 second rounds). I was thinking of ways to make a circular spinner and I could only think of having multiple gameobjects arranged in a circular and turning them off one by one as time passes their interval(mathematically). I never implemented this b/c I wasn’t sure how having about 360 gameobjects would effect performance nor have I had the time to explore this option.

Here are the examples of the jaggedness. It’s not as clear in these images but when the game is playing on a kiosk with 1920x1080 resolution its pretty clear.

10108-circularspinner1.png

10109-circularspinner2.png

http://i.imgur.com/LTuM5LN.png(Wasn’t allowed more attachments)

Any help is appreciated!! Thank you very much! If any further explanation is needed let me know.

Sincerely,

Ethan

2

Alternate way to do a spinner:

http://answers.unity3d.com/questions/394850/make-a-circular-progress-bar-that-changes-state-up.html

3

Of course the jaggies come because the solution you’re using uses the alpha channel for “cutting” the image rather than as actual alpha - which means you can’t use alpha pixel blending.

You can fake it some if you make the image too large for the object and therefor let it shrink the image down when you apply it.

Or you can make the object you’re using in to three layers:

Bottom layer: The dark brown color (IE the progress background)
Middle layer: The part that shows progress (blue in your example)
Top layer: All the rest of the dressing with the progress area punched out.

The middle layer would then need to be a bit wider than the punched out area so it blends well.

Only the middle layer will have that shader. The top can be a “regular” image with antialiasing through alpha blending.