Hold 'E' To Interact | Time Dependant Progress Bar - Unreal Engine 4 Tutorial

hey guys and welcome back to another mansion 4 tutorial in today's video i'm going to show you how to interact with something or pick it up or absolutely anything you want it could also be open the door but essentially we're going to need to hold down a key in order to do what we want so in this example we're going to hold down e to pick up an object and we'll also have a widget on screen showing us how far we've progressed through holding it so let me show you what it's gonna look like now so i've got a three in here because it's also a dynamic system in which each individual blueprint can have a different time on it so this one here will take one second so we go up to it you see it says hold e to pick up we have a progress bar we hold e it will take one second to fill up and it'll be destroyed simulating we picked it up this one will take two seconds so you see that takes two seconds to fill up and pick up and this one i believe was five maybe three i can't remember what i said it has there we go it think i believe it's five so this works perfectly like so so we walk up to it we have a widget on screen telling us to press e or hold it sorry when we do we have a progress bar displaying how far we are holding it through and then once it gets to the end of that progress bar we pick it up or like i say do anything you want so it could be open a door pick something up interact anything you want so let me do this code and i'll show you how i've done it so what we want to do first is we want to create our widget which we're going to put on screen now we're doing this first because we're going to set up a few variables in here which we'll use in the blueprint so to do that what i'm going to do is in the folder you want to put this in we're going to right click go to user interface and add a widget blueprint i'm just going to name this hold widget as that makes more sense to me as i'm using this specific widget just for this but you can name this whatever you like and open it up straight away in here i'm going to add a progress bar like so i'm just going to scale this up to the size i want i think about two of these blocks will be a good size let's make it a little bigger like that so i think that's good and i'm going to anchor it down there as well so i'll put it to the bottom and just move up between the middle like that so i think that's going to be good and then i'll just add a text above this as well and in here i will just write hold e to pick up like that again you can customize this however you like i will just anchor it there again and also increase the fonts a little bit like so so i think that's going to be good for me this is just setting up to see what it's going to look like and that is good for what i want to do what we're going to do now is we're going to go to the graph here so we can set up a few variables we're not actually going to do the coding in here yet we'll do that later so the variables we want to set up and create are two very simple ones so we're going to hit the plus variable like so this one i'm going to name time held like so and i'm going to make this one a float so this is how long the player has been holding down their interact button for then i'm going to hit plus again and this one i'm going to name max time held or max time hold or anything leaving that also as a float and what this one is is how long the player needs to hold it for so time held is how long they have max time held is how long they should and actually we'll set up the code in here as well we may as well do that now so what we're going to do is go back to the designer select the progress bar here and then under progress and percent we're going to hit bind create binding what we're going to do in here is we're going to get the time held get time held divide that so come out with that and get a float divided by a float i'm going to divide it by our max time held like so and that return value will go to the return value of the return node and that is all the code in here so it's going to get the time held so the time the players hold it for amount of time they need to hold it for divide that by each other and then that is it so what it's going to do is the return value needs to be a value between zero and one so that's what this will do so if you need to hold it for five seconds we're gonna divide the amount of time we hold it for by five therefore getting it between a value of zero and one therefore filling up our progress bar how we want so in compile save and we can close that as that is all we need to do in the widget so now let's set up our item or whatever you want to interact with so for me i'm going to right click go to blueprint class again actor to create a new active blueprint this one i'm just going to name item pickup as that's what this is going to be but again this can be absolutely whatever you'd like to use this for now open it up straight away in here i'm going to set up a basic item so i'm going to add a component add a cube like so leave it as a default size and i'm going to add another component this one is going to be a box collision you're going to want to add this as well i'm just going to scale this up to be a little bit bigger than what it is and essentially this is the area the player has to stand in to interact with this so you can make this as big or as small as you want but the player has to be inside of this to pick it up or interact with it once you've done that we're going to compile and go to the event graph we'll delete these three nodes here then we're going to create a begin and end overlap event for this box collision so we're going to right click on the box edition up in the top left components list up there add event add a component end overlap right click on it again and event add-on component end overlap then for this out of the other actor for both of these we're going to cast to our character for me that's the third person character but for you could be the third person first person whatever you've named it like i say we're going to do that for both of these and this just means this is when our character is the one that is overlapping the box collision otherwise would be absolutely anything that overlaps it after this i want to come out of the caster third plastic character off the begin overlap we're going to get an enable input the one off of end overlap we're going to disable the input and this means we can only interact with it when we are in this box collision the player controller is just going to be get player controller and the target will remain itself put in like that after the begin overlap so off of enable input we're going to create widget like so and this class is going to be our hold widget that we just made and just set up return value of this we want to promote your variable i'm going to name this one widget ref because that's what it is it's a widget reference and out of this i'm going to then add to viewport so what this is doing is it's going to be adding this widget onto our screen when we're close enough to it and to remove it that's very simple we'll just come out the return value again and just get a remove from parents plugging that into the disable input there i'll just double click this to get some room nodes so this is doing is when we are close enough to the box we're going to enable the input so we can press e and put the widget on the screen when we get far enough away from it disable the input so we can't press e and take the widget off the screen so now we need to set up pressing e so i'm going to do this via an action mapping so let's go to edit project settings once this loads we're going to go down to input on the bottom left down here we're going to hit a plus action mapping now you see i already have quite a few this is just from previous tutorials i'm going to create an interact action mapping so we're going to hit the plus action mapping there i'm going to name this one interact i'm going to set this key to be the e keyboard event you can set this to be absolutely whatever you like and the benefit of using action mappings is being set up multiple keys keys for different consoles and we can also set up key bindings once you've created that action mapping there we're going to close this back in the event graph we're going to right click and search for what we just made so i need mine interact so you see we have action events interact there like so and now you can see we have that in here so we're going to do now we're going to create another variable so we're going to hit the plus variable here i'm going to name this one is held question mark like so off of the pressed of this action event i'm going to set it to true and off the released i'm going to set it to false so when this is true we are holding the e when it's false we're no longer holding e or your interact key so that is what that's doing it's just letting the system know if we're holding down our interact button so i'll leave that like that and just move this code up a little bit to get it there like so then towards the end of all this i'm going to hold down g and left click to get a gate plugging the enter into our set is hold to true the open into our add to viewport and i'll close until i remove from parent i'll double click this to reroute it again just to keep it organized so what this does is this means that if we are close enough and we press e we're going to fire off this code if we're not close enough when we press e nothing's going to happen there wouldn't any way because we've disabled the input however this is just a better way of doing it as well it's more efficient it stops it from breaking and you're being able to do it anywhere then off of the exit of this gate we're going to hold down s a left click to get a sequence plugging into the exit out of then one we're going to get a re-triggerable delay the reason we're using a retriggable delay is so that if the player presses e it's going to stop this so if they hold down e for three seconds and they need to do it for four if they let go and hold it again it won't start from three again it'll go back to zero or if they need to hold it for four and then let go at two if they press it again before that delay's ended it will restart at zero so it just prevents them from spamming it or breaking it or anything like that so a re-triggerable delay is what we want to use because what it does is i don't know if i explain that well what it does is essentially with a normal delay if you go back into the delay again so if this was normal delay set to four seconds we go back into it three nothing's going to happen with a re-triggerable if we go back into three it will start at zero and go back to four again so i hope that makes sense after completed of this we're gonna hold down b left click to get a branch plug in the condition as is held so what this is going to do is this means at the end of this delay it's going to see if we're still holding down e if we are then we want to interact with it so for me this is destroy actor but for you this could be anything so this could be opening the door picking up anything like that but again in this example i'm just destroying it but this here of the true of this branch is where you want to put your code for interacting with your object the delay of this so the duration of this delay sorry we're going to right click promote to variable i'm just going to name this one max hold time so this just means how long the player needs to hold down e4 i'm going to compile that we can set its default value i'm going to set it to 2 i'm going to also take instance editable or this little i down here which means we can change this to be different for each instance of this blueprint so if we put down multiple of these objects each one could have a different time so this is going to work perfectly for actually picking up the object or interacting with it but now we need to set it up so the widget works as well so this is also very simple to do so what we're going to do is just going to scroll down under here just in a little bit of space right click and add a custom event i'm just going to name this one timer like so i'm going to come out of this i'm going to set timer by event the event i'm going to plug into this little red dot on our custom event there meaning that when this custom event is triggered it's going to trigger this event as well the time we're going to set to be our max hold time here so whatever we set this value as it's going to have as the delay and the timer so again the time is how long we want it to go on for we don't need to do anything else with that just slightly above this we're going to right click add another custom event i'm going to name this one stop timer so if the player lets go of v we obviously want to stop the timer and we don't want it to continue so then out of the return value of our set timer by event we're going to just simply pause timer by handle not plugging it into the set timer but plugging it into stop timer now you might think we're just pausing it we're not starting it but when we then restart it it will just go back to the beginning it won't play it it will start from the beginning again so pausing it just means we're stopping it underneath this now we want to right click add another custom event this one is going to be update timer now this timer does update automatically as well but this is mainly the timer in the widget that i'm talking about so we're updating the widget so you can name it that if that makes more sense for you out of this we're going to hold down b left click to get a branch plugging that in there like so with the condition of is held so again this is just because we're making it to a loop so this is held it's going to stop the loop from happening when we're no longer holding e as that's when we want to stop the timer so offer false so if we're not holding it we're going to call function stop timer and we're also going to drag and drop a reference to our widget widget ref there just put it just slightly above that i'll drag out this and i'll set time held there back to zero like so so we're going to stop the timer from playing and we're also going to set the time held to zero meaning that the progress bar will go back to zero as well so this is what happens when we let go of our interact key before we pick it up or before it finishes playing then off of true so if we are still holding it we want to loop it and update our timer so we're going to come up with the widget ref again and set time held once again plugging that to the true this time like that i'll just move this other stuff down to give us some space and what we want to input as this time held is we're going to come out the return value of the set timer by event again i'm going to get timer elapsed time by handle plug in the return value into the set time held there so what this is doing is it's just just getting the time which is our lap since the start of the timer which is obviously going to be between 0 and our max hold time and it's going to set that to time held meaning this is going to be perfectly how long the player has been holding e4 with the interact key and then to loop this what we're going to do is out of set time held we're going to hold down d left click to get delay plugging it in there but the duration is 0.1 as you want to update this every 0.1 seconds out of the completed we're going to call function update timer like so so this will continually update the time held either until we let go of our interact key as that will then stop the timer or we interact with the object as that will then also stop the timer as well so this should now work perfectly for us so the one final step is to actually then use this so all the way back up here where we have our sequence off the exit at the gate we're going to come out then one call function timer to then just start the timer and out this we're going to call function update timer which then start that loop of updating our progress bar and our widget like that now this should work perfectly for us so we can compile save and then let's test this out let me run you through what we're doing again first though so if we end close enough to the box collision it's going to put the widget on our screen and if we're holding e and close enough it's going to do the code if we're still holding e after the time is done it's going to interact with our object which is here now while it's doing that so it's waiting for the delay it's going to start our timer so that we can put this into a progress bar on the widget as well and the timer simply is just going up to our max hold time which we're setting and setting the time hold in the widget as well we're just dividing it by how long we need to hold it for to get that progress bar percentage like so and obviously if you let go of e it's just going to stop this loop here stop the timer and it will then also stop it here because we're no longer holding it so this branch will come off as false so like i say let's compile save minimize and let's put some of these in and test it so i'm going to put one in here i'll set the max time to two i'll leave it as that i put another one in i set it to five or six i'll put another one in and i'll set it to one so now let's hit play and test this out so i'm just gonna go to first person to get a better view if i walk over to this one you can see we're close enough we have that on the screen so hold e to pick up now i left it as white text black would be better as this is a white object but that doesn't matter we're going to hold e you see it picked up we didn't actually get it on screen though and it's because we missed out one thing however you did see that we held it for one second and it interacted with the object so it picked up it destroyed it so this is a very simple fix to what we've done so we're setting our time held here but we didn't set the max time held so i believe we're probably just dividing by zero so all we need to do is simply just put it here in front of the gate so let's just select all this code including the gate move it out a little bit like so and then we're going to come up with the set widget ref again i'm going to set max time held plugging that in there and then into the open and the max time held is just gonna be our max hold time that we have in here so that is all we did we just forgot to set that variable in the widget as well meaning the progress bar didn't work so now with that little fix done this should work better for us so we compile save minimize here play to test this again we go up to it you can see that we have the widget come back on our screen we hold e the progress bar will fill up and it went all the way up to one when it got there it then interacted with the object we do it again here i'll let go this time so i let go it went back to the start i go it goes back to start and starts to begin as well and you can see the object isn't being picked up either so if you let go it doesn't get picked up so if we go all the way through it does get picked up at the end as well and the progress bar works perfectly and again we'll do it with this six second one just to show you it goes down and let's do it again so i think that'll be this video which we don't ever want to do as you can see there it works perfectly so like i say we set up a system in which we have to hold down e or your interact button in order to interact or pick up objects and this works perfectly with a progress bar when you let go it starts from beginning as well and doesn't interact with the object and it looks great as well works perfectly so thanks so much for watching i hope you enjoyed and hope find it helpful if you did make sure to like subscribe down below so thanks so much for watching and i'll see you in the next one you

Channel: Matt Aspland

Views: 27,226

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, ue5, unreal engine 5, interact, hold, held, holding, progress, bar, time, seconds, for, open, hold button, button, press, to interact, progress bar, hold e to interact, hold e, hold e to pick up, pick up, hold for, 2 seconds, increase, how to hold a button, start, restart, timer, over, again, time remaining, count, counter, counting, up, down, remaining, increasing, decreasing, decrease

Id: SD6RuyaqO9c

Length: 17min 9sec (1029 seconds)

Published: Sun Jan 31 2021