Exp bar percentage code

Unity Engine
1

I have implemented a skill system into my game where each skill levels up individually (so basically Skyrim) but I am having trouble making a progress bar for the skill. I want the bar to fill up by the percent that the skill has increased. Here is the code I currently have:

public void UpdateProgressBar()
    {
        skillBlock.GetComponent<SkillSlot>().UpdateProgressBar(currentXP/expToNextLevel * 100);
    }

and on the UI element that controls the bar itself I have:

public void UpdateProgressBar(int progress)
    {
        expBar.sizeDelta = new Vector2(progress, expBar.sizeDelta.y);
    }

Nothing complicated but the bar never shows up, it just remains blank. I tried other ways before, like using “expToNextLevel - currentXP” and that made the bar work totally fine (with the exception that the bar went down instead of up which is what I want) so I know its not a problem with the bar itself. Does anyone know how to make the bar appear properly with the percentage of the skill?
Thanks all!

also, side question, I am using the Unity tutorials for the health bar system to create these bars. It works fine but instead of it going from left to right like I want, the bar stretches from the middle. Is there an easy way to change this? I’ll do some research on this one so if its not an easy answer don’t worry about it.

2

Use floating point, not integer. e.g., 400/800 = 0. 400.0/800.0 = 0.5.

–Eric

3

For your side question, try setting the pivot to 0 for ‘x’.

Additional options I’ve used or seen used include:

  • using the fill option of an image to show the percentage value
  • using a slider (takes a few small modifications to work).
1 Like
4

Ah that makes more sense. It would be more flexible. How do I convert an int to a float? Can I just use “currentXP.f” and do that for each variable?

5

Interesting! I’ll try them and see what works, thanks!

6 
float asFloat = (float) currentXP;

Note that for things like XP, you want to keep storing the value as an int, and only cast to float when you’re displaying it. This is due to float being inherently slightly inaccurate - after all, there’s an infinite number of possible values between 0 and 1, and your computer can’t differentiate between all of those.

7

Just cast the first int to a float :

UpdateProgressBar((float) currentXP/expToNextLevel * 100);
8

I may end up using a code just like this in the function as a temporary variable. I definitely don’t want to keep track of exp with floats permanently, I just need it for display purposes. Thanks for the advise!

9

This looks like a pretty solid way to go. My only difficulty with it is the two functions I listed originally are on two separate scripts. So should I get the float in the first script and pass that to the script that updates the bar, or should I pass the ints to the bar script and do the math there? The way its written above looks like it will work if everything is in the same script.

Thanks for the help!

10

That depends very much on how your code is structured. :slight_smile:

However, as your 2nd script appears to be setting the actual display, it would seem reasonable for it to offer either:

  • a float (say representing a scale of 0->1)
    or
  • a “min”, “max” and “current” values of the same type as each other (e.g. all ints, or all floats).
11

Makes sense!

I finally got to try the code out and your suggestion works perfectly! I added thr (float) to the first code and just changed the int to float in the script that accepts the data. Workin just fine!

I have 1 tiny problem where when I level up a skill, the bar updates as it should but since the math is based off currentXP/expToNextLevel, the bar starts off half way full. I guess really I want the bar to be the percent of the previous expToNextLevel/expToNextLevel. Is there a way to do that without making a new variable, or should I just make a new variable?

I just tried:

((float) ((currentXP - prevToNextLevel) / (expToNextLevel - prevToNextLevel)) * 100);

But the bar does not show up so I must be doing aomething wrong. Not sure what though

12

It worked! Set x to 0, kept y at 0.5 and its all working. Thanks!

13

You’re still doing integer math. You’re casting the result of the integer division to a float, but that’s useless.

–Eric

14

Ah gotcha. I fixed it, just changed both sides to floats. Thanks so much for the help!