How To Create An Interact Dot Crosshair - Unreal Engine 4/5 Tutorial

hey guys and welcome back to another unwrenching five tutorial in today's video what i'm gonna be going over is creating interac dot so what this means is when you hover over something which you can interact with when you look at it a dot will appear on screen or crosshair to just basically inform the player that they can interact with it so let me hit play and show we're going to make today so if i were to look over at this floor object here or this circle here nothing happens because obviously we're not going to interact with that however if i go over to this cube i can interact with it so i've now got this white dot appearing on screen whenever i look at it and you'll notice if i look up here it's easier to see because it's white it doesn't actually appear when i look away from it only when i'm looking at it because i can interact with this and if i go to this cube nothing happens because again it's not one which i can interact with so this will only come up with something the player can interact with so this is what i'm going over and creating today so without further ado let me take this code and i'll show you how i've done it i should also mention as well that this does work in armor engine 4 2. so the first thing we want to do is want to actually start creating the widget or basically the dot which will appear on screen so what i'm doing is i'm going to be using an image of a white dot which we have here the size i've gone with is 20 by 20 pixels it doesn't have to be that big it can be bigger it can be smaller whatever you want that's just the size i've gone with because it's very easy to see which is especially useful for a tutorial so once you've got that and imported it in and i will leave a link in the description down below to the one i'm using as well but once you've got that what we're going to do is right click go to user interface and create a widget blueprint and we're going to create a user widget i'm going to name this one interact dot widget like so as that makes the most sense for me we're going to open this up straight away and in here we're going to go to panel canvas panel and add that into our widget here then all we need to do is add an image into that selecting this image to be the intrax dot we just imported and now we have it in here the final thing to do is just resize and reposition it so again you'll notice mine is 20 by 20 on the image size there so i also just want to change the size x and size y to be 20 by 20. then i'm going to anchor it to the middle of the screen as that is where i want it to be positioned set the position y to zero and zero and if we zoom in you'll notice it's not quite centered so for me for this size 20 by 20 i found the position x and y give me minus 10 and that will then be positioned perfectly but this might be different for you so what you can do is just use the arrow keys to move it about just to get the perfect position for what you want so again for me let me just re-put it to -10 perfectly like so obviously when it's this small you might already be able to tell if it's just a couple pixels off-center however i just like to be as perfect as i can so once we've got all this set up that is literally all we need to do inside the widget this is now that set up for what we're going to see so we can compile save and close that like so next we need to actually start creating the functionality of putting this on screen so what we're going to do is press control space again and then go to our player blueprint so we can go to third person blueprints third person character or first whatever it's named for you and what you'll notice is i've changed it from third person to first person as this mechanic obviously works better in first it does work in third person as well but it's better in first person so if you want to change your third person character to first person like i've done here i'll leave a link on screen now and in the description below to where you can watch my video on going over how to do that once you have done we're going to go over to the event graph and what we're going to do first is get event begin play so you can hold down p and left click or if you've already used it you can right click and just search for begin play and it will take you to it like so if you have already used it you can also hold down s left click to get a sequence connect to that in there with then zero go into the code you already have and then one going to the code we're just about to do now so what we need off of eventbeginplay is we want to get a create widget with the class being the interact with dot widget we just created and the return value we're going to right click and promote a variable naming this interact dot widget so now we have a reference to it that we can very easily and quickly go to so we can put it on and off screen whenever we need to so we'll compile and save that now under this we're going to be using event tick now you might hear quite a lot to never use event tick it's very bad for your system that is true however you need to just take the grain of salt especially the never i wouldn't say never use it just never use it when you don't need to with something like what we're going to be doing here we need it to be constantly updating so whenever the player moves it's going to update that or if something moves in front of the player it needs to begin be updating so the easiest and most efficient way for us to be doing that is on event tick because what we're doing as well is not demanding at all so it'll be perfectly fine and what we're doing is first off we're going to hold ctrl and drag in the interact.widget to get it then we're going to right click on it and convert to validated get connecting that in there like so and what this is doing is it's the exact same as just getting an is valid so we're going to see if this variable is valid because the event tick often times fires off before event begin play which means we'll be getting this before it's been set which will give us an error which we obviously don't want so this will resolve that like so out of is valid we're going to get a line trace by channel perfectly like so and this is going to be looking at where the player's camera is looking so we want to get the camera out of this we're going to get world location so we're just getting where the camera is in the world then out of that return value that can just go straight into start but we also want to get an ad which will go into end so get world location goes into start of the line trace and it goes into an addition node which goes into the end of the line trace now what are we going to be adding to the get world location well that's going to be the direction in which the player is looking so we can drag out camera and get forward vector because obviously the player wants to be looking forward and to define a length of this so how far forward the player is looking we're going to come out the return value and get a multiply then we don't want to multiply it by a vector we want this to be a float so we can right click the float icon here go to convert pin and get a float single precision and we're going to change this to the value which we want which for me is 500 so the player can look 500 units in front of them so basically anything that is more than 500 units away the player can't interact with and that is going to go into the addition there like so and we can just neaten and tidy this all up for example double clicking these lines to get some root notes perfectly like so and i think that is going to be good for me so now again we're just seeing where the player is looking after this what we're going to do is hold down b left click to get a branch with the condition being the return value so if we did hit something and the out hit we're going to break hit result so what we hit we're going to open it up like so now out of the hit actor on the break hitch result we're going to get does implement interface and we can close this like so because the way we're doing this is we're going to be using blueprint interfaces now if you haven't got that set up don't worry i'm going to be going over it later on in the video and because i've not created the interface just yet i'm going to leave that as blank however if you already have an interact interface just put that in there then we're going to hold down b left click to get another branch with that being the return value and it's going into true of the first branch so again if we did hit something and if we did hit something we want to put the widget on screen if we didn't we want to take it off screen so what we're going to do is get our interact.widget once again and we're going to see if it's in the viewport so get is in viewport the reason we're doing this is for two reasons one to see if we want to add or remove it from the screen and two because if it is already on screen and we still want to put it on screen we don't need to continue doing that we only need to do it once so that is why we're doing this here so let's hold down b left click to get another branch we're doing a lot of checks a lot of branches here with that obviously being the condition so if it is in the viewport i.e true what do we want to do well this is putting it on screen but it's already on screen so we don't want to do anything so true will be blank out of false so we want to put on screen but it isn't on screen we're going to put it on screen so we can then get our interact.widget again and out of this we're going to add to viewport just to put it on screen like so and then obviously once it is on screen this will be in the viewport which means it'll be true next time so nothing is going to happen then out of false of this branch just before that is what we want to be taking it off screen so we get another branch connecting that into false like so the condition is once again going to be is in viewport like so and this one is going to be the opposite so if it is in the viewport i.e true we want to remove it if it's not in the viewport i false we don't want to do anything so we're going to again just simply remove from parent from the interact.widget perfectly like so and this will now work however there's one more thing we need to do back towards the first branch if this is false we want to again see if it is in the viewport and then if it is remove it because this means we're no longer hitting anything which means we definitely can't interact with it so if it is on screen we need to remove it so we can just bring this down here like so and what i'm going to do is actually double click this to get a root node connecting that in there like so just to again keep it looking nice and organized perfectly like this and that is now all the code done that's everything that we need to do so let me just go over this once again we're going to be seeing where the player is looking if they're looking at something we want to see if we can interact with it if we can we're going to add it to the screen if we can't we're going to remove it from the screen obviously it being the interact.widget so we'll compile and save that then we're going to minimize this and we're going to create our interact interface now i'm going to be going over this very very quickly as i do have other videos going over this more in depth which i'll leave links to on screen now and in the description below again i'm just doing this very basic and quickly just to show you it's set up and working so what we're going to do is right click go to blueprints and blueprint interface then i'm just going to call this interact interface like so open this up straight away and you want to name the function interact in compile save and close that that's all you need to do in there then back in our third passion character blueprint this does implement interface we can press this arrow here and we'll input our interact interface if it doesn't do that simply open it up and then search for the interact interface which you've just created and put it in there like so and we'll compile and save that once again then we can close this and now that is all set up and working all we need now is an item to actually interact with so again i'm going to do this very quickly right click blueprint class actor this one will just be a cube bp and i'll open that up add in a cube and i'm going to make this black just so my white interact dot shows up easier on it just again for the purpose of the tutorial and i'll also add in a box collision for something for the player to collide with so they can interact with it like so and we'll compile and save that close it and now this is everything completely done and working for us so let's hit play to test out after obviously putting the cube in the level like so so again if i just look at random things it's not going to come on screen as we can't interact with them if i just look at this cube however it's also not coming on screen so let's have a look at why that is doing that i'll tell you what i've just figured out is because we didn't actually make this item interactable so so very sorry about that just completely skipped my mind let's open up our item bp once again so for me as qpp and all we need to do is at the class settings we need to add the interface of our interact interface so now this is actually interactable and you'll notice we've now got this interface function down here this is where you then add in your code for interacting with it but obviously i'm not going over that today so now this should work perfectly for us because we've now made this interactable again we can look over else nothing happens but we look at the cube we can interact with it as you'll see we have this dot here if i have to look away from it the dot is going to disappear it only appears when we are looking at it perfectly like so so i think that'll be it for this video as we've done everything we want to do what we've done is we set up this kind of interact dot widget again i don't know the best way to describe it but basically a crosshair which will appear when we look at something which we can interact with perfectly like so and again it's very easy to adapt onto multiple items and to different things which 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 make sure to like subscribe down below so thanks so much for watching and i'll see you in the next one [Music]

Channel: Matt Aspland

Views: 16,995

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, interact, interface, interfaces, widget, hud, dot, crosshair, interact dot, ue5 interact dot, ue4 interact dot, ue5 interact, ue4 interact, cross, hair, item, use, looking at, when, when looking at, look at, object

Id: 353PF7IRiu8

Length: 13min 8sec (788 seconds)

Published: Sat Jul 23 2022