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 / Radial/Ring/Circle Progress Chart/Timer

Author
Message
Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 18th Jun 2017 13:08 Edited at: 18th Jun 2017 13:25
In an app I'm giving a new makeover I wanted to be able to display a radial progress timer that counts down the number of days, hours, minutes and seconds to the next action the user can take and found this site that creates 100's of images depending on the number of bars, i.e. an image for each percentage/degree of the bar and then the same again for each colour bar etc.

http://hmaidasani.github.io/RadialChartImageGenerator/

This seemed like a good option but it meant editing 100's of images to get rid of background colours and it wasn't always possible to remove it completely so I thought I'd have a look at creating one sprite (a circle) and using a for next loop to create that single sprite 360 times around the perimeter of the circle and have each sprite switch between visible and invisible based on the number of seconds passed etc.

Here's the code to do this using the mathematical functions sin and cos



This is how a user from another forum and development tool explains how to constrain a sprite around a perimeter

Constrain its X position to AAA*sin(Timer()*BBB)+CCC
Constrain its Y position to AAA*cos(Timer()*BBB)+CCC

AAA = radius of circle
BBB = speed of movement
CCC = centre point of the circle

This will have one sprite moving around a circle perimeter at whatever speed you set (BBB). I used this to position the 360 sprites around the perimeter.

I've attached a circle image I created quickly in Pixelmator but because the edge is faded it may be noticeable when they are overlapped, especially if the sprites are large so I'd recommend creating your own version

Here's a screenshot of the output

Attachments

Login to view attachments
JohnnyMeek
6
Years of Service
User Offline
Joined: 23rd Apr 2013
Location: Slovenia
Posted: 18th Jun 2017 13:13
I made something similar a few months ago..

https://forum.thegamecreators.com/thread/217856

Kevin Cross
15
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 18th Jun 2017 13:23 Edited at: 18th Jun 2017 13:28
Cool but I must have missed that one. I did do a search on the forum too before I started looking elsewhere and didn't get any useful results (never found the search results that great here) so that's why I thought I'd share it. I remembered the formula mentioned above from another forum I was an active member on so wanted to see if I could use it. I need to modify the code in the app I want to use it in so that it will count down and will look at putting it in a function like your version as I could have dozens of these on the screen at the same time.
Phaelax
DBPro Master
16
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 18th Jun 2017 15:48
Instead of using timer(), I would just let the user set the completeness of the circle by setting a value between 0 and 1. I feel that would make it more adaptable to any situation.

I've been wanting something like this for awhile now, just never had a solid idea on how to attempt it.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 18th Jun 2017 19:05 Edited at: 30th Sep 2017 17:07
Hi
here is my solution to this problem and it's a shader of course

Masked Progress Bar Shader

Preview


If you miss the rounded start and end, it's just because i was to lazy for it... you can create any progress bar/health globe or what ever with it.
Jack
14
Years of Service
User Offline
Joined: 4th Oct 2004
Location: [Germany]
Posted: 18th Jun 2017 19:38

Quote: "here is my solution to this problem and it's a shader of course "

Really nice!
This was my next thing on the list after 2d primitives with borders


Hava a coco...
https://www.youtube.com/watch?v=m_-Qtz70_z4

[/url]
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 18th Jun 2017 20:25 Edited at: 30th Sep 2017 17:07
Great, thanks for that
Sometimes I really get revered as jambo here but I think there is a a real jambo somewhere here ^^

Quote: "my next thing on the list"

What are you planing ?

Login to post a reply

Server time is: 2019-07-18 11:05:30
Your offset time is: 2019-07-18 11:05:30