Page 1 of 1

How do I show a progress bar based on level

PostPosted: Mon Mar 10, 2014 5:26 pm
by Allardje
Hi all!

I have a little question.

I have some categories in my game which all have their own progress.

So categorie one has 10 levels to complete.
Categorie two has 20 levels to complete etc.

On my start screen where you choose the categorie i want to have progress bars.
So if a player is on level 4 of categorie one the progress bar has to be filled 40%.

If a player is on level 3 at categorie two the bar has to be filled 15%.

Any tips on how to create this?

The level progress is saved in webstorages as the number itself.. So
categorie 1 level 1 : "cat1" = 1
categorie 2 level 4 : "cat2" = 4

Thanks in advance!

Re: How do I show a progress bar based on level

PostPosted: Mon Mar 10, 2014 5:32 pm
by Manley23
@Allardje - this should be pretty simple and very similar to health bars. I know there are many forum posts and tutorials on health bars. Like this: https://www.scirra.com/tutorials/447/health-bar

But essentially, I think you would just change the width of your progress bar sprite based upon the % progress.

Re: How do I show a progress bar based on level

PostPosted: Tue Mar 11, 2014 5:48 pm
by Allardje
Thanks for your awnser.

I will try this soon once i get to that point again!

Re: How do I show a progress bar based on level

PostPosted: Mon Mar 17, 2014 1:45 pm
by Allardje
So.. I'm at this point again and indeed i am thinking of setting the width to the % of progress.

Now i need the right line to reach this.
I am not getting my code to work.

What i need to do is:
Current progress amount / amount of total levels * 100

So lets say if i got 144 levels and i'm at level 27 it would be:
27/144*100 = 18.75%

Than i set the width of my object to the percentage which in this case would be 18(.75)%

Now as action i use:
On start of layout : Set global value
Than i got this problem where my code doens't want to work..
I need to do the math in one line with 2 global variables.. I just dont now how to get my line working.

What it has to be:
GlobalVariable1 "dividing by" GlobalVariable2 "times" 100

Can any one tell me how to get that line to work in my Set value as action?

Also my set width would not work with: 20%, 12% etc..?

Thanks in advance!

Re: How do I show a progress bar based on level

PostPosted: Mon Mar 17, 2014 6:49 pm
by Manley23
@Allardje - without reinventing the wheel, how about looking at this other tutorial: https://www.scirra.com/tutorials/449/cr ... -healthbar

Re: How do I show a progress bar based on level

PostPosted: Mon Mar 17, 2014 9:59 pm
by Allardje
Hi,

Thanks i did look at it but somehow i forget to use the background for the bar..

No i did have the background but ye.. Background.. Not the object :)

Got it to work now!

It is indeed a empty progress bar and the filler.

Than the math i did in my previous post:
27/144*100 But than as

Filler > Set width:
(progress/totallevels)*progressbackground.Width

Thanks!!