How to make a loading bar using canvas.

[Kcee]

Could someone please teach me to make a loading bar using canvas instead of animated sprites.

[lcl]

Are you familiar with the canvas drawing functions (erase, setpen, moveto, lineto, etc.)? I'm asking just so that I know if I need to explain them as well, or just the math.

[Kcee]

I've never used a canvas, so I guess I'll need a lot of explanation. Thanks in advance.

[schnellboot]

At what point do you need a loading screen in gE anyway?

[schnellboot]

Check this out and ask if needed.

[Kcee]

Thanks a bunch, that will do.

[SarmadRabbani]

You can make a progress or health bar using these type of sprites. I made one in my game, probably because I don't know canvas till now. But its really handy.

Make an actor,"HealthBar".
In HealthBar>Draw Actor>Script

Code: Select all

// making health bar
switch(playerHealth) // player's Health,global or actor variable,depends
{
case 0://no health or minimum health
animpos = 0;
break;

case 10:
animpos = 1;
break;

case 20:
animpos = 2;
break;

case 30:
animpos = 3;
break;

case 40:
animpos = 4;
break;

case 50:
animpos = 5;
break;

case 60:
animpos = 6;
break;

case 70:
animpos = 7:
break;

case 80:
animpos = 8;
break;

case 90:
animpos = 9;
break;

case 100:
animpos  = 10;
break;
}


Now this is a sample for an animation(health bar) containing 11 frames. The More the frames the more the realistic effect. For Example you make an animation of 100 frames plus a frame for no health,total 101 frames, then you would need a more lengthy coding.
The long and short of it is that this method is easy but lengthy, whereas canvas is advanced and accurate.

Thanks !!

[Kcee]

I actually wanted the code to be less lengthy but that is also a good but hard way to make a loading bar. Using a canvas aIso gives you the ability to tweak it to your satisfaction like increasing or reducing the size and time it takes to load.

[lcl]

@SarmadRabbani: You're overthinking the code part. You can actually manage all that with only one line of code.

Code: Select all

animpos = floor(playerHealth / (double)(nframes - 1));

floor is a function that rounds down to the nearest integer (for example 8.2, 8.5 and 8.9 will all be rounded down to 8 ).
nframes is the number of frames in the actor's current animation. In this case it will be 11, but because animpos numbers start from 0 (animpos 0 = frame 1, animpos 9 = frame 10) we need to subtract 1 from the divisor.

However, that code will only work if maximum health is 100, and the animation has 11 frames. Also, it will be accurate only if playerHealth is always divisible by ten. Both problems are present in your original code as well, though the latter problem is a little different. If the player's health is 97 for example, the code above would set the animation to frame 9, which should be showing only when the health is 90. With your original code it's the other way around, 91 hp would still show as 100, and what if health skipped over one of the tens? If health went from 70 to 55 for example, your code would still show 70, because the value is not divisible by 10.

A better solution, one that could easily be used with any health maximum and with an animation having any amount of frames would be to calculate a health percentage and use that to calculate the correct animpos.

Code: Select all

double healthMax = 100.0;
double healthPercent = playerHealth / (double)healthMax;

animpos = round((nframes - 1) * (double)healthPercent);

This time round is used instead of floor, and it behaves like normal rounding to nearest integer (for example 8.2 would be rounded to 8, and 8.5 and 8.9 would be rounded to 9). This is for making the animation more accurately represent the player's actual health. Now, if the animation is still the same one with 11 frames, 97 hp would show a full bar, and 91 hp would show a 90% bar.

So of course, the health bar is still not going to be completely accurate, because that's impossible unless there's a frame in the animation for every possible percentage. But it will always show the frame that is closest to the actual player health.

And if you wanted to use the same animation with a game with different maximum health, all you'd have to do is to change the value of healthMax.

[SarmadRabbani]

lcl that was really helpful!!

But I wanted to ask how did you manage to derive that "Formula" or whatever you may call it. I want to make my code less lengthy but unfortunately I dont know, How to??

[lcl]

lcl that was really helpful!!

No problem

But I wanted to ask how did you manage to derive that "Formula" or whatever you may call it. I want to make my code less lengthy but unfortunately I dont know, How to??

Well, the more you program, the more your mind gets accustomed to thinking in formulas rather than rows of "if, else"s or "switch"es.

The first formula is actually pretty easy to come up with, if you take a look at your original code. Take a look at your switch cases. In every single one of those you're actually setting the animpos equal to playerHealth / 10, right? Like in case 10, you're setting it to one (10 / 10 = 1), in case 30, you're setting it to three (30 / 10 = 3), and so on. So just by looking at those cases it's pretty easy to notice that there's a pattern, a formula in there. Also, if you ever find yourself making a long switch-case structure like that one, where you're just setting the same variable to different values depending on the case, stop for a second and think about what you're doing. Because usually in those situations you're writing an unnecessarily long, and what's even worse, a much less dynamic code than what you could. So stop for a second and try to find the pattern behind what you're doing. In that case it was the playerHealth / 10, which, as I said, one can easily pick up from your code by just looking at it the way I just described.

The second formula is just a very basic percentage calculation, which you'll probably find useful in many other cases too. In a nutshell, that's what you do whenever you have to "fit" one value of a range of a specific width (width of range = number of units in the range) into another range of a different width.

To calculate the width of a range you take the minimum value of the range, and subtract it from the maximum value of the range. If range is 0 - 50, it's width is 50 - 0 = 50. If range is 25 - 100, it's width is 100 - 25 = 75. Let's look at the problem from that point of view.

So, the problem is: How can I make the health bar animation show how much health the player has?
Here, the value that has to be "fit" in to a new range is the variable playerHealth's value, that has a range from 0 to maximum health, which in the original case was 100. So, the range is 0 - 100, and the width of the range is 100 - 0 = 100.
And the range we have to fit the value is the frame numbers from 0 to the top, which in the original case was 10. So, the range is 0 - 10, and the width of the range is 10 - 0 = 10.

Now we have everything we need for finding out what animpos best represents what values of playerHealth.

Here are the steps we have to take:

Step 1: Calculate the percentage of the value from the first range. (So, the percentage of current value of playerHealth in it's range of 0 - 100.)
Step 2: Multiply the second range's width with the percentage calculated in the previous step, and round the outcome to find the corresponding value in the second range (the correct animpos).
Step 3: Assign the result of the calculation in the previous step to the health bar's animpos.

Step 1:

For calculating a percentage of a value in a range, you divide the current value with the width of the range. So, divide playerHealth with the maximum health. Let's see what kind of values this gives us.
If playerHealth is 100: 100 / 100 = 1.0
If playerHealth is 90: 90 / 100 = 0.9
If playerHealth is 27: 27 / 100 = 0.27
If playerHealth is 0: 0 / 100 = 0.0
So, we see that the calculation only gives us values between 0 and 1. Any value between that range is a factor that we can use to find the corresponding value in another range.
This step in code:


Code: Select all

double healthPercent = playerHealth / 100.0;


This is the raw calculation, but a more readable version is to name the divisor value, so that there's no "magic numbers" in the code.


Code: Select all

double healthMax = 100.0;
double healthPercent = playerHealth / (double)healthMax;

Step 2:

Now we have to multiply the range of the animpos with the healthPercentage, and round the result to the closest integer value.
For the sake of clarity, let's make one more local variable, and integer variable called healthAnimPos and store the result of the calculation in there.
This step in code:


Code: Select all

int healthAnimPos = round((nframes - 1) * (double)healthPercent);

Step 3:

Now we just assign the result of the calculation to animpos.
This step in code:


Code: Select all

animpos = healthAnimPos;

And that's it! Let's go through the calculation with an example value. Let's decide that playerHealth = 63, and the animation still has 11 frames (frames 0 - 10).

healthMax will still be 100.
When playerHealth is 63, healthPercent will get the value of:

playerHealth / healthMax
= 63 / 100
= 0.63.

And then healthAnimPos will get the value of:

round((nframes - 1) * healthPercent)
= round((11 - 1) * 0.63)
= round(10 * 0.63)
= round(6.3)
= 6

And now, animpos will get the value of:

healthAnimPos
= 6.

You can go the above test through with different values to see that it always gives the right answer.
This code will work for any health range starting from 0, and for an animation with any number of frames.

Sorry for the wall of text xD

[SarmadRabbani]

Thanks, Lcl !!

I pretty much got the idea. I will read it more to understand the basic concept.

And one more thing, I was wondering, just now, Why not make a post in which newbies like me can learn gE programming from you guys ??
I know that gE programming is C programming,I pretty much know C, but the reason is same I want to learn new concepts like HERE.

Thanks again!!! +1

[Kcee]

That helped me a lot too.

[Kcee]

There is infact a post containing all GE programming keywords and functionshttp://game-editor.com/forum/viewtopic.php?f=27&t=6834&p=48846&hilit=c+keywords+and+functions#p48846.

[SarmadRabbani]

There is infact a post containing all GE programming keywords and functionshttp://game-editor.com/forum/viewtopic.php?f=27&t=6834&p=48846&hilit=c+keywords+and+functions#p48846.

I checked the post, it is really nice to see members helping each other