• From: Mexico
  • Registered: 2015-01-10
  • Posts: 434
  • User Karma: 303

Topic: (SOURCE) Damage Bar Behind life bar

This a very simple way to create a damage bar behind our life bar. UFE by default works like street fighter 4 and has no such display, but with this you can have a damage bar like SF3, wich starts to drop as soon as damage is taken.



First, open DefaultBattleGUI.cs

and in the first class default battle gui below


public Image lifeBar;


add


public Image lifeBarDamage;



then in #region public instance properties, below


public float lifeUpSpeed = 900f;



add:

public float lifeDownDamageSpeed = 50f;



then, after



if (this.player2GUI != null && this.player2GUI.lifeBar != null){
                this.player2GUI.lifeBar.fillAmount = this.player2.targetLife / this.player2.totalLife;
            }


add:



//lifeBarDamage
            if (this.player1GUI != null && this.player1GUI.lifeBarDamage != null){
                this.player1GUI.lifeBarDamage.fillAmount = this.player1.targetLifeDamage / this.player1.totalLife;
            }
           
            if (this.player2GUI != null && this.player2GUI.lifeBar != null){
                this.player2GUI.lifeBar.fillAmount = this.player2.targetLife / this.player2.totalLife;
            }
           
            if (this.player2GUI != null && this.player2GUI.lifeBarDamage != null){
                this.player2GUI.lifeBarDamage.fillAmount = this.player2.targetLifeDamage / this.player2.totalLife;
            }


then after


if (this.player1.targetLife > UFE.GetPlayer1ControlsScript().currentLifePoints){
                this.player1.targetLife -= this.lifeDownSpeed * deltaTime;
                if (this.player1.targetLife < UFE.GetPlayer1ControlsScript().currentLifePoints)
                    this.player1.targetLife = (float)UFE.GetPlayer1ControlsScript().currentLifePoints;
            }


add:


if (this.player1.targetLifeDamage > UFE.GetPlayer1ControlsScript().currentLifePoints){
                this.player1.targetLifeDamage -= this.lifeDownDamageSpeed * deltaTime;
                if (this.player1.targetLifeDamage < UFE.GetPlayer1ControlsScript().currentLifePoints)
                    this.player1.targetLife = (float)UFE.GetPlayer1ControlsScript().currentLifePoints;
            }

if (this.player1.targetLifeDamage < UFE.GetPlayer1ControlsScript().currentLifePoints){
                this.player1.targetLifeDamage += this.lifeUpSpeed * deltaTime;
                if (this.player1.targetLifeDamage > UFE.GetPlayer1ControlsScript().currentLifePoints)
                    this.player1.targetLifeDamage = (float)UFE.GetPlayer1ControlsScript().currentLifePoints;
            }


and after


// Animate life points when it goes down (P2)
            if (this.player2.targetLife > UFE.GetPlayer2ControlsScript().currentLifePoints){
                this.player2.targetLife -= this.lifeDownSpeed * deltaTime;
                if (this.player2.targetLife < UFE.GetPlayer2ControlsScript().currentLifePoints)
                    this.player2.targetLife = (float)UFE.GetPlayer2ControlsScript().currentLifePoints;
            }


add:

            if (this.player2.targetLifeDamage > UFE.GetPlayer2ControlsScript().currentLifePoints){
                this.player2.targetLifeDamage -= this.lifeDownDamageSpeed * deltaTime;
                if (this.player2.targetLifeDamage < UFE.GetPlayer2ControlsScript().currentLifePoints)
                    this.player2.targetLife = (float)UFE.GetPlayer2ControlsScript().currentLifePoints;
            }



if (this.player2.targetLifeDamage < UFE.GetPlayer2ControlsScript().currentLifePoints){
                this.player2.targetLifeDamage += this.lifeUpSpeed * deltaTime;
                if (this.player2.targetLifeDamage > UFE.GetPlayer2ControlsScript().currentLifePoints)
                    this.player2.targetLifeDamage = (float)UFE.GetPlayer2ControlsScript().currentLifePoints;
            }


Now, go to BattleGUI.cs and in the first class below


public float targetLife;


add:


public float targetLifeDamage;


and in the #region protected instance methods section, below

this.player1.targetLife = player1.myInfo.lifePoints;


add:


this.player1.targetLifeDamage = player1.myInfo.lifePoints;


and below:


this.player2.targetLife = player2.myInfo.lifePoints;


add:


this.player2.targetLifeDamage = player2.myInfo.lifePoints;


That's all from the code, now you can open your battle GUI prefab and a new field will be available to select an image to work as a life damage display. You can simply duplicate your original life bar, put the duplicate behind it and change the image or the color, and drag it to the damage life bar field. there's one for player 1 and player 2. also you'll see a new value called slide damage down speed, wich is how fast the damage bar is droping. By default is set to 50, so is slower than the life bar drop speed, and you can see the damage behind it.


Hope you find this useful!

Me encontraste en un negro camino como un peregrino sin rumbo ni fe, pero la luz de tus ojos divinos cambió mi suerte por dicha y placer.

StriderSpinel's Website

Share

Thumbs up +3 Thumbs down

2 Reply by FreedTerror (edited by FreedTerror 2021-06-05 00:08:03)

  • Registered: 2019-12-15
  • Posts: 821
  • User Karma: 343

Re: (SOURCE) Damage Bar Behind life bar

I got it to work, thanks! I had to guess where to put some of the code. I think this tutorial could be improved with code line references so its clear where exactly to put it, but for the most part its not to difficult.

Here's a gif with a result
https://i.imgur.com/imAaon7.gif

Unless I missed something code wise the new bar doesn't seem to refill with the life bar so it can cause a visual issue in training mode if life bar is set to refill. Any way to make it refill when the life bar does?
https://i.imgur.com/HQyqUCO.gif

My Github
UFE Discord

Share

Thumbs up Thumbs down

  • From: Mexico
  • Registered: 2015-01-10
  • Posts: 434
  • User Karma: 303

Re: (SOURCE) Damage Bar Behind life bar

The code works for refill too:

that's what this part fo the code is:

if (this.player1.targetLifeDamage < UFE.GetPlayer1ControlsScript().currentLifePoints){
                this.player1.targetLifeDamage += this.lifeUpSpeed * deltaTime;
                if (this.player1.targetLifeDamage > UFE.GetPlayer1ControlsScript().currentLifePoints)
                    this.player1.targetLifeDamage = (float)UFE.GetPlayer1ControlsScript().currentLifePoints;
            }

and is already in the tutorial, and there's code reference too, that's why it says "put the code after this" or "below this"

https://i.ibb.co/qMsVQBJ/ezgif-com-gif-maker.gif

Me encontraste en un negro camino como un peregrino sin rumbo ni fe, pero la luz de tus ojos divinos cambió mi suerte por dicha y placer.

StriderSpinel's Website

Share

Thumbs up +2 Thumbs down

  • Registered: 2014-04-07
  • Posts: 621
  • User Karma: 206

Re: (SOURCE) Damage Bar Behind life bar

FreedTerror wrote:

I think this tutorial could be improved with code line references so its clear where exactly to put it

It's difficult to give specific code number line references in most tutorials for a variety of reasons: (1) Visual Studio or your IDE of choice may change formatting of scripts automatically from its format when initially downloaded, (2) You may already have customized the code sheet thus changing the line numbers, and (3) The tutorial writer may have altered their code sheets to utilize other modifications thus changing their line numbers.

Share

Thumbs up +2 Thumbs down