How To Make A 3D Interaction Prompt In Unreal Engine 5 (Tutorial)

hey guys and welcome back to another Unreal Engine 4 and 5 tutorial so today to do what we're going to be going over is how to create a 3D or an in-world interaction prompt for your games so let me hit play and show you what we're going to make today so as you can see I have three cubes here but I can't actually interact with but let's just pretend I can if I want to walk up to them you can see we have this interact bump that comes up here it has an e on it and it says interact and that is just a signature player that a you can interact this and B you have to press the E key to be able to do that and again it only shows when we are near it and it's in the world so it's always going to face the player as well no matter which way they are looking at it it'll always work the same way so this is what we'll be 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 obviously want to create this widget that we are going to be showing to the player so the first thing to do is we want to create the interaction prompt to show to the player now the way we're going to do this is through a widget so I'm going to right click go to user interface create a widget blueprint I'm going to create a user widget naming this one W underscore interaction prompt opening it up straight away then in here what I'm going to do is I'm going to add in a vertical box straight onto here and in this vertical box I'm going to add in an image and a text now if you don't want the image you don't have to do that you can just do text if you want but for me I do want the image and this image I'm going to set to be this e icon which I have got here but again you can also use whatever you like now what we're also going to do is up in the top right we're going to change fill screen to be desired and this will now look a lot better to what we want and then I'm also going to set the size of the image to be what I want as well so I'm going to set it to be 32 by 32. I think that is going to look a lot nicer and a lot better for what I want don't worry if it looks a little bit squashed in here it will work perfectly afterwards and then I'm going to change the text box to also just say interact and then I'm going to give this a quick outline as well just to make it stand out a bit more and I'll give it an outline size of two now we can compile and save that and that's all we need to do in here we don't need to do anything else the rest of the code we're going to do inside of our interactable object so if we go to our content browser I don't have one so I'm just going to quickly create one now but if you do already have objects to interact with you can simply just add it on in there so I'm going to right click go to blueprint class create an actor I'm going to name this one BP underscore interactable opening it up straight away and all I'm going to do in here is simply add in a cube like so and this is going to be our object I'll just move it up slightly like so then what I'm also going to do is add in a sphere collision and this is going to be the area in which the player can actually interact with this object now if you don't have one of these already you will need to add one as that's going to show and hide the widget which we've just created for the prompt now let's also add that on so let's now add in simply a widget like so and then let's set the widget class to be the one we just created so w underscore interaction prompt now again you can see this looks a little bit bad and stretched here so let's actually go back to prompt and change a few more settings so what I'm going to do instead is I'm going to copy the vertical box and delete it and then put in a canvas panel and then paste it back into there like so instead change it back from decide to fill screen in the top right there so sorry about that I did it it's just a vertical box earlier for some reason it's not working now so if that happens we can just go back to a normal canvas panel like so then what we're going to do is set the anchor of the vertical box to just be in the middle of the screen except position X and Y to zero and the alignment to 0.5 and 0.5 then we can also just tick size to content for the vertical box as well and the interact text will set to be centered horizontally and vertically and the final thing we need to do is also set the horizontal and vertical alignment of the image to be centered as well now if we compile and save we go back to our blueprint we should see this is working a bit better we drag it up to be where we want and you can see this is what we have so again you can modify the size in the widget if you wanted so I might make the text a bit smaller if I wanted but I'm going to leave it like this the final thing we need to do in here with the widget selected we're going to set the space from world to screen and it will disappear but don't worry that just means it's going to constantly face towards the player camera so compile save and go to the event graph here would like these three nodes right click our sphere Collision add event add-on component begin overlap right click it again and add a component end overlap and this is just so we can show and hide the widget so if we select the widget we can set the default value of visible to be false so it's not going to be there by default we'll drag it into the event graph and then out of this we will set visibility on begin overlap we want to tick this so we are showing it and on end overlap we want to make sure it's not ticked so we are hiding it again now if we compile save close this and drag a few of these into our level and I'll also rotate them around as well so we get some different angles on them we should be able to see that when we hit play none of them are going to be there if we walk close enough to it it's going to pop up and it's always going to face the camera and we can see it perfectly like so if we walk away it's going to disappear again and this will work on all of them no matter where they are or which direction the the player's camera is facing relative to the widget and the object so I think that'll be it for this video as we've done everything we want to do today what we've done is we've set up this 3D or in World interaction prompt and this can be used for anything doesn't just have to be interaction but we can see that this appears in the world and will always be facing where the player is looking 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]

Channel: Matt Aspland

Views: 70,604

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, interaction, interact, prompt, 3d, in world, widget, floating, screen space, space

Id: kB1_qxNUi9Q

Length: 6min 21sec (381 seconds)

Published: Sat Jul 15 2023