Unreal Engine 4 - Blood Splash Health Effect (Like Call of Duty)

hey guys it's Jackson here from Titanic games and today I'm going to be showing you how to set up kind of a health HUD similar to that of many first-person games first-person shooter games rather that we have today such as you know Call of Duty or battlefield or something of the like so you know as you can see it'll be you know something kind of like this where when you get hit you know it'll cause some kind of you know blood effect to show up on the screen which will get you know redder and redder if that's even a word as you take on more damage so that's what we'll be doing today and now first thing we're going to want to do is actually get a texture for it now what I did is I typed you know I searched blood overlay transparent to look for you know kind of an image similar to those games and I guess the only one I really found that worked well was this one right here you can find it yourself but I will also leave it in the description below so you don't have to go searching for it but anyways once you find it you know download it and then we can get started so we'll go back into our project and first thing we want to do is right-click and import to game and then import that image right so wherever you saved it go ahead and import it and I'm just going to say no because I not sure what's going on all right there we go just going to import some stuff just ignore that one right there so anyways if you open it up you'll see that it is indeed a transparent image which is exactly what we want because if it wasn't transparent then you know it would block out the the actual screen once we start adding the effect so what we're going to do is now is create the HUD for it so let's right-click and go to user interface and we want to create a widget blueprint now I'm going to call this you know blood effect HUD alright and we'll open this up alright so now first thing you're going to notice is there's this little you know panel here with this green outline and this is called the canvas panel and this is where all any widgets they want to add you know to your screen it's where they'll go so what we're going to use for this tutorial is an image alright so we'll drag that and drop it excuse me will drag it and drop it onto the canvas panel and now we can select it and if you go over to brush in the details you can click the little triangle and then we can select the image that we want to use so we'll click this drop down find our blood overlay texture and then you know you can compile and save and you can see here it is now next what we want to do is get it to fit the entire screen so what you could do is you know scale it up like this but we want to make it so that no matter what screen size you're using it will always fit the screen so to do that we're going to go to anchors and we're going to set it to full screen so as you can see you know what you know it's it's now filling the whole screen or anchored to the whole screen rather and now just to make sure it fits really nice we'll go over and make sure all these values are zero and then we're good to go alright so you can compile and save and now let's visualize this so to see what it looks like we'll find our character we'll go into there the blueprint and then that we're going to use an event begin play here to create our HUD whenever the game begins so let's right click say event begin play will drag off say create widget all right now for class we want to choose the class that we made or the widget that we made so we'll use this blood effect HUD all right next we're going to drag off and promote this to a variable and this is just so that we can reference it later if want to you know for like changing different values on it and whatnot so I'm going to call this blood effect reference all right and then I'm gonna say add to viewport just like that so now if we compile and save and hit play you'll see there it is on the screen you know a nice big red effect very very vibrant and you can tell it's that you're definitely going to your hurt I guess all right so next what we want to do is we want to add a way to you know kind of you know make that effect show up more and more on the screen as you get hurt so to do that we need some health values so we'll create a new variable here called current health change this to a float it will create another called max health all right so compile and save so then after compiling we can set the default values so I'll set it to 100 and then also 100 so compile and save again and now next what we want to do is we need a way to communicate with our with our widget blueprint okay so the way we're going to do that is with something called a dispatcher so we'll go back to our third person character and we're going to add a dispatcher here called it's called update health all right so compile and save again and now with update health selected we want to go into the details panel and we're going to add a new input and we're going to call this health all right and then change that to a float and now we're ready to you know do some more stuff so next what we're going to do is just add a way to you know add or subtract health just so we can visualize the actual effect showing up on the screen so to do that I'm just going to right click say F or no I'll just use the I want to right click and hit 1 so I'll use the one key for subtracting health so to do that let's drag off and say set current health all right and we will get our current health and simply subtract float by float and we'll subtract you know 5 how about every time and then for adding health I'm going to choose the two key I'm going to drag off say set current health again it's very similar except now we're going to add instead of subtract so ctrl-c ctrl-v to paste can hit plus float plus float and we'll add five this time alright so now we can compile and save and the last thing we need to do is actually call this event dispatcher so it'll send a message out to anyone listening for this you know this call so we'll drag it out and we will say call so call it update health plug this in just like that and then you know could control W to duplicate plug it in again all right there we go so now we so now that we've got the event dispatcher in place we can go back to our blood effect HUD and actually set some values now so I'm going to delete this event tick and we're going to use this event construct this is it's very similar to event begin play in that it gets called you know whenever the widget is constructed so we'll drag off will say cast to third person character and for object we want to get player character all right and now as a third person character we want to assign some like assign an event to happen whenever that call update health dispatcher gets called okay so to do that we'll drag off and we're going to type a sign update health all right if we add that you'll see it creates first a binding to that event dispatcher and then it creates a custom event to be fired whenever that event dispatcher gets fired so we will call this you know update blood effect just like that all right hook this up I'm going to create a little space now all right so now next what we need to do is let's go back to our image all right and we need to change its opacity right so it doesn't show up right away so to do that we're going to drag you know set this to this color and opacity alpha value to zero all right so it doesn't show up at all so now with that in mind we're going to need to you know set this value to get closer to one as we get hurt so go to the graph and we're going to get our image so drag it in as I get and we're going to drag off and say set color and opacity all right so I'm gonna create a bunch of space here and then from the in color we want to drag out and say make linear color alright and so this will give us all the values that comprise a color now for the RGB values we're just going to hard-code them to one but for the alpha value we're going to use this health to kind of you know set it so next what we want to do is drag off of as third person character and say get max health now the reason for this is we need to take this health value and convert it to a zero to one scale because that's what opacity uses right when opacity is or when alpha rather is zero then it's completely transparent but when it's one then it's completely opaque so we'll take our health and do float divided by float hook these up and now we could just plug it in but we wouldn't get the effect we're going for because as I just mentioned you know a value of one is completely opaque but if you're full health you're this division is going to yield a value of one so we just need to simply do a - float - float hold control to move this and we just need to do one minus this value and that will give us the correct scale so plug that into the alpha can move that over now if we compile and save and hit play you see there's no effect showing up yet but as soon as I hit the one key to add some damage see it's going to start to show up so if I hit one some more it'll show up more and more and more until it's you know full and vibrant so now if I hit two you know it'll start to go away all right and so that's kind of really the basics of you know setting up a kind of blood overlay effect similar to you know first-person shooter games I guess one last thing we could do to kind of make that effect a little more red maybe is let's go to the designer and go to the tint all right from the brush and we'll change this will change all this to just read so do zero and zero then I'll make it red now if we press play again and I add the damage you'll see the screen gets a little redder so so yeah anyways that is everything if you liked the video you know like or subscribe and thank you for watching and we'll see you in the next one

Channel: Titanic Games

Views: 43,334

Keywords: Unreal Engine 4, ue4, ue4 tutorials, blood, overlay, first person, shooter, cod, blueprint, widget, health, health overlay, blood splash, blood effect, screen, screen effects, TitanicGames, call of duty, battlefield, blood splash effect, like call of duty, blood splash health effect, Titanic Games, Unreal Engine, shooter games, Unreal Engine Tutorial, RPG, Blueprints, damage, Game Development

Id: WMA73ukITj4

Length: 12min 3sec (723 seconds)

Published: Tue Sep 06 2016