Text On Screen When Picking Up Items - Unreal Engine Tutorial

hey guys and welcome back to another version 4 tutorial in today's video i'll be showing you how to create an interaction prompt or text which comes on the screen i'm not quite sure what to call this or how to describe it so if i go in and hit play to show you that's the best way of showing you what we're making so we'll go up to an object like this and then when we press e to pick it up it's going to come up with this text on the screen obviously that there's just a load around the letters to show that it will all fit on the screen however we want that was just a test if i pick this one up as well it will say this is a cube for example so again when we pick something up it is going to just come up on screen with some text so you see this quite often in story games when you interact with something pick something up it will give a brief explanation of the object or maybe some story law or anything along those lines so this is what we're setting up today so again i'm not quite sure what to call this but it was a request and so without further ado let me delete this code and i'll show you how i've done it so the first thing you want to do is you want to set up the widget in which this text will be appearing on so it's very simple what we can do is we can right click in the content browser go to user interface and create a widget blueprint and i'm just going to name this interaction prompt widget like so opening it up straight away and then what i'm gonna do in here is i'm gonna add something called a size box i'm gonna drag that in here like so onto the canvas panel and what the size box will do is that will mean the text will always be in a certain area on screen so it won't go across the whole screen or come off screen or anything like that it will stay perfectly where we want it to be and adjust the size accordingly as well so we can have something really short or something really long and it will still all fit perfectly so i'm going to move this size box to be why i want it on screen like so so i'm thinking about this size in about this position will do me nicely so i think that's going to be good for me so i'm just going to even this up a bit to size x the width i'll have a 6 30 the size y the height i'll have as 155 and then i'll just center this up a little bit more again and then change the anchor to be where it is as well so it doesn't move about on screen so i think that position and that size on the screen is going to do good for me if i select it again what we also need to do is change the width and height override so i'm going to change the width override to be what my width is which for me is 630 so that's the size x for what you have and then i'm not gonna change the height override i'm gonna change the minimum desired height and the minimum desired height for me i'm gonna have as one five five so what that means is that if the text needs to be bigger it will be bigger than that if it needs to it will make it taller or longer but it just means that by minimum it will be the size so setting that up to be how you like and then what we're going to do is we're just going to simply add some text in here so we drag some text onto the size box and now we have that in there like so if we select the text you can change what it is and all that good stuff you can change its color its font its size anything you want all i'm going to do is make it so it's centered and centered in the justification there as well so it's all in the middle like so and then we're going to take auto wrap text because that is what's going to make sure that it does fit the size box perfectly is we have to wrap it so again wrapping just means it will follow this perfectly how we want it to and the wrap text at is where it's going to do it at so if we leave it at zero what it's going to do is just completely render it as it normally would so the full size of it and then a frame later it's going to correct it to what it should be so what we want to do is if we change the wrap text at to be the maximum length we want it to be it will do automatically without having to render it first because it knows where it needs to change it from so at 0 it doesn't know where it should wrap it at but if we input telling it where to wrap it at then that will work perfectly for us so it's just a nice simple way of making it look a bit better because otherwise you will have one frame where the whole thing flashes on screen so to figure out where it should be what we can do is select our size box again and look at the width override for me that's 630 so the text we can put it at 630 as well but i'm going to put it as 620 just to make it a little bit better so it doesn't go all the way up and then maybe messing up and just in case we have a long word i might even put it down to 600. so again just customize that to get it perfect for the size which you want and you have but for me these are the values which are going to work now one final thing we need to do in here is we obviously want to create a binding for this text so we can change it so i'm going to hit the binding on the text there and then create binding very simply all i'm going to do is right click the return value promote it to a variable naming this interaction text or interaction prompt or anything like that and then that's what we need to do we can compile save and close this because we're just going to change this variable here dependent on what we wanted to say so we can close that like so and now we're going to open up our interactable object so for me i just have a blueprint actor of interactable item bp so you can right click go to blueprintclass and get an actor and the reason i've already got this set up is because i just have the basic interaction code in here already so all i've done is in the viewport i've added a cube and a box collision and the event graph i've got begin and end overlap with enable and disable input on there as well for that box collision and i've got this set up just so i don't have to go over it too much but if you don't know how to do this i do have different videos on creating a simple interaction like this and i've also got another video on creating blueprint interfaces which are a lot more efficient which you may want to use instead but once you've got something along these lines set up what we're going to do is create the widget so off of enable input with a begin overlap we're going to create a widget like so with the class being our interaction prompt widget we just made and out of the return value what we can do is we can set interaction text like that connecting that in there so now we just need to figure out what we want to set this text to so we can right click on the return value again promote it to available and i'm once again just going to name this interaction text keeping it nice and simple like so and then we can tick instance editable and expose on spawn compile and save that and now what we'll be able to do is when we place down this object in the world we can change this interaction text variable to be different for each instance of this blueprint so we can use the same blueprint and have each one say something different which is going to work perfectly and then after this what we want to do is want to right click and get a gate because again what this is going to do is now set the text on the widget in the size box all that stuff we just set up it's going to set it to whatever we set this box or this object to be and the set is going to go into the open of the gate the disable input will go into the close of the gate or just the end over that we'll go and close and enter wants to be our interaction key so for me that's going to be the e keyboard event like so you can obviously set up an action mapping or have it set up anywhere you want but for me and the purpose of this tutorial the e keyword event is going to work fine then out of exit of the gate this is where we want to actually interact with this object so what i'm going to do to give us the illusion of picking it up is i'm going to get all of the components in here that i have so the box and the cube will work for me and then out of this i'm going to get a destroy component now i'm doing destroy component and not destroy actor because i still want the actor to be in the world so i can still control widget from this actor so just to give us the illusion i'm going to destroy the components so the player isn't aware that it's here and the collision is gone and all that good stuff as well so once you've destroyed those we want to add the widget onto the screen so we come out the return value of the create widget again and add to viewport which is again going to put the widget on screen and because we've already set the text the text should be on the widget perfectly already by the time we've added it onto the screen like so i'm just going to double click these lines to get some rewrite nodes to keep it looking nice and organized and then after this i'm going to hold down d left click to get a delay and this delay is how long the widget is going to be on screen for so i'm gonna set it to three seconds you can set it to whatever you like at the start of the video in the overview i had it as two seconds so again just do this however you want for how long or how short you want it to be on screen for and then the completed of the delay i'm going to come out of this blue line again for the return value of the create widget i'm going to get a remove from parent like so and what that's going to do is that is going to then take it back off the screen again so three seconds after we've added it onto the screen we're going to remove it from the screen and then after we remove it from the screen we also want to get a destroy actor which is then just going to remove the whole object from the world and from the game again just helping to keep the game nice and efficient and running smoothly and this is the code done so what we've got is we've got it so we can pick it up so we can interact with it and when we do pick it up it's going to set the text on the widget where first it's going to create the widget then set that text to what we want it to be dependent on the object that we are picking up and then add it on screen three seconds later remove it from the screen so you can compile save this and we can close it as well and what i'm gonna do is we'll delete these and i'm going to drag in the blueprint act that we have now for the object to drag it in and you can see that under the default here we have interaction text which is that variable we made earlier so what i'm going to do is i'm just going to write something in here like this is the default cube like so so now when we pick that up it should say this is the default cube i'm going to add in another one here and in this i'm just going to spam a load of random letters and this is just so that we can see if the size box is working and the text is wrapping how we want it to be i'm gonna get another random one in here just saying testing testing one two three so now if we hit play let's test this out so we go over to this cube we pick it up that works and it says this is the default cube working perfectly like so and it removed it from the screen as well if we go over here it has all those random letters and as you can see it is sized to the screen perfectly as well and then this one it just says testing testing one two three so as you can see this is working how we wanted it to when we pick it up the text will come on screen and it will go off as well and it will work perfectly depending on which object we picked up it will say something different and the text will wrap to the screen fitting it how we want as well so i think that'll be for this video as we don't ever want to do as i've just went over we can pick up an object and it will come up on screen with some text dependent on the object we picked up changing each time and the text will wrap to fit perfectly on the screen as well depending on where we want it and how big we want it to be so thanks so much for watching i hope you enjoyed 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 in the next one

Channel: Matt Aspland

Views: 29,802

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, dynamic, dynamically, interaction, interact, text, pick up, pick, up, item, object, items, objects, tooltip, prompt, when, pressing, story, interaction text, interaction prompt, on, screen, on screen, cube, inventory, system

Id: 4X3AavSnS10

Length: 11min 11sec (671 seconds)

Published: Fri Jun 04 2021