Press E To Interact | On Screen Prompt - Unreal Engine 4 Tutorial

hey guys welcome back to the unreal engine 4 tutorial in today's video i'm going to show you how to have a widget on screen which shows the player press e to interact or press f to interact or something like that so that when they are close enough to something for example a door it will tell them to interact and also when we do it will look slightly different so i'll show you what that looks like now so for in this example it's a door so i walk up to it it has that on screen i walk away it comes off like that and then if i press e you can see it went a little bit darker like that just so it gives the player the impression that they have actually pressed it it's just something a little bit nicer just to make it look a lot better so i'll show you how to be doing that now so our first step is going to be to actually create this widget so to do that what we're going to do is right click go to user interface and get a widget blueprint i'm just going to call this interact prompt widget just so i know what it is like so then open that up straight away and what i'm going to do in here is just get an image so drag drop an image in here so i'm going to import this now so if i just minimize this and i can just simply drag and drop it in and make sure that it is a png well that's only because i have a transparent background but habits whatever you want but this is what mine looks like so like this so this is what i'm going to be using so you can save and close that and then put this into the image here if you already have it selected hit this arrow there to get it in and then scale this up to however big you want i've decided 200 by 200 is good for me then what i'm going to do is just anchor it to the bottom here or wherever you want it and just move it in place like so so i think that is going to be a good location for me and then i'm going to get some text so again just drag and drop that in there and this i'm just going to put in here press e to interact obviously you can customize this however you like this is just the basic part i'm doing and again remember to anchor this down to where you want it to be so it doesn't move around it stays in place like so then i'm also just going to give this an outline which is under font outline settings i'll give this maybe three just to make it stand out and make it easier for the player to read so i think that is going to be good for my interact widget so again customize this however you like but this is how i want it to look but then how do we make it so when we actually press e the button goes darker so it looks like we've actually pressed it once to do that what we're going to do is select the image here and then just scroll down until you find the color and opacity we're going to remember what these are now so it's one one one and one very easy to remember hit this bind here we're going to create binding now what we'll do is we'll just drag this return node out a little bit and we'll also duplicate it so ctrl c ctrl v like that and then on this top return value here we're going to right click we're going to promote the variable and this one is going to be called pressed like that and we'll just move that there so it looks like that and we'll right click on this other return node and the return value of that again promotes variable and this is going to be called normal and these are variables for our different colors so it's going to be the color of our normal and the color of when we press it so our normal again we're going to compile that so we can get the default value and like i said to remember what the color was if we check again it's one one one one so i can then just put that in here so select the normal and then change this to one one one one and now for the pressed i just want this to be a little bit darker so i'm just going to lower these values a bit but if you want to change it slightly differently you can just select the color there and just move this about to get what you want and then get these rgba values down here so what i want is i think around 0.3 so i'll just cancel that go back here select the pressed again and then get 0.3 in the red 0.3 in the green 0.3 in the blue and then make sure to keep it one in the alpha as the alpha is the opacity so unless obviously you wanted to make more see-through give it less opacity change that so we can compile and save that and then we're going to hold down b left-click to get a branch plug that in there the true is going to go into pressed the false will go into normal by which i mean these colors here and the condition i'm going to create a new variable of this being a boolean and i'm going to call this is pressed like that and then drag and drop that into there like so with the default value of obviously false so basically when we press the button it's going to change it to this and then when we're not pressing anymore it will then go back to the normal so that's all we need to do in there so we can compile save and close that and then we're going to open up our door blueprint or the blueprint of which you want to be able to interact with so for me again this is going to be a door if you don't have one you can just get a blue right click blueprint class get an actor i'm going to open up my door so then i already have the door opening code which as you can see is this so this is just to open the door here this is where we're going to interact with it so if you don't have this what you can do is with the box collision which is where we're going to be for this prompt to appear what you can do is just go in the viewport up in the top left to get add component and get a box collision which is this here and scale this up to however big you want it to be again this is where the player is going to be for it to appear on screen and then back in the event graph right click on that box collision in the top left add event and add on component begin overlap and end overlap and the other actor you're going to cast to your character and then what we're going to do as well up here is get our get our interact key or your e keyboard event or anything like that and if you don't have one you go to edit up in the top left project settings then go down to input and create an action mapping call it interacts and set it to the e key the f key left click anything like that so i'm kind of going through that bit a bit quickly as i assume you've already got it set up if you're just now here looking for the prompt but i will also be leaving up in the top right hand corner of the screen a video of how i set up this particular blueprint for this door but anyway once you've done all that what we're going to do is back down here on the beginning and end overlaps like i said this is where the prompt will appear and disappear off of the begin overlap so out of this cast what we're going to do is then create widget like so with the class as obviously our interact prompt widget that we just made the return value is again is obviously going to be add to viewport so when we enter the box collision it's going to put this on our screen when we leave we want to remove it from the screen so to do that we come out the return value of the create and just remove from parent which like i say is just essentially going to take this off our screens so that will work perfectly like that and then again make sure to put these into the open and close of the gate accordingly like so so now what this is going to do is put on and remove the widget on our screen so i'll just comment that of add and remove prompt from screen like so and then up here what we're going to do is we're going to set this is pressed boolean that we made earlier so again to come out the return value for the create widget we're going to drag it over here and we're going to set is pressed or whatever you name that boolean plug that to the pressed of the interact there and we're going to set this to true so take it then hold down d left click and get a delay the duration of this we can leave a 0.2 or however you like this is essentially how long you want the button to be that gray out color so the color we have for pressed this delay is the length that will be so i think 0.2 or 0.3 will be good for me but customize this to how you want then we're going to do is come out the return leave the crate which again and once again set is pressed plug that into the delay there and now we're going to set this to false so this will then go back to the normal color and then make sure that goes back into enter so this is the open and closed door code so what we've done is when we walk into the box collision it's going to put this on the screen when we leave it it will then remove it from the screen and if we press it the color is going to change to look a bit darker so it just gives the player that more visual aspect of actually pressing the button so that should be done so we compile save and close that and then i've already got it in here but you can drag and drop your blueprint in here now we can test this out so if we hit play we walk up to it we get that on screen we leave it comes off our screen so we have that on our screen so it says press e to interact whenever we are in the vicinity of it now if i actually press it you can see it went darker and then went back to the normal color perfectly just to give that visual aspect again of pressing it so that works perfectly so i think that's it for this video so we've done nothing i want to do we've set up a widget so that when we're close enough to the thing we want to interact with it will tell us press e to interact and it also gives us an image which darkens and changes color whether or not we are pressing the button or not so thanks so much for watching i hope you enjoyed and i hope then helpful and 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: 102,839

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, 3d modelling, blender, unity, games design, graphic designer, ue5, unreal engine 5, interact, press, press e, press f, to, to interact, on screen, prompt, player, for, the, see, understand, teach, how, press e to interact, open, door, open a door, action mapping, widget, overlap, close, enough, it, box, collision, when, distance, far, away, left click, be able to, how to open a door, create

Id: Os7uf-wiU8o

Length: 8min 27sec (507 seconds)

Published: Sat Nov 07 2020