Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Circular Bar

Author
Message
Kozax
9
Years of Service
User Offline
Joined: 28th Jul 2015
Location: London, UK
Posted: 25th Oct 2015 13:07
Hello,

I would like to create a circular bar to use as health indicator for my character.
What i have in mind looks something like this: http://www.nabito.net/wp-content/uploads/2014/07/progres.png
Can anyone please guide me to the right direction?

Cheers
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 25th Oct 2015 14:41
I've pondered this myself.
The only way I can think to do it is to have 4 quad-circles overlaying the grey circle. You would then reveal the circle by rotating the quads out of the way and hiding them at the end of their 90 degree section.
You also need 2 grey circles to handle the last quad-circle. They need to be sandwiched.

Let me know if you have any luck!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 25th Oct 2015 18:07 Edited at: 25th Oct 2015 18:22
i would use a quarter pre animated progress with 25% means 25 images.
= 4 sprites + text object for the number.

or so
AGK (Steam) V2 Beta .. : Windows 10 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 26th Oct 2015 08:31 Edited at: 26th Oct 2015 08:36
Nice Markus!

[Edit] Added a little variation to Markus' solution....

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Scraggle
Moderator
21
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 26th Oct 2015 08:32
I do this exact thing in Cryptoglyphs for the bonus timer.
It the circle reduces in sections but resets smoothly, which would simulate what you are trying to achieve.

The way I do it is to create a single section of the circle, place it where I want it and then offset the centre of rotation to the centre of the circle. Then clone the sprite several times, rotating each one so that it creates a complete circle.

Then when you want to reduce or increase the health bar you use a tween to interpolate the rotation of ALL the sections. Each section is interpolated to rotate from its starting position to the end position. So for example, if you want to display 75% health, each section of the health bar is interpolated to rotate 75% towards it's maximum. They overlap each other, obviously, so you could only use a flat coloured image but for the most part that is what you want anyway.

The only other hurdle is at the extreme when all sections rotate beyond the scope of the "wheel". For that, I have grabbed an image of the screen and a place a sprite of it over the top of the sections of health bar which hides them perfectly.

In the videos, on the Cryptoglyphs page you can see the bonus wheel being reduced incrementally. I will knock up a video when I get home of it smoothly resetting.

Give me a shout if you need any other info.

AGK V2 user - Tier 1 (mostly)

Login to post a reply

Server time is: 2024-09-29 07:30:17
Your offset time is: 2024-09-29 07:30:17