Build User Interfaces In VIRTUAL REALITY For Unreal Engine 5

virtual reality has some really cool 3d interfaces and in this video we're going to be showing you exactly how you can create them for yourself in unreal engine 5. by the end of this video you will have created some really awesome floating ui elements such as menus and game pop-ups check out these other guides to help you get the most out of this video for now though let's go ahead and dive into unreal engine and get started with vr okay so the very first thing that we need to do now that we're inside of unreal engine is get ourselves ready with a widget blueprint that we can use for our 3d space or our vr experience now for me what i have here is a widget blueprint which is just a couple of buttons with some different rollover effects and some functionality tied to the exit button if you'd like to learn how to do this for yourself be sure to go ahead and check out my ui video i've linked that in the description down below with that being said if you'd like to create your own widget blueprint just a quick recap for those of you that haven't seen the video right click in the content browser go to widget blueprint and we are going to create a widget blueprint and give this any old name inside of here we're then just going to add a canvas panel and start plotting out the various different elements that we need for this such as buttons text and images for us though we're going to be using this menu that we have created already so now that we have a menu that we can work with one thing i would recommend you do is make sure that everything is anchored up to the top left hand corner and all of our ui widgets are all in the top left hand corner as you can see here with that being done what we now need to do is we need to proceed to creating a blueprint where we can actually bring that ui widget and bring it into 3d space to do this we are going to go ahead and find some empty space in our content browser and we're going to right click and we're going to create a new blueprint class and we're going to be using the type actor as this is going to be completely empty and we're going to be giving this the name spawn ui element and with this we're going to open it up this born ui element can be used absolutely anywhere and we can have different widget blueprints inside of here what we're going to do is simply go to components at the top and add and we are going to be adding in a component called widget this is going to allow us to take a 2d ui widget and plot it into 3d space so we're going to go to widget then inside of here we're going to go to the details panel on the right hand side and under widget class we're going to set it to your new menu that you've created for me this is called menu to access this simply click that drop down arrow there and then choose it and what you're going to see then is we've actually got our ui and it's in 3d space so if i go ahead and compile this and drag spawn ui element into the scene we can see we have our user interface in our scene it really is as simple as that and it already looks like what you would see in vr there is a couple of things that we need to do with this just to make sure that it works the first of which is we need to go down to the collision on the right hand side and we're going to make sure our collision preset is set to custom and we're going to make sure we've set this to world dynamic and 3d widget here is set to block with that done our ui is ready to go and what we can do is start setting up our blueprint for our character to be able to interact with this don't forget if you want to resize this go ahead and go over to select and scale objects pressing the r key and then scale this up or down as you like in this next section we're going to be showing you how you can create the widget interaction component to allow the player to actually interact with the user interfaces that you have already created and these are all going to be attached to the hand and it's really easy to set up let's go ahead and jump back into unreal engine 5. now that we're back inside of unreal engine let's get started then with setting up our interaction from our character blueprint a character blueprint for us is under vr template and then blueprints if you have your own you might have a different name but for us as the default vr project it is called vr pawn this is going to contain everything in here we need for our hands and our camera most importantly though because it has our motion controller left and right in here this is our motion this is our tracking so we know where the left hand the right hand is what we need to do inside of here is we need to make sure we've got the widget interaction component which is going to allow you to interact with those widgets if you don't have these parented to your motion controller left and right already what you need to do is go ahead and add these in by going up to components in the top left hand corner and searching for widget interaction and then we're just going to parent one to the left and we're also going to parent one to the right as well so just make sure that's in there one parented to the left one parented to the right a couple of things we need to set up with this as well just to make sure it works is we need to make sure our pointer index is different on both of these widget interaction components so our left is going to be zero and our right is going to be one our trace channel needs to be set to world dynamic on both of these as we just set up the collision for this and then what we need to do is on both of these we can then start debugging so we can test this by going to show debug and do the same thing on both of these what this is going to allow you to do is actually see some lines so you can see exactly what you're pointing at if we expand this we can see our current debug line thickness is currently set to 1 which is great what we might also need to adjust is our interaction distance at this point we should be ready to test our vr user interfaces let's go ahead and jump into our vr headset and test this out for ourselves okay so hopping in to test this we can see we've now got our debug lines on our controllers here so we can see what we can touch and if everything is set up correctly with our user interface widget that we placed in our scene here we should be able to hover over our buttons now right now we can't necessarily select those which is something that we're going to be covering in the next section but what you should have is your debug lines and you should have user interface elements that you are able to interact with and with these if we wanted to we could put these ui widgets anywhere we could attach these to our wrist to get a cool holographic display we could put it in the level we could get blueprints to make these pop up we can do absolutely anything with this coming out of here just for a second what i also wanted to show you there is a few controls that we can actually change within that vr pawn so we can see and make our interaction distance a little bit longer so if we open up our vr pawn and then inside of here if we select one of our widget interaction components we can change the color per arm so we can have one of those be green so we know the left from the right we can change the thickness and most importantly we can take this interaction distance here and we can either increase this or we can decrease this so if you want to set this to a thousand to make this reach a little bit further by all means go ahead and do just that okay the very next thing that we need to do is we need to set up some blueprints and some logic to tell the engine when to treat our aim and our tracker like a mouse because we don't want it like a mouse all the time we want it to be a game for most of the time so what we're going to do is write some very simple blueprints which are going to be telling the engine hey when we're holding down the trigger show a mouse button and interact with the buttons on our user interface just like a mouse let's hop into unreal engine and do this okay now that we're back inside of here and we've got everything working in terms of getting our ui displayed and getting everything to sort of work and interact let's show you how we can get these buttons to actually be able to be clicked and treated as if it was a pc experience with that being said what we need to do is set up a little bit of blueprints inside of our vr pawn class and of course we need some kind of functionality for our buttons so let's start off with the functionality for the button i'm going to proceed to go over to my blueprint that i've already created for my menu and inside of here i'm just going to create a simple unclicked event for the exit button we're going to be doing this in the exact same way that we would as if we was building this for pc so select the button go to unclicked and then what i'm going to do is simply create a simple piece of blueprint here when i press exit it is going to quit the game if it's the play button for example we could tell it to load another level and again all i need to do to do this is select this play button create another on clicked event and then with this we are going to open level by name and we can type in a name for it to load and get this working like a main menu with that being done with my functionality being set up before that exit button let's go ahead and hop into our vr pawn class under vr templates and blueprints and inside of here we're going to set up the functionality to get those interaction components working like the left mouse button to do this we are going to find our input actions for our trigger currently they're set up to work with picking stuff up and don't worry you can have both of these at once but simple code to show you how to actually enable that functionality we're going to break the link from our input action trigger left and right for clicking and we're going to take this and we're just going to put it in some empty space here and we're going to take our widget interaction components so for trigger left i'm going to take widget interaction component and with this we are going to be doing the press key function the press key function is press pointer key and what this is going to do is saying we are basically pressing this button so when we press trigger left it basically presses the left mouse button on what we're clicking on so to set this up from trigger left pressed we're going to put it into press pointer key if you can't find this drag out from your widget interaction and we can get this with the key we are going to be choosing left mouse button so type that in and you're going to be able to find it and we're good to go there we're then going to be doing the same thing for our trigger rights pressed left mouse button but with this one make sure the target reference is our widget interaction for our right controller and this is where naming this is gonna make it a lot easier rather than just widget interaction and widget interaction one what we also need to do so we can press this over and over again because if we don't release it's just going to be held we actually need to release that point of button and the way we're going to be doing this is when we release the trigger we release the left mouse button really straightforward stuff same thing drag out from your widget interaction and we do release pointer key and again we're going to be using that left mouse button so it releases the left mouse button when we do this so released target is the same and then do the same thing over here for our trigger left hook this up to our released press compile if it's not compiling you've probably forgotten your target so hook up your target hit compile and save and then with this we can hop straight back into vr and we can test this and all of our functionality should be good to go so with that being said let's hop in and if i go ahead and turn around now i might need to move so i can actually get to this and what i should be able to do is click on the buttons and you can see they're doing the click effect but most importantly when we press this exit button which has functionality it's going to quit the experience and we're back into unreal engine 5. okay at this point our user interface is working and good to go at this point we should be able to make vr menus and user interface elements i'd love to hear what you guys have been creating with this be sure to let us know down in the comments down below also don't forget to let me know what you want to see when it comes to vr content in unreal engine again in the comments if you'd like to reach out to like-minded vr developers just like yourself be sure to go ahead and join our discord server there's thousands of developers answering questions networking and all of that good stuff and if you'd like to support more free content just like this be sure to go ahead and check out our patreon page and unlock exclusive perks such as live mentoring early access to our videos and game templates that you can use for yourself that's it for this video though i hope you have enjoyed it stay awesome keep creating vertis signing out [Music] you

Channel: Virtus Learning Hub

Views: 54,726

Keywords: virtus creative hub, unreal engine tutorial, unreal engine, vr games, vr in unreal engine 5, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, ue5 tutorial, unreal engine ui tutorial, unreal engine 5 user interface, unreal engine 5, vr unreal engine 5, virtual reality, vr, ue5, unreal engine vr, how to make 3d interface, user interface, ui in unreal engine 5, game development, ui, user interface in unreal engine 5, widget blueprint, how to make a menu in ue5, 3d

Id: kM27HYbpvc0

Length: 14min 24sec (864 seconds)

Published: Sat Jul 23 2022