Sharpness problem - pixelated ui elements in circle Slider.


I’m working on Brick Breaker just for learning purpose.
I want to make round timer to represent duration of given bonus. The question is how to make it look sharp? I did a lot of searching for answer on the Internet before asking here but found nothing.

Currently is looking like that(if you enlarge the screenshot you will see that the circles doesn’t look very well…:
Red circle is a Slider with circle graphic 512X512.
White one is just UI Image(1024X1024) with fill method Radial.

Do you have any tips or ideas, how to make it look sharp?
Maybe my whole aproach is wrong?

Best Regards,

This could have a few reasons:

  1. Thats just the way the image looks (unlikely)
  2. You have imported it with the wrong pixel size. Make sure the importsize is equal or larger than the larger side of your image.
  3. The whole object is just very small. In that case make the UI elements Widht and Hight larger. Say 10x. But also scale down the object by 10x in its transform. This works similarly when writing tiny texts. Mabye it works here too.

Good luck :slight_smile: