What is LERP in Unity | Animate Health and Mana Bars through Code!

guess who's just done most of this video and realized he hadn't hit record me hello welcome to today's video in today's video i'm going to be showing you how we can uh use lerping in unity and eventually a free sort of asset called do tween to get some even more functionality on top of our lerps uh to make health bars or mana bars um using d tween specifically you can see that there's a nice kind of like bouncing animation as it does it if you don't wanna use any assets i'll show you how you can do it yourself and animate a health bar um for when you take damage that it'll sort of slowly slide between them you don't have to just cut and have it really jarring first let's start over in our little scene here this is the code for a vector3.lerp um and i'll let's just go in straight into the code and i'll show you kind of what's going on here so so at the top here i've just got some variables i've got the left position the right position and the indicator which is the arrow importantly though i've got a max value which i've set to 100 and then a current value which is gonna start at zero and then i've got the increase speed which is um as i hold a key that's just how fast we're gonna increase our current value and then i've got some text and the gems which i'm going to change the um text and the color of them further down and then to change the color of the gems i've got my colors here so i'm going to set the start color to whatever our um gems color is at the start and then i'm going to call lerpvalue which is a function that we're going to be using i'm just calling it here initially just to set all of the values up properly so then in our update function and i've got input.getkey dna i'm going to either increase the current value or decrease it and it's going to go up or down based on our increase speed times by delta time then i'm going to clamp our current value between 0 and the max value and then we're going to finally learn the value so lerp value is where the kind of the lerping magic happens as it were so we've got a float called t and this is equal to our current value divided by the maximum value and this gives us a percentage so if our maximum value is uh 100 and our current value is 50 then t is gonna be 0.5 because it'll be 50 the current value would be 50 at the maximum value then we've got some text in the scene which i'm just going to set 2t so we can see what's happening and then we've got a vector three dot lerp and a color dot loop here and a lot of data types within unity have lerp functions so uh vector3's got one of them colours.one of them colours one of them as well you know you could do vector2.lerp and to look between two vector twos um and you can do floats uh you could learn floats as well with uh f dot uh lerp and if we look at the intellisense here so lerp itself linearly interpolates which is what lerp stands for between a and b by t so let's have a look at what's going on down here and then back in the scene so indicator.transform.position is equal so the indicator is the arrow is equal to vector3.lerp and on the left which is value a we've put a left dot left pause dot position in value b vector three b uh we've got right position uh write pause dot position and then t is the value here which is that percentage between sort of the minimum and the maximum values and we're doing the exact same thing we're doing the exact same thing here so we've got our left gem and our right gem and we're setting the materials color to a value somewhere between the start color and the end color again based on t but using this transform.position the vector3.lerp we can see exactly what's going on in our scene here so if i hit play see this is the code that we had written but just kind of splayed out for you here so we've got the arrow and the value t which is zero and you can see that zero is directly over uh what would be a in that equation and in the function and now as t increases we move up towards between zero and one and we move up to our write pause dot position so when we've got a t value of one we're fully whatever the value of b is when we're a value of uh zero we're fully whatever the value of uh the left position is you can see that as we increase the color of the gems changes also this is that color dot lerp so the closer to one we get where the gems go green and then closer to zero we are the gems are red and you'll see that if we're at 0.5 which is you know 50 but 50 of the way between the value a and value b we're kind of somewhere in between so the arrow is you know visibly halfway between left and right and the color it's not red it's not green it's kind of like a yellowy sort of orange color um but this is that code kind of laid out for you in a more visible way and hopefully that kind of makes sense and maybe that's all you need from this video maybe this has helped you helped it click for you and but let's look at some more practical examples so just going to head over to our health scene so in our health scene uh here you can see that we've got a health percentage and a current health and in the script for our health lip it's getting dark very quickly so in the health flip script so we've got an image which is the fill bar we've got our max health which i defaulted to 100 but i've actually set to 120 in the inspector and we've got a public float which is our current health public float which previous health new health which we all need to kind of animate the value and then we've got a damage amount and a heal amount which is just when i press the keys on the keyboard we're going to either take damage or heal to make the health bar go up or down and then we've just got a reference to some text and then we have a bool and a float here which are going to control um the animation between sort of value one and value two and then t which we're going to use in a couple of functions so i've had to set it sort of at the top not locally within the function just so we can access that in multiple places and then in our awake function i'm setting the current previous and new health to our maximum health so the bar's going to start fully full and then we're just setting the text so the health percent is uh current health divided by max health which gives us the t value what i could do as well as i could times this by 100 that would actually give us a proper percentage but i'm just going to leave it as a decimal because it helps illustrate what t is and maybe instead of health percent i'll rename that to health t just so we can again visualize it and then we've got health amount and this is what the current health is actually set at and when i press space on the keyboard or enter return on the keyboard i'm either going to take damage or i'm going to heal and this is where that ball comes into play so if the if we should be lurping then let's look the damage so when i press a key we're going to change the health and we're either going to take damage or heal and you can see here that um so when i change health i need to set the previous health i need to keep a record of what the previous health was um so i'm going to take previous health and that's equal to our what our health currently is and then our new health is going to be um the current health minus whatever the damage is and because i'm putting in negative heal amount two negatives make positive so that would actually heal um the player that way i don't need a damaged player and a heel player i can just do it through the one function and then i'm just going to clamp our new health between zero and whatever our maximum health is so we can't go kind of into negative or above our maximum health and then once i've changed the health i'm going to set should lerp um to true so if should so when should lerp becomes true we're going to come back up here so if should lerp then we're going to alert the damage and this function gets a little bit um it's not massively complicated but you know there's a lot going on so i'll just go through it sorry i i told a lie earlier uh t wasn't set globally um because i used it multiple places it was set because i needed it to initially start at zero and if i declared it in here in lerp damage then every frame it would get reset to zero so this wouldn't actually increase um well i should probably do instead of having it up here um you know i could put it down here instead so we know that it's above lerp damage we're only going to use it in lerp damage and then the current health is going to equal math f dot lerp and then we're going to set current health two um whatever the t value is between our previous health and our new health so in the case of taking damage um say you know we started at uh full health which is i think 120 in this case and our new health was uh 100 because we took 20 damage and then whatever our t value is and t is going to increase here um based on a speed that we provide so t will go from zero to one and it'll increase until um you know until the current health meets our new health so t is gonna start at zero and then it's gonna go it's gonna increase so we're gonna go from our previous health which would be in the example i just outlined 120 and then it's going to steadily go between a and b b is our new health which is 100 and based on t which again is going to go between 0 and 1. i'm going to set the fill amount and the fill bar to that percentage of the current health divided by the max health the reason i'm setting the fill amount here and not directly when we damage the health is because our current health as you can see as t increases every frame so our current health is going to change every frame as well so in that and so in that instance um we'll want to have it go down uh what we could do is if we wanted to set our current health like instantly so if you took damage your current health was instantly applied we'd probably need like another float in here like temporary health and then we could set that to um this lip and then we could set then set the fill amount i didn't want to complicate things too much so we just you know we take damage and our current health is going to slowly decrease and it's the matter of like half a second so it's not not a big deal and then we're going to set our text here which is the same as the text above and then what we're doing here is we're checking that if our current health is equal to our new health so if one if you know so if t hits one then uh should lerp is going to equal false and t will be reset to zero with shuttle being false then you know this isn't getting called in our update function so let's see this in action again so if we go over here and we'll see that that changes so health t is one and if i press space and we take damage you can see that it animates down and this is based on a that lerp speed so if i go over to our um canvas is where i've got the script so we've got a lerp speed here if i set this to 0.5 it's not going to change as quickly so we've got alert speed if i press space you can see that it'll slowly go from our whatever our current health was so our current health's 110. if i when i press space we're going to take 10 damage so our previous health is going to set get set to our current health which is 110 our new health will get changed to our current health minus the damage amount and then we'll slowly look to that value see the current health slowly going down 0.5 seconds it's going down to 100 and it works the other way as well so we've got heal amount 20 so we're going to go up and we're going to heal by 20. you know i get to full health nothing's going to happen because we're clamping the value and again we can go back down like that and then again you can increase it if you want it to be nice and quick you can just space so that's how you could do it through you know code and have like an animated lerp going from one value to the other instead of just immediately setting it like we did in the arrow scene but now if we go over to uh we've got i've got a mana scene here and this is using uh do tween as i said um so do tween is a free asset like i said you can just grab it click add to my asset so then import it into your project so if i hit play it's doing the exact same thing as our um health bar scene was doing uh we hit space we take the damage and it lerps and we've got the lerp speed here uh this is different to the lerp speed if the other one uh in this case the lower the value the quicker it'll learn so we could do like zero point you know 0.1 um if we took this up to two it'd be slower um but let's have a look at the code for lerp so everything else is the same up to um change mana and update mana so you see that here we've got change health and then we had lerp damage which is quite which was quite big uh not a big function but you know so we've got here change health and then lerp damage and whereas men health we've got change mana which is just one line an update mana which is four lines first like eight nine and then plus this as well what we've got here is when we press either space return we're going to change or refresh our mana and then you need to be using uh dg.tweening for do tween and then we can change your flow by using uh do virtual float so this works in a similar way to the lerp so we're going to go from our current manner to our current manner minus the damage this transition is going to last for the lerp speed so if we put 0.5 it'll last half a second if we put two it'll take it'll last two seconds and then we've passed in a function here called update mana which takes a float value and then i've put set ease and i've set it to an ease here which is just a public ease and i'll show you this in the sort of inspector in a sec um and then in our update mana function uh all we do is we set our current manner to the value that this is passing out we're going to clamp that current manner between zero and our maximum manner and then we're going to set our fill bar amount to our current mana slash max mana and then we're going to update the text as well so this is exactly the same as what we're doing we're just finding the percentage between our current manner and our maximum manner so if we've got 50 of our remaining health uh 50 of our remaining mana the bar will be 50 full um but the great thing about using do tween like this instead of you know doing it manually is one it's less lines of code but you can also set easing so currently with linear this is just acting exactly how our previous the health bar function was working so if i hit space it's just going from its old position to its new position linearly linen linear linearly oh that's a hard way to say uh but we've got all of these different easing types here so we've got um what we've got some good ones uh we've got in elastic so it'll bounce before it does it um let's make this uh one second so we can see a bit better so it'll bounce up and then go down and we've got out elastic which is just uh you know makes it a bit more a bit more like jelly that's a 0.5 so just makes it a bit more interesting to look at and with the ease in as well we've got a in back which i don't know if you saw that but it kind of it went forward and then back so it kind of grew and then went down we've got the outback which isn't the the place in australia so it goes out and then it goes it goes slightly past where it should go and then bounces back there's in outback which will uh you know it'll bounce go back and then bounce to its current value and then you know this this works as we increase the values oh i quite like in outback that's that's a nice one now let's make it a bit quicker so you see that using uh do tween it does a lot of the it does a massive amount of the heavy lifting for you um but also you get the the benefit of being able to ease ease it as well and get even better animations that was just a brief sort of intro into lerps in unity and specifically how you can use them for health bars or mana bars if you want to get these project files including the assets they're available over on my patreon which is linked in the description below you'll get the full project files the scripts the assets which you can use in your projects if this video was helpful it'd be great if you could let me know uh just leave a comment below tell me what you liked and if you didn't like anything about it let me know as well just so i can improve my videos going forward but in the meantime thanks for watching and i'll see you the next one bye

Channel: Dan Pos

Views: 2,985

Keywords: unity lerping, unity health bar, unity mana bar, unity 3d, game development, programming, indie game, game dev, made with unity

Id: aIVANwZCPGY

Length: 17min 36sec (1056 seconds)

Published: Sun Nov 21 2021