Bar with same size and different values??

0 favourites
  • 6 posts
From the Asset Store
220 Food Sprites in 16x16 pixel size. Perfect for items for a retro style game.
  • Ok, this has being really tricky to me, since I'm not very good at math.

    I have several characters for the player to choose which one to play with. Each of the characters have a different amount of energy. In the screen I have a bar representing the character energy, and I want this bar to decrease it's width as the character energy decreases. The energy decreases at every second.

    If the character have 10 of energy, it means that his energy will end quick. And if a character have, lets say, 100 of energy, it means he will last a little longer.

    What I am not being able to do is to make the bar behave accordingly with every character.

    How to do the bar begin with it's 100% width, no matter what are the character energy, and when the character energy is 0 the bar will have 0% width?

    How to make the bar have the same size for every character and yet behave differently according to their energy?

    If you have the maths, please give me a hand on this, I've being trying for hours now.

  • 'Each player has a different amount of energy' - that's the variable maxHP in my example

    calculate hp% = hp/maxHP*100

    So if hp is 5 and max is 10 then hp% = 50

    if hp is 5 and max is 100 then hp% = 5

    if hp is 10 and max is 10 then hp% = 100

    if hp is 2 and max is 2 then hp% = 100

    Set the bar width to hp% (it'll be from 0 to 100)

  • , it did made some sense to me but it also left me more confused.

    I made 3 variables:

    energyPercentage = 100

    energyMax = 1000

    energy = energyMax / energyPercentage * 100

    Because that's where I came trying your advice.

    Then I set the Width of the bar to 'energy'.

    And it works as expected. The bar appear on full width. If I decrease the 'energyPercentage' the bar.Width will increase, and vice-versa.

    And this clarified a lot, thank you very much.

    What I didn't understand is where do the character energy enters?

    If I have a character with 5 of energy, where does the 5 goes?

    The bar maximum width is 1000.

    If the character has a low energy I want the bar to decrease to zero faster than if the character have a high amount of energy.

    Can you explain a little further please? I'm trying to incorporate your advice, but no success, sorry for my silliness :s

  • ignoring the bar, you need to set a current max energy for the player. lets called this 'energyMax'.

    When you say character with 5 energy, you mean he has 5 energy to start so that is 'energyMax'.

    the current energy is 'energy', and you set this to 'energyMax' at the start of the game and I imagine you decrease 'energy' by using it.

    so you start with 5/5 energy.

    we now calculate a percentage regardless of starting energy, whether its 5 you are slotting in or 1000.

    fill = energy/energymax* 100 = 5/5*100. what you have now is a percentage of fill for the bar.

    so if your guy now dropped to 3 energy. the fill of the bar would be energy/energymax*100 = 3/5*100 = 60%

    To answer your question, using the fill bar formula, the energy that the player starts with which is what I think you are trying to slot in is energyMax.

    This also auto-resolves the bar decrease speed because it is always a percentage. if you have 5 energy it will drop 20% of the bar a time, whereas if you have 1000 energy to start with and decrease by 1 you will see almost no change because it is going to 999, 998 etc which is a small percentage of the bar.

    The next step is how you want to apply that percentage outcome (fill var) to the bar width. You can just say object.width = fill which means its width would be between 0-100 just to test it out, then multiply this later if you need it larger. You could also use the built in object progress bar to test it out and set progress=fill.

    To summarise after you've read that and understood what I mean with the values, you just need 3 variables and a formula :

    energy - the current energy,

    energymax - the max energy allowed or total given at the start,

    fill - a variable to store the percentage,

    set var fill = energy/energymax*100

  • Oooh, that's clever , works wonders. I'm very glad, thanks for helping in my game :)

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • No problem, glad it helped!

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