How to Create a Fortnite-Inspired Damage Display in Unreal Engine 5

hey guys and welcome back to another Unreal Engine 4 and 5 tutorial so in today's video what we're going to be going over is how to create a damage amount indicator like you see in fortnite so if I were to hit play we can test this out and show you what we're going to make today I'll sign in pick up the gun if I then shoot the AI or the player over here you can see we are doing a certain amount of damage and that's an appearing on screen as a number and it's going to be kind of fighting off and going over in some Direction like this so this is what we're going over and creating today you see it's not actually damaging the play it's just showing how much damage it'll do however that's just because I've disconnected the one node which will do the damage just because I want it to be here constantly so I can fully show you it like this and I'm just doing a random amount of damage this is incredibly easy to customize for yourself so you can change the numbers the color the fonts the size the direction the fade everything you want to customize is very easy to do so and I'll show you exactly how to do that as well so this is what we're going over and creating today and again you can see this works in any direction as well so without further Ado let me delete this code and I'll show you how I've done it so the first thing we're going to want to do is we want to actually create this widget in which the numbers and the damage is going to appear so to do that we can hit control space right click go to user interface create a widget blueprint I'm going to create a user widget and I'm just going to name this one W underscore so widget DMG for damage AMT front mount so damage amount and we'll open it up straight away in here all we can do is add in a canvas panel and then add in some text on that canvas panel this text I'm going to Anchor it to the middle of the screen position X and Y being zero and the alignment being 0.5 0.5 just to make sure it's perfectly centered and to keep with that I'll make sure to take size content and justification in the middle this just means that the text is always going to be in the middle of this widget just test it out we can input let's say 100 into here you can see that's now in the middle of the screen like so compile and save that now this here is where you can also customize it so if you wanted this color to be red for example because it's damaged or if you want it to be blue or anything along this line so it's very easy to do and you can also give it an outline or change the font all this great stuff the same as you would normally customize any kind of font or text in your game you can do that here so for example let's have it look like this then another important part of this system is we want to make sure it kind of Fades on and off so it looks really nice that's also very easy to do so in the bottom left hierarchy we want to select our text then we want to go to the animations tab if you don't have the animations tab don't worry go up to window at the top and just hit animation and that will then bring it down here for you like so we want to hit the plus animation and then I'll name this fade for example and then make sure text is still selected then select fade and then add a track in this animation and we want to add in a text or whatever it is that you've called it then on this track we want to add a track on here and we want to add in a render opacity this is going to actually allow us to make it fade on and off by changing how visible it is so to start with we want it to be zero then I want the total duration of this animation to be one second so I'm going to drag out from here to one second like so I'm going to go forward about 0.15 seconds and set it to be one so it's going to fade on very quickly as we want the players be able to see it immediately but we don't want to just suddenly appear then I'm going to go to about 0.75 seconds and then add another keyframe so it's going to be staying at once it's completely visible here for this entire duration and then we'll go to the end and set this to zero so essentially this is going to fade on very quickly stay on and then fade off over the duration of one second as you can see here it's not incredibly visible so I select deselect it we can see it's going to be doing something like this so you see it goes on and then off all we're doing in here is fading we're going to actually do the movement elsewhere so we compile and save that then the final thing we want to do inside of here is we want to make sure we can actually change the value of this because we don't want it to always be 100 we want to actually make sure we can change it to be the damage we are dealing so with the text selected we're going to go to content text and hit the bind and create binding in here we're going to create a variable naming this damage amount once again and we're going to set this to be a float then we're going to drag this out get it and then drag that straight into the return value here and it should get a two text float like so and that's all we need to do we can change this variable later on for the amount of damage we are dealing we'll compile and save that and finally there is one more thing is we need to go to the event graph now and I will delete event pre-construct and event tick and we just want to play the animation so on event construct what we're going to do is very simply get our fade animation and play animation forward so when this widget is now spawned in it's going to be playing this fade animation so it will fade on stay on screen and then it will fade off perfectly like so how we want and that is all we need to do inside the widgets so we can now close that and that will Now display our text so now what I'm going to do is I'm going to create a blueprint for this so let's hit control space to open our content browser again right click go to blueprint class and create an actor and this one I'm going to name BP underscore damage amount opening it up straight away all we're going to do in here is simply hold the location of this widget spawn in move it and set the damage amount so this is all very simple and it's just nice to have it all contained in one blueprint here first thing we're going to do is we're going to add a widget so we can add the widget here and this widget is going to be the one we just created so I'll search for w underscore damage amount adding that in there for the widget class like so and you can see we now have our text in there perfectly as we had it before you can change the size and everything in here however I'm not going to bother doing that one thing I do want to do is change space from world to screen and you can see we can't see it now but essentially what that means is it will just now actually constantly face the players so no matter which direction the player is facing the widget will always be facing them and it will look perfect so they can shoot from any direction or they can be moving around after shooting and they'll always be able to read how much damage they've done we'll compile and save that and next we want to go over to the event graph but again delete event tick and event act begin overlap as we only want to use event begin play so what we want to do first is we don't need to spawn the widget as when we spawn the blueprint elsewhere the widget will be spawned in but we do want to set the text to be the correct number so we have the correct damage amount so we're going to get the widgets from the top left out of this we're going to get widgets out of there so we're getting the widget and then getting the widget from the widget so essentially we're getting this specific widget it is out of the return value we want to cast to whatever you named your widget so I named mine W underscore damage amount like so I'll connect that in there out of this we want to come over with as W damage amounts I'm going to set damage amount so the variable we created earlier as again this is actually going to be changing the Text due to the binding so how do we now know what we want to set it to well we can right click promote a variable and call this one damage map again so we now have this as a variable which we can then change when we spawn in this blueprint so again the widget we are changing when we spawn in the widget here and then we'll change it when we spawn in the blueprint elsewhere that'll make more sense when we actually do that and that's when we actually damage whatever it is we're damaging as that's then going to have the actual damage amount so with this variable selected we want to make sure we tick instance editable and expose on spawn so when we actually do spawn in this blueprint we can immediately change this value then what we're going to do is right click get actor location right click that promote a variable and then this start lock or start location and this is because we now obviously want to move it as well so it's not just going to suddenly appear and fade on and off it's going to appear they've done and off while also moving in a certain direction just to give it a bit of life and just to make it look a little bit nicer out of this variable we're going to get a vector plus a vector once again add node and we're going to add in whatever value you want so this is going to control where it ends up so for me the values I found nice which I was using at the beginning of the video a minus 25 minus 25 and 100. so for the one second I have this on screen I found that moving this amount looks perfect for me and actually it's not 100 sorry it's 50. but again you can customize this so you can have it as just 25.25 instead of minus 25 that'll mean it will go left instead of right you can have it as 50 you have as 100 whatever it is that you want but I found that this works best because it's moving but it's not moving too much so the play can very easily still read it without having to focus on it it's just there they can see it nice and easily which is obviously what you want for the kind of game we're making here we then want to right click that return value promoted the variable naming this end log or end location like so connecting that in there so we now have the start location and the end location that we want to go between so how do we now nice and smoothly go between those values well we're going to use a timeline so we'll come out of this and get add timeline and name this whatever you want so I named mine move t for move timeline making sure it goes into play like so I'm then going to double click this to open it up and I'm going to add a new track add in a float track I'm gonna name this move track now we want to set the length of the timeline my widget is going to be on screen so the animation is one second long so it's gonna be on screen for one second so I'm going to make this 1.25 seconds the reason why I'm making it slightly longer is so it still looks like it's moving before it fades off because if I make them both one second you'll see it actually stop but I want it to be nice and smoothly moving the whole time so I'm going to make it continue moving after it's faded off and disappeared just to make it look a little bit nicer in this track I'm then going to right click add key to curl float time of zero value of zero right click add key to curve float time of 1.25 or your maximum length and a value of one I don't seem to fit vertical and horizontal here we can then compile save that and close the timeline like so and now you see we have this move track float variable here we can drag out of this and get a lurp vector and that will then go between the values of A and B via this track we've just made so it'll be nice and smooth A and B wants to be our start and end location so a where we start will also be our start location B where we want to go to would be our end location so we have something like this so that's great we're going between start and end locations but we want to actually make sure we're setting the location so out of update of the timeline we're going to set actor location with the new location being that return value from the loop there like so and the final thing in here is out of finished of the timeline we want to simply just destroy actor so as soon as this is finished it's off screen we're just going to get rid of it as well so we don't just have an empty blueprint in the level because if you have too many of those it'll obviously get a little bit laggy because there's not much in here it probably won't do that but if you have a lot in here it will and it's just good practice to do it anyway so we'll compile and save that and that is all we need to do inside this blueprint again when we spawn in we're setting the damage and then just moving it nice and simple so we can close that like so now what we want to do is actually set up spawning this in when we damage a player so for me I'm just using the third person blueprints now I'm in a first person template so what I did was I just did add add feature or content pack and I added third person like so you don't need to do that I just did it for a nice quick character so I'm going to select the character I want drag him in like so and then I'm going to open it up so again you do whatever it is you want whether it's another player it's an animal or it's an anime it's an AI whatever just open up what you are damaging and then you go open full blueprint editor and in here very simply all I'm going to do is right click and get event any damage so you might already have this set up if you have a damaging system if so perfect just add this onto the end what I'm about to do now here you would normally have your like your health minus the damage and then the death system all that again I'm not going to go into that today but I do have other videos going over that if you want all I'm going to do is after you've done all your damage code we want to spawn actor from class with the class being our BP underscore damage amount and the spawn transform is going to be get active transform so we're spawning in our damage where the player currently is or the AI or whatever it is for you and you can see we have damage Mount here as well because we did instance editable and expose on spawn that we're just going to connect into damage on event any damage here so however much damage the player is taking will be put into this blueprint that blueprint will be spawned which will spawn in the widget with that damage in as well and it will move and fade you can kind of see how it's all piecing together now so compile and save that as again that is all we need to do in here just make sure we're spawning in the blueprint we'll close that now now you may already have this part set up but what I'm going to do is actually apply damage so for me I'm going to be doing that inside of my projectile blueprint so that'll be first person blueprints BP first person projectile you might have this code set up what I'm going to do is just delete these bits here as I don't need them just for what I'm doing but if you want them keep them then out of event hit I'm going to apply damage like so damaged actor being other the base damage what I'm going to do is just right click get a random integer Max being 150 for example and the return value going to the base damage there for you you would probably want to set this up to be an actual damage amount or based upon what gun you're using or have it be random but not zero to 150 choose what you want but for me for the purpose of this video just to Showcase it working I'm doing a random integer like this then out of Applied damage I'm going to go into destroy actor like so just to get rid of the projectile afterwards so compile and save that and again the two things I've just done while we apply damage and do event any damage you will want to make sure you customize that perfect for you so again I'm doing this where I'm only spawning in the blueprint on damage I'm not actually doing damage and I'm applying a random damage to everything that I hit so again I do have other videos going over this in more detail if you want but once you've done that we can close this like so and with that that should now be it done working for us it says hit play and test it out I'll go over here pick up a gun and I actually have two spawned in but it doesn't matter if I hit it you see 14 82 107 2 so we now have a random a number spawning in and it's going to be with the font the color everything will be set up everything to move around it's going to be constantly facing the player perfectly like so and it gets a random number because that's what I chose spawns in Fades on Fades off and actually moves in the direction we set up as well so this is working perfectly so I think that'll be it for this video as we've done everything we've wanted to do what we've done is we've set up a damage indicator system similar to what you see in fortnite where when you shoot the player the amount of damage you are dealing to that AI or that player whatever it is it's gonna appear on screen so you can actually see what it is and it's gonna have a nice fade and move location like you can see perfectly here so thanks so much for watching this video I hope you enjoyed it and I hope you found it helpful and if you did please do make sure to like And subscribe down below so thanks so much for watching and I'll see in the next one [Music] foreign [Music] oh

Channel: Matt Aspland

Views: 6,691

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, blender, unity, games design, ue5, unreal engine 5, unreal engine 5 tutorial, ue5 tutorial, fortnite, damage, indicator, widget, real world, in game, amount, display, show, show damage dealt, fortnite show damage, display damage, show damage amount, dealt

Id: 5UEi7yruUtI

Length: 16min 7sec (967 seconds)

Published: Wed Mar 22 2023