Player Health and Damage | Unity UI and Bolt Tutorial

hi i'm jim and in this bolt tutorial we're going to start making a heads-up display for a sci-fi first-person shooter i've broken up this tutorial into three parts first we're going to make the health bar and send some damage to it from some unfriendly spheres then we're going to make a secondary bar a damaged taken bar this is a common ui effect and it's successful because it gives our players that little extra moment to feel the sting of damage i couldn't find a tutorial on how to do this so i was excited to figure it out and i'm sure you will be too if you're a beginner it makes for a great introduction to the weight unit the timer unit and the math function lerp unit finally we're going to build on the concepts of custom events and lerps to make our ui immersive one common way to help the player feel immersed in the game world is to have the interface up when the player needs it but make it disappear when they don't before we start in i'd suggest that for starting a new project you look at the first few minutes of the last bolt and vfx graph video for your setup the reason for this is in the next tutorial we're going to build a laser with a new vfx graph and i'd like you to be able to use the ui setup we're making here this scene is really simple i just have some rocks i built in pro builder i have a cube standing in for our gun right now and some spheres that we'll use to implement damage on our player in the hierarchy right click and go to ui and make a new canvas and i'll call it ui canvas i've saved just a little time because i've created prefabs for our text prefabs and unity are templates uh they're like package game objects with all of its components so if you go to the ui folder there is a prefab for text mesh pro health so drag that into the ui canvas and then you can see it in the game window go up to this little 2d uh toggle and press that and if you zoom in on the text you can see that it is uh nicely spaced on a transform that has nice even numbers and then you can also drag in the text mesh pro energy it takes a lot of time to space letters right so i didn't want you guys to get bogged down in that if you look in the inspector you can also see that this text is anchored to the top left which means well we're in 16 9 but if we were in free aspect it would mean that the ui stuff is always going to be in that corner so i'm going to switch it back to 16 9. go to the ui canvas right click and go to ui and click on image let's call this image health background so with health background selected click on this anchor icon and select that it's anchored in the top left corner and then on x make it be 140 on y make it negative 30 and then make it 200 for the width and also make it 10 for the height in the image component you can click on this color and make it black and then i'm also going to bring down the opacity now let's do that again so go over to the ui canvas and right click select ui and select image let's call this one health bar set it as a child of the background since it's a child our position will be relative to the parent instead of the world this can also be true of the anchor so go to the anchor the anchor presets if you look at the top here you can see a note that says holding shift also sets the pivot point and that's what we want so uh select this middle anchor hold shift and you can see how uh this window changes and it adds little dots because we're setting the pivot too and then left click right there the pivot on the left hand side means that we can easily scale our hit points up or down to this left-hand side point you'll see that in a moment the values that we want here are 2 on the x 0 on the y 196 for the width and 6 on the height then of course let's click on the color swatch and make it green now if you hover over the scene view and press f and zoom in you can see how nicely this is spaced and since we set that pivot if you scale down this health bar with dragging on the x you can see that our health bar uh behaves like we want it to duplicate the health bar so select it and press ctrl d and let's call this one health bar damage make it a red color and then put this above the health bar in the hierarchy so it's actually behind it so if you select the green one and scale it on the x you'll see the red damage bar behind if you select the 2d toggle again you can switch it back to the 3d view where you can select a red sphere if you can see it let's see is it down there i'm just going to select it in the hierarchy so that's going to be in the damage and healing and damage sphere and then i'll press f and i'll zoom right up to it the sphere's collider is set as a trigger because we want the sphere to trigger damage on the player so let's create this in bolt import bolt if you haven't yet go to the damage sphere click add component and type flow for flow machine bolt gives us flow machines and state machines and so why am i making a flow machine instead of a state machine well i'd be making a state machine here if i wanted the sphere to be angry or friendly right two different states and then whatever would switch between those two states would be the transition in this case it's a single timeline because the sphere when the player walks into it is going to inflict damage it's almost as if there's only one mode click new macro and then save this in the macros folder let's call it damage sphere you can just call yours damaged sphere i put underscore tutorial on mine so you can have my macros and not worry about saving over them we don't need a start or update so i'm going to delete those when the player hits the trigger sphere collider we want the sphere to damage the player so right click and we want to add an event the event that we want is on trigger enter we can see that this starts off a flow and we also have an output for a collider drag out the collider and type collider get tag tags are labels and our player is tagged as player so you can see that up there i'll click back on the damage sphere next up we want a string equals unit so i'll right click add unit and type string equals and we just want a and b we want to check to see that this object is the player before we send damage for strings which are words you want to be careful to make sure that it is written exactly as the tag is so with a capital p first i'll connect up the flow on trigger enter we're going to get the tag of whatever has entered this trigger and we're gonna check to see if it is the player with a capital p then we're going to make a branch so drag out the flow and type branch because we only want to move forward if a player hits this sphere that is we only want to send out this damage event if it's the player the unit we're going to use to send damage from the sphere to the player is called a custom event trigger so right click and type trigger custom event custom events allow us to send events and information to other bolt graphs and we can name these events anything we like so let's call it damage player and let's connect this up to true because we only want to inflict damage if it is the player right now the custom event is being sent to itself it's sending it to the sphere we want to send this event to the player more specifically to uh the bar here drag up this window until you see these side panels for the graph inspector in the variables because we're going to create a variable for our ui canvas object go to the scene tab and go down to new variable name and type ui canvas click the plus and let's make this variable of type game object and then go grab the ui canvas and drop it into the value variables basically give names to data and that means other scripts can know about it and work with it we're making it a scene variable because our ui is in the scene it's not on this object nor is it inside this graph left click drag the ui canvas variable onto your graph and connect it up to the custom event trigger this variable points our trigger to where the event is we can also pass through some info with the event and these are called arguments put a 1 there because we are going to pass in one argument and our argument will be damage so go to the graph variable tab and under new variable name type damage sphere damage click the plus and make it of type float which is a number let's make the sphere do 30 damage left click drag that variable out and connect it up to the argument go to the ui canvas and make another flow machine click new macro save it in the macros folder and let's call this ui manager i'm going to delete start and update first we'll make the damage player custom event that the sphere will be triggering and then we want to make it scale down our health bar so let's right click and search for custom event the trigger was sent to the ui canvas and the event is on the ui canvas so it says self here the custom event name is damage player same as the trigger we're also sending in an argument and that argument is damaged so it will subtract from our current health so let's make an object variable called health current and that will be a float by the way i follow camelcase a programming convention and naming variables in camelcase convention the first word starts with the lowercase letter and all the other words start with uppercase letters it's not necessary to do this in bolt the most important thing is that your variables are descriptive of what they are and that you are consistent in how you format them i use the word health first because when you look through a bunch of variables health is the word that i thought would group variables together that are related let's make our current health 200. left click drag out the health current variable and right click to create a subtract unit and let's connect up our units so that the damage subtracts from our current health our flow is a timeline where things are happening in a sequence so after we subtract the damage we want to set our current health to the new value so hold alt and left click drag to create a set variable unit for the current health and then you can connect up the flow and the value and i'll organize this a little bit so how this works is if our current health was 100 and the damage we took was 20 we would subtract 20 from 100 and then set our current health to 80. now you could play the game at this point and see the number here get deducted but we what we want to do is scale this bar down so i'm going to go to the bar when our health is 100 the scale will be one if our health is fifty percent then we want the scale to be at point five so let's make an object variable for our max health so i'll call it health max and make it a float and i will also make this 200. i'm going to hold the middle mouse button and move the graph area drag out the health current and left click drag out the health max and then what we want to do is divide the current by the max and that will give us the scale value for the health bar right click and add a new unit and type divide and then connect the health current in a and the max health b if our current health was 50 and we divided 50 by 100 our result would be 0.5 since we want to change the scale of our health bar right click select add unit and we want a wrecked transform set local scale we want to apply the value to the health bar image so create an object variable for health bar current make it of type image and then drag in your health bar drag this variable into your graph and connect it up where it says self because we're setting the local scale of the health bar and then we only want to scale the health bar on the x-axis so drag out this vector3 input and select create vector3 set 1 for y and one for z to keep those consistent and bring in our divide result into x we only want to scale the health bar on the x-axis and not squish it vertically now all that's left to do to have a functioning health bar is to drag the set variable flow up to the vector 3 and then into the transform set local scale and you can try it out and now's a good time to save your project and before you test this out let's go ahead and group this up so hold ctrl and left click drag over everything and then i will click on the group text and type player takes damage scale health bar if you'd like to take this part further see if you can make a healing sphere macro on the green healing sphere with a heal player custom event and instead of subtracting on the ui manager you would be adding to the current health and i'm going to get rid of the energy text here we don't need that for right now we'll use it in the next tutorial alright you've made it to the next step so when the player takes damage we want a moment where the player can see the damage that they took and then that bar will animate down and catch up with the current health when does this happen it happens when the player takes damage so let's go and get another uh of this custom event unit so select it and press control d and then let's bring this up what we can do is uh we can have one custom event trigger that gets used in two different graphs two things are set in motion from one event signal before we scale the damage on this uh damage taken bar let's have it sit there for a moment so right click and add a unit and let's make a weight unit and we want weight for seconds so you can connect up that flow and let's set the delay to be 0.8 seconds now to use a weight unit this involves pausing the script that we have and resuming it and to enable that functionality that is called a co-routine so i'm going to enable that on the custom event unit and you can see that there's a co-routine icon right there so after it waits a little bit we want the damage bar to scale to the current health bar let's go to our object variables and just like we made a health bar current variable let's make a health bar damage taken variable and let's make it of type image and then i'll drag in the health bar damage all right i'm going to move these two units up a bit to give a little bit more space drag out the health bar damage taken variable and also get the health bar current variable because what we want to do is uh scale the damage taken bar to the health bar current so we're going to need to know what those values are so drag out the value and type transform get local scale and then we also want this for the current health bar and then we don't want every axis we just want the x so do you get x and then we want the vector 3 get x and all control d duplicate that so we do the same thing with the current health bar the next two units we're going to bring in have all kinds of different uses right click and type math f space and then l e r p that is a lerp alert means linear interpolation what this means is we are going to move the a value that is the damage taken bar to the b value our current health bar by a percentage t so a t value of 0.5 would return a point halfway between a and b but what we're going to do is go through this lerp a bunch of times setting the damage taken bar closer to the current health bar each time we go through it until it's caught up so let's connect the get x of our damage bar and the b is going to be our current bar and then we'll come back for what this t value should be so let's complete our graph to the end and then come back so just like before let's take a look we have a rec transform set local scale so let's go ahead and select that and press ctrl d and then we can also use the vector3 because we're only using the x-axis and then instead of the health bar current we're scaling the health bar damage taken so i'm going to bring that out all right so i'll connect these up the lerp to the create the value to x y and z are going to be are going to stay at 1. the flow to the set scale what are we setting the scale on we're setting it on the damage taken bar okay and now let's go back to how we're going to figure out what percentage to move a towards b when we uh loop through this and we need to figure out how to keep going through this lerp in the first place right click select add unit and create a timer unit we want to start a timer and then this timer if you're familiar with bolt or c-sharp this timer is going to act as a temporary update event that is once this timer starts it's going to be sending out a flow every frame let's connect up the weight into start so we take damage the bar waits for a bit before we start this stuff it starts a timer while the timer is ticking we're lurping we're moving a to b if we have a value here let's say it's 0.1 let's go ahead and take a look at this so i put 0.1 for the alert this value isn't going to change actually i'm going to make it a little bit smaller i'll do 0.01 and also i see here that i need to connect up the create vector3 to the set local scale okay and then let's change the duration to 5 seconds so we have some time to see what this point zero one lerp does every frame if we travel one percent between a and b that one percent gets smaller as the distance from a to b gets smaller what we want to do is increase this t value over time and the timer unit is great for that because we actually have an elapsed percent value so bring that into t and then press play and what you can see down here is that that elapsed is a value one is going to be 100 and it's going to go from zero to one uh for whatever this duration is so it's going to increase uh how much we lerp by one percent to 100 percent uh in the duration of this timer so i'll make the duration a little bit longer i'll make it 10 seconds and let's see what happens one thing that we can see if we do this is that the timer will still be running even though the values are equal the bars are caught up to one another i have a little fix for helping to stop this timer when our bars are uh caught up with one another when the damage bar is caught up with the current health bar so the trick is to check if these two are equal so i'm going to right click and add a unit and i will get a float equals unit and then i'll connect up these two values and then i'm going to connect tick up to this check here and then i'll drag out the boolean which is true or false for a branch and connect up the branch this is a little bit more advanced so uh it's okay if you are confused by what i'm doing here i'll i'll build it and then i'll explain it best i can um so if these two values are equal that is the damage bar has caught up with the health bar then we want to toggle off the timer because we don't need to lurp anymore and if the bars aren't caught up with one one another we want to keep lurping now we have a 10 second duration here so we're gonna see how this works in order to test this damage bar let's add damage on a second sphere so i'm going to select a duplicate of that sphere and i'll press f so we can take a look at it we can see that there's no flow machine on it so do add component and let's add one and then this time we can just drag in that damaged sphere macro so i'll click on the ui canvas so we can see uh the ui manager flow and then i'm going to press play and let's take a look ah what's the sphere oh no okay so you can see once the values between the bars become equal it flips the true and it toggles off the timer in the scenario where a player is receiving multiple damage events this is going to help uh the damage bar behavior be a little bit better so i'm going to organize this and group things up i also want to set the duration to be 5 and i'll hold ctrl and left click drag and this one i'll call timer toggle off and i'll call the rest of this damage taken bar and one more thing there's a bunch of different ways to change this t value and uh one way i like and this can just be an example is we can right click and get a multiply unit why did i type unit a multiply unit and we can multiply the elapsed time by itself which means it is a exponential lerp so let's take a look in and see what that looks like yeah i really like how that looks the behavior is a little bit different when you take subsequent damage if it's been within a certain time frame so you might want to adjust the timer duration we can also see some negative scaling that we don't want the way that we can fix that is to go to the health background and add a component and the component we can add is a mask actually a wrecked mask and with a rect mask if you select uh the health bar and i'm just going to go back to the 2d view and press f to see it if we move this over it will actually be masked by this health background the other thing you can do to fix it is make it so that the scale values don't go below zero but i've not done that for this tutorial because i really wanted to move on to the next part which is creating an immersive ui alright and now for the final part we're going to make an immersive ui a ui that fades in and out with the game action let's uh start like we've been starting and let's duplicate one of these custom event units so i'll just select that one and press ctrl d let's add a timer unit because after the battle ends we want some time to pass and then we want to fade out the interface so i'll right click and select add unit and type timer and then connect the damage player event into start i'll also set the duration to five seconds which is uh probably short but that way we don't have to wait a long time to see it in fact actually that might be a little long i'll make it uh three seconds so let's make two custom events right click type trigger custom trigger custom event when this timer starts that means that we've gotten one of these damaged player events so what we want to do uh is fade in the ui the event that we'll call this is ui fade in and then i'm going to duplicate this and call it ui fade out so these are two different separate events that are going to be triggered the first one is triggered right away when we take damage the ui fades in and then uh as the timer uh ticks and then is done it's completed so that means after three seconds we want to fade the ui out so we can enjoy the space rocks without the bar getting in the way these triggers are going to trigger events internally rather than trigger events on other game objects the triggers will start custom event flows elsewhere on our graph let's make the custom events that we're triggering right-click and type custom event and let's start with the fade out okay so i'll put the that right there so they line up and let's call this fade out this is the event that is being triggered and uh let's have it trigger a timer to go off so this is a lot like the damage taken bar and then we also want to add alert and that is a math f lerp because what we're going to do is lerp the alpha of this canvas we want not the started flow uh we want the tick flow because started only happens once and the tick is going to happen as this timer is running so i'll make it so for the fade out it can be a little bit slower i'll make it five seconds the way we can fade all of our interface components that are in the ui canvas is by fading the alpha on a component called the canvas group and we don't have a canvas group on there so let's go ahead and add it go to add component and type canvas group and i'll move that up so the flow and the variables are last and you can see uh if you click and drag this value that you can fade out our uh health bar okay so now back in the ui manageable graph we can right click and type in canvas group set alpha so we're in the fade out which means we want to fade this alpha to zero so i'll connect up the flow and then we want to get the alpha so canvas group get alpha and i'll plug that into the a the alpha will change from 1 to 0 over the duration of the timer we will uh be increasing how much distance a travels to b as the distance from a to b shrinks and let's group this up as ui fade out all right so let's left click drag over this whole group and press control d to duplicate it and then bring this up and let's change this to ui fade in and that means that well now i'm seeing that actually we've named these custom events wrong it needs to be ui fade out so it's exactly the same as our event trigger and i'll do the same here only this one is going to be ui fade in okay so the name uh matches and um what else do we want to change well in the fade in we're fading it from zero to 1 and i think that all looks right so let's press play and try it so we've been playing the game and we are in a battle okay and then after the battle things calm down and the ui fades away then we get into a fight again and we're not very good at fighting okay so you probably saw there is um sometimes the uh especially with the values that we have here uh again we only had it uh we only left three seconds uh before it faded out so i don't know you'd have to play play games that you like and see how long it takes for uh the ui to fade out in a game like uh fallout or something like that um so that's one thing but uh we can also make it so that the ui doesn't fade out if we're fading in to make sure that a fade out doesn't happen on top of a fade in we can make a boolean so i'll make a true or false for a variable is fading in of type boolean and then i'm going to hold alt and left click drag so that this boolean is set on the fade in event so the fade in happens and then we set this fading in boolean value to true if our alpha value is greater than i'll just say 0.99 then we want to hold alt and left-click drag then we want to set this variable to false because we aren't fading in anymore so uh let's drag out the boolean and create a branch so this way we set fade into false when our alpha is greater than 0.99 so essentially we're not fading in anymore and it's okay for a fade out to happen now in fade out what we want to do is interrupt this tick and get it to stop if a fade in is happening so left click drag in that is fading in and get a branch and then bring the tick into the branch so as long as we're not fading in we can fade out so i'm going to make the fade in happen over a shorter duration and the fade out can happen in maybe three and then let's make it so that we have maybe six seconds before it fades out all right so i'll give that a shot you know you can definitely experiment with your own values i think that if you work with this you'll see it makes sense why we are not letting a fade out happen when a fade in is happening it prevents these two flows from competing with one another now you could certainly do a fade of a ui with animation and have these custom events trigger those animations but i think getting familiar with the timer and the lerp unit combo gives a lot of control and opens up a lot of possibilities in your visual scripting career next video we're going to use the vfx graph to fire a laser and drain our energy bar so stay tuned and i'll see you in a week or so thanks

Channel: TriggerHappy

Views: 1,854

Keywords:

Id: R4wYTF52WlM

Length: 42min 5sec (2525 seconds)

Published: Thu Oct 01 2020