How do I make a XP bar?

0 favourites
  • 8 posts
From the Asset Store
Custom animated Health Bar - check youtube video to make it yourself
  • OK, really simple: you have the XP amount, and the MAXXP amount, the bar follows the progress, when XP > MAXXP, player levels up, and the bar is reset. But somehow it doesn't work for me...the XP bar tutorial on Scirra's site doesn't cover the situation when you level up, it just has the same amount of XP and MAXXP, it doesn't add up anything in the process. In my example, normally the XP amount stays, for example at 100, and the MAXXP amount then changes to 200, that means that the bar is stuck halfway of the goal. So I tried this: adding a new variable, which gathers the XP in the same way and is set 0 when player levels up, and then works its way up to MAXXP, etc etc...but the bar does not work properly, as it reaches MAXXP it's usually stuck somewhere in the middle...meaning I'm most probably doing something wrong....I've also tried experimenting with the bar sprite width, but nothing good has come out of what I need is the proper behavior of the XP bar, that it grows gradually and follows the XP and MAXXP amounts correctly. Thanks in forward!

  • Hmm this is a really good question....Thanks for asking it....let me have a little think...

    First things first..

    You need to factor in an Level CAP....

    What i mean is a hard limit on the number of levels the player is allowed to have..

    eg: 80 or 100 levels total

    If you try to calculate anything without factoring in a level cap it wont work properly at all

    This would also mean that you need a HARD limit on XP ...

    say 250,000 or something

    The reason for this.... is that without a hard limit any calculations you make will be compounding a problem..

    By limiting the XP to a Hard can calculate the players current XP as a percentage of the available XP in the game..

    which could also be a problem if you have unlimited enemies or xp this would throw out any calculations

    The width adjustment of your XPBAR would at best be a guess if you dont have a hard limit on your XP that the player can earn.

    So first i would make a choice as to having unlimited XP levels or hard capped xp levels..

    if you dont hard cap your xp then you may not be able to accurately determine the width of your XPBAR pixel adjustment per level increase..

    If you do a hard capped level you can easily calculate the pixel width adjustment of your XPBAR

    by expressing it as a percentage of the entire XP earned divided by the Ratio of MAXXP to XPBAR overall width.

    I know its very easier for you to just make a capx to show this...but understanding why is good too

    This way more people can see how its done...which is what these forums are about...everyone learns..

    I dont claim to know the only way to do this and yes..i could be way off and a much simpler method exists

    but your question is very specific...its not just a simple health bar ..what you asked for is a calibrated display using a fixed width Bar to represent multiple levels of variance in values that are mostly arbitrary...

    its possible...but your specific request is slightly more complex than you might think..

    lets get into it.

    In addition to knowing the HARD LIMIT values of your earnable XP

    I would use 2 variables to keep track of the XP earned in the game....


    " XP_Total"

    In addition to your MAXXP variable

    You also need to know the absolute, precise and constant value of your XPBAR screen width

    what i mean here is the overall unchanging width of the border of the Bar even if its not visible ..

    you need a fixed width for this on screen..

    Only the XPBAR itself changes width but we need to know the overall dimensions it its FULL or Maxxed initial width.

    The MAXXP values would need to be fixed and set in relation the XP_TOTAL and the Total earnable XP


    The XP Bar would be connected to XP_Current and this is what you would use only to represent the change in the Ingame XP increase....when it reaches the MAX setting that you determine through the XP_TOTAL..

    Eg: 200 for level 1

    400 for level 2 etc

    or whatever you want each level to be..

    I would just make a comment in your Event sheet to keep in mind the differences in Level increase..

    So ....when your player gains XP you would add the XP earned to the "XP_Current" and the "XP_TOTAL" at the same time

    ..but seeing as only the Bar's size is determined by XP_Current...

    The next step is to check XP_Total..when XP_Total is at 200 or 400 or whatever you want to change a level

    then you would reset XP_Current and reset your bar ...


    .. if the XP bar width is always set to XP_Current it should auto update...

    You can then place any level up effects/events that you like as Actions

    XP_Total does not reset just tallys and keeps track of how much the player has over all and never resets....

    This way you can still keep track of the total amount of XP earned and relate that to the Hard capped XP limit..

    and have events occur for that if you wish..

    In regard to increasing the amount of XP per level...

    You need to scale the bar with according to a ration of pixels to value...

    so what i mean is....

    If the bar is say 1000 pixels width over all and your MAX XP is 200 for level 1 the ratio of bar width adjustment is based on that ratio for each level

    (Keeping in mind a "Ratio" is a rounded down representation of integer value...Look up "Integer" in the manual if you need to know how to do that..)

    The following is an example but keep in mind your values will be different for your Game

    For level 1 ....

    1000(XP BAR WIDTH in pixels)


    200(XP MAX VALUE lvl 1)

    is going to break down to 5:1 pixels per XP point

    So for every XP point gained your XP bar width would increase 5 pixels

    and level 2 1000(XP BAR WIDTH in pixels) to 400(XP MAX VALUE lvl2) is going to break down to 5:2 pixels per XP point

    in this case every XP point gained your XP bar width would increase 2.5 pixels not really possible so you would make the XP width change 1 pixel with every 2 points of XP...etc etc

    Does that make sense?

    If you keep your level increase "MAXXP" to percentages or decimal amounts in relation to the fixed over all width of your XP BAR and or the HARD capped XP limit .... it will be much easier calculating the width adjustment each level

    Ideally this would all be done with a single event to minimize processor use in game..

    but ill leave that up to you to figure out

    the key to it is RATIO's but it needs to be relative to your XP BAR overall width..

    hope that helps

    There may be other ways...but using ratios is really what i think it comes down to...a ratio is a simpler way to express two or more values and their relation to each other numerically..

    so a simpler way of saying all that above would be..

    level 1 XP gained =1 ---> XPBAR pixel width adjustment = 5 Ratio = 5:1

    level 2 XP gained = 1 ---> XPBAR pixel width adjustment = 2.5 Ratio = 5:2

    and so on according to your Level MAXXP value...

    The value of the XPBAR width remains a constant because its a fixed maximum width overall.

    Only the amount that The XPBAR width adjusts changes for each level

    of course it really does depend on how much your MAXXP value changes per level...

    if its a fixed increase or an arbitrary amount you need a different calculation..

    a sample calculation would be


    multiplied by the XP gained / XPBAR max width

    = XPBAR width adjustment per level

    and to code this as an event ...

    condition......On XP gained--->

    action..... set XPBAR.width to (XPBAR.width +MAXXP(perlevel)/XPBAR.Maxwidth))

    where XPBAR.width is the actual bar width and XPBAR.Maxwidth is the overall screen maximum width of the boundary of the XPBAR...

    this doesnt allow for XP gains that are over your Level max and doesnt really take into consideration the Total XP...

    it really needs to be done level by level...with a level cap...for example do you have a LEVEL 80 levels or so...

    this would affect the over all calculation as well and should be factored in before you do any calculations

    saying all of that....

    ill try to get onto that capx for you and upload it so other people can use it as well......

    please be patient and try out a few experiments yourself...

    but im pretty sure that Hard capping the XP is the best way to start...

  • I can't say I understand everything 100% :/

    I've never worked with ratio...also, my values are not meant to be that XP bar is 292 in width, and the MAXXP values are 100, 250, 500, etc. so a different amount is added between levels

    maybe a small capx would help? you've said that it could be done in one event...hope I'm not bothering you

  • Do a bar the same proportional value as the max xp. Set instance variables for max xp and base xp bar and then each time you level up, increase the bar to the proper size. Theres a hp bar tutorial that could get you started. I dont know if that works but me too I have to do something similar and I was thinking doing it that way.

    Hope that works if not let us know.


  • This is how I am doing it in my game.

    The set width event is (maximum bar size in pixels/100)*percentage to next level calculated above it

    This is my level up event

    It's rudimentary but it works. I will be replacing the 1.5 multiplier though in the future with an array of set experience requirements.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • This is how I am doing it in my game.

    The set width event is (maximum bar size in pixels/100)*percentage to next level calculated above it

    This is my level up event

    It's rudimentary but it works. I will be replacing the 1.5 multiplier though in the future with an array of set experience requirements.

    could you show a noob how to make the percent at the beginning? would love to implement this in my simple paper mario style game.

  • dmurphy

    I see that you are resetting the XP variable to Zero when Player Level Up. Is that how character Leveling up usually works in game? If so, then with your logic I just have to set my XP variable to ZERO and I am done!!

    Right now this is how I have set up each Level Ups:

    LVL ------------------>XP Needed for Next Level[

    1 ------------------>200

    2 ------------------>600

    3 ------------------>1200

    4 ------------------>2000

    5 ------------------>3000



    When my character levels up from 1 to 2, I am not resetting the XP gained (eg: current XP =210, XP Needed for Level 3 =600). Because the XP is 210, the XP Bar is already half filled.

    So my question is, in a RPG type game, do we reset the XP to ZERO and the player has to score all 600 points to reach the next level? Or do we have to just score the remaining 600-210 points? Is there a calculation to keep the XP same and still adjust the XP bar accordingly?

    EDIT: Alright! I decided to reset the XP to Zero. It makes total sense to start from Zero than only score remaining point

    I am all set to move ahead now. Thanks dmurphy

  • I believe it's custom to use an XP table. The XP bar thingy is then easy to implement using the required XP for the current level and required XP for the next.

    XP bar completion percentage = (currentXP - XPforCurrentLevel) / (XPforNextLevel - XPforCurrentLevel)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)