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

hey guys and welcome back to another Unreal Engine 5 tutorial in today's though it's gonna be a nice quick one where we're simply just gonna be going over how to create an interact prompt so when you walk up to something you can interact with it will come up on screen saying press e to interact or whatever it is that you want to say basically just something so the player knows they can interact with this and how they can do that so if I were to hit play we can see we have a door over here if I walk up to it it's going to say press e to interact and I can press e and interact with it and we can walk through I'll see press e to interact again and as I walk away from the door that will then disappear so it only shows near enough to the door that we can actually interact with it so we have to be within the interactable radius in order for this to appear and this can also be used for anything it doesn't just have to be for interacting so if you just want to walk up close to something and have it say something else on screen this is incredibly easy to do that for so this is only going over and creating today so without further Ado let me delete this code and I'll show you how I've done it so the first thing we want to do is we want to obviously make sure we've got we've already created the thing we want to interact with so in today's video I'm not going to be going over how to create a door and how to interact with it but I do have many other videos which I'll leave a link to on screen now and in the description down below to where you can watch how to set up a door like I have in the video here but once you've got all that what we want to do is press control space to open our content browser and we want to then create a widget so we're going to right click go to user interface and create a widget blueprint we're going to create a user widget and I'm just going to name this one p underscore interact the P stands for prompt so I know that this widget is a prompt widget you don't have to do that but that just makes sense for me that's the name of convention I like to use so I'm going to press enter twice to open this up straight away like so in here we're going to add in a canvas panel and then also a text and this is all I'm going to do I'm only going to add in a text Block in here you can obviously add more if you want so you can add an image you can fade them so add animations but for me all I'm doing is just a text block with this I'm going to set the anchor to be the bottom middle position X and Y to be zero and then the alignment to be 0.5 and then five so that just means it's going to be positioned in this area on screen here and it will always stay there you can obviously move that to where you want but this is how I'm going to do it then I'm going to simply just set the text to say press e to interact it's as simple as that what I'm also going to do is set the justification to be in the middle so it's going to align its Center like so and that's sized content as well just to make it look nicer like this if you wanted you could also give it a little bit of an outline which is under font I believe and then outline settings there outline size are five and then let's move it down a little bit again so let's say four instead so I've got something which just looks as simple as this it looks alright doesn't look bad and again you can add more so you can add images more text and you can add animations down here as well if you want to defeat on or off screen but this is all I'm going to be doing for today so let's compile save and close that now what we want to do is go into the interactable actor so for me that's the door so let's go back to our content browser and open BP door here and you can see in here I've already got my code for opening and closing the door perfectly like so and I've got my door set up in here as well now what you're going to want to make sure you've got inside of your actor is you want a collision box in here so you can have a box Collision like I've got or you can have a sphere Collision essentially you just need an area for the player to be able to walk into and out of and have it collide with so again a collider like this if you want to you can use LINE traces as well instead of overlap events but today's video I'm going over overlap events so once you've got your box Collision in here sliced up to the correct size you want we want to go back to the event graph right click on box Collision add event and add-on component begin overlap right click it again add event add-on component end overlap so now we know when the player has walked in and walked out of our Collider out of other actor we're going to get an equal equal and what we're comparing it to is going to be get player character as simple as that so what this is doing is essentially making sure that it is the player character that is going to be interacting with this so if you have an AI it for example in your level if the AI walks up to your actor but the player hasn't you don't want it to stay on screen press e to interact because obviously the player pressing e there isn't going to interact because it's the AI That's walked up to it so we just want to make sure it only does it when the player goes up to it so I hope that makes sense and we're going to do that for both of them so we'll just duplicate this other actor equal equal get play character in there and I'm also just going to right click this and straighten it just to make it look a little bit nicer like so then we'll hold down B and left click to get two branches like so connecting that into the execution of these overlap events and the condition of the branch is going to be this equal equal so obviously if this is or isn't the player if it is so true we want to put it on screen on the beginner lap folks we don't do anything and end overlap true we want to take off screen and false not do anything because again when we enter the Box Collision we're going to interact when we exit the Box Collision we're no longer interacting so we want to put the interact prompt on and off screen accordingly but first to be able to do that we actually need to have a reference to this interact prompt so let's go up a little bit hold down p and left click to get event begin play or if you've already used it just go to where you have it then we want to offer this get a create widget node like so let's just move these down a little bit to give us a bit more space like this and in the class here we want to have our interact prompt so in search for p underscore interact the return value of this will right click and promote a variable naming this interact prompt or intact widget whatever it is that makes most sense for you then very simply we can go back to our Collision events here hold Ctrl and drag and drop the interact prompt in here to get it out of this simply get add to viewports that will go into true of the branch off of begin overlap and then we're going to drag out of it again and get removed from parent going to true of the branch of the end overlap so again as I said when we enter the Box Collision we're putting this on screen when we exit the Box Collision we're taking it off screen again so let's compile and save this and hit play to test this out and this should be working perfectly for us now so let's walk over to it we walk up it says press e to interact and it's got all the settings we just set up for it I.E the font location the outline all that good stuff we walk away we no longer see it on screen so if I just press e here nothing's happening if I were to press E when it tells me to press e the door is going to open and close like this so you can see this is working perfectly and again I can go through and as I walk away it's going to go off screen like this so I think that'll be it for this video as we've done everything to do what we've done is set up a simple prompt which is going to Simply say press e to interact when we are close enough to our actor in order to be able to interact with it and again this can be used for absolutely anything you want 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 as it really does help me in the channel a lot so thanks so much for watching and I'll see you in the next one okay [Music]

Channel: Matt Aspland

Views: 46,759

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, unity, games design, ue5, unreal engine 5, unreal engine 5 tutorial, ue5 tutorial, 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: BpS1D6J09KE

Length: 7min 47sec (467 seconds)

Published: Sat Feb 25 2023