Author Topic: Circular progress bar with rounded corners  (Read 2472 times)

Aastha

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 18
    • View Profile
Circular progress bar with rounded corners
« on: October 18, 2015, 01:07:58 PM »
Hi,
I am using circular progress bar in my game and for that I am using filled sprite but the issue is that I need the progress bar corners to be rounded.

Please refer to the screenshot for reference.

Thanks in advance

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Circular progress bar with rounded corners
« Reply #1 on: October 18, 2015, 06:51:44 PM »
Place a pair of circles on top where the cut edges are.

Aastha

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 18
    • View Profile
Re: Circular progress bar with rounded corners
« Reply #2 on: October 18, 2015, 09:32:50 PM »
In that case I have to move the circles along with progress of the progress bar?

diederik

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 2
  • Posts: 31
    • View Profile
Re: Circular progress bar with rounded corners
« Reply #3 on: October 19, 2015, 03:20:14 AM »
Hi Aastha,

Yes you have to move/position those manually. Maybe you can just adjust the the pivot of the circle object to be in the center and then just rotate it through script according to the progress of the bar. This is a bit easier than position on a circle and would look a bit better even.
But to be honest this will not give you the great result you are looking for. My initial thought was just to 'not want it to be rounded'. ;)
(Edit: This might not even work at all since the circle would have to change color!)

You could always consider not using the progress bar but just use quite a lot of sprites and just switch/animate between those.
You can add all the roundness and effects you want and you might get away with only using 16 or 32 sprites for 'kind of smoothlooking' effect.

Good luck!

Diederik / Xform