Create and Interact with UI for Virtual Reality - Unreal Engine Virtual Reality Tutorial

ui is essential in any game not just in vr because you need a way to interact with things such as home menu settings pause menus sometimes even other things such as inventory screens things such as that but it's a little bit different in vr because the way you interact with ui and vr you have to have a visible 3d menu that's somewhere within the world itself since you can't really have something that's attached to the screen have it work well like you would be able to do on a desktop so in this video i'm going to walk you guys through how to set up a user interface within unreal engine as well as widget interactions that way we can actually interact with this ui in the world so let's go ahead and jump right into it alright so i've already gone ahead um i've opened up a project to work in for this tutorial um i didn't decide i decided not to use the default vr template map that you get in unreal engine 5 simply because there's quite a bit going on there so i decided to clear it that way we have a nice clean workspace to work with for this tutorial i do also want to note real quick that i am doing the snowmail engine 5 however this will still work in unreal engine 4. you might have a slightly different process here and there because you have a slightly different designed character and things like that but it will still be the same process you'll be using the same components the layout should be fairly similar in most places but other than that you should be able to work in unreal engine 4 and follow this tutorial just fine uh all right so to start out we're going to go ahead and create our ui first so let me go ahead and open up like the content browser and what i'm going to do is create a new folder called ui and i can go and jump in here now in unreal engine it doesn't call it ui it actually calls it a widget blueprint so first you're going to right click we can actually go under user interface and you can actually see there's a widget blueprint and i'm just going to call this simple ui now this is going to handle everything about the ui it's going to handle the design if we have any animations or anything that we want to tie to the ui we can also add in any blueprint code to the ui as well so i'll go over all that real quick so if i go and open this up so this is the overall layout for our ui we can see we have our main display window here where we can actually look at our ui and how it functions then over here on the left we have our palette this is going to have things like borders buttons text images anything like that that we would need to place in our ui this is where you're going to find all those components i we will also be looking at the vertical and horizontal boxes as i think that those are quite useful to at the very least know how to use especially if you're gonna be doing any animations i'll talk about that a little bit more here in a second uh right below that we have our hierarchy and this is pretty self-explanatory it's a hierarchy this is kind of where everything that we have in our ui is going to go so we can actually see what's connected to what again this is where we're going to come into the vertical and horizontal boxes again later on down here in the bottom we have our animation stuff uh so you can see this is where we can actually list all the different animations we can do i'm not going to do any animations for this tutorial however this is where you'll come to do any of that kind of stuff and along with that we also have our timeline this is also tied to our animations how everything is going to function uh we also have our compiler results which we don't really need to worry about uh where we shouldn't have any thing that we need to compile that should cause any errors or anything like that right next up we have and then right up here on the right we have our details which again if you've messed around with unreal engine is kind of self-explanatory it is basically any details pertaining to for example text uh what font we're using the size of our font things like that we can also with buttons change the background color over buttons and things like that and then right up here uh this will look slightly different on android engine 4 but right up here you should still have a designer tab and you should also have a graph and if we actually click on graph this is where all of our blueprint stuff is and again this is pretty similar if you've messed around with blueprint before it's a very similar if not the exact same layout we have our functions variables details our event graph all that kind of stuff over here and we'll get into that here in a second as well all right so to start out we're going to go ahead and actually grab a border i'm actually attached to the canvas panel and actually i do want to size this to content too now you don't have to do this if you want to have it at a set size or anything like that you can of course set your size you can set the position uh all that kind of stuff i'm just going to send it to the content it will slightly resize later on when we actually go to use it but it won't be too much of a problem uh next thing we're going to do is we're actually going to create a vertical box now this is actually quite important so uh in when you're working with widgets or ui however you want to call it the not everything can have more than one child the border is one example of that border can only have one child vertical boxes however can have as many children as it wants and if we actually go and grab a button which i was going to use anyways we can actually see if we actually try and drag on the border it won't let us because it says that it can't accept any additional children it can only have the one vertical box does not have this limitation we can drag as many buttons as we want onto here i'm going to drag three onto here um but again that's going to be up to you and then i'm also going to drag some text and again if we actually try and drag onto the buttons you can see again we can't add any more than one text to our button so if you want to have anything additional that's again why i'd come back and say at you know put it through either a vertical or horizontal box so we can actually just go and drop that in here and you can actually see it automatically stacked up one on top the other and that's kind of what vertical boxes does it essentially stacks different widget elements on top of one another so you can actually see that it's automatically stacked everything one on top of the other we don't have to do anything additional however there is one additional thing that i do want to do and i do want to add some padding here i'm not gonna add too much here i'm gonna throw like 25 on left and right and for this top one specifically i think i want to add like 12.5 to the bottom oh that was top yeah you know we'll add some to the top as well but more specifically i want some to the bottom and again here uh left 25 right 25 and again to the top and bottom 12 and a half i think i messed that up and did not put right that's fine though nice easy fix and then again here 12.5 uh when i say 25 right yes 25 25 and again to the bottom i'll go into 12.5 okay so we've got now a very basic ui setup so this is what it's going to look like right now with what we have uh you can also see that we can actually fill uh or anything like that if we want we can also adjust different how it aligns again like i said we can adjust the color and opacity all this kind of stuff i'm not going to worry too much about all this kind of stuff since i'm just trying to keep it somewhat simple all right but next thing we're going to want to do is jump right over here into the text now because i want our ui to actually do something when we click on these buttons i'm actually going to change what these three text boxes say so in order to do this i'm actually going to go right into here into the details of our text you can actually see that we have uh an area here where it says text then we can manually input text so we could do like a wood up or something like that um but what i'm going to do is i'm actually going to go right over into bind and i'm actually going to not want to create a binding so if we actually create a binding this will actually create a function that we can actually modify but what i'm going to do is actually go right over here into graph i'm going to create three variables here now for a call they all need to be text if article so i'm actually going to change these all the text and i'm actually call this uh text 1 text 2 and text 3. oh i call that test text two and text i'm not typing right today and right over here to the designer so now if we go ahead and hit down this bind you can actually see i still ended up renaming that test one for one um but you can actually see that we have uh all three of the variables that we created initially so i'm actually buying this one to test one uh not text one apparently and then we have text two and and text three so this will actually bind so that way whatever is in our variables is what we will actually is what will actually be displayed in there so if you actually go right over here i'm actually going to rename this because that's going to annoy me if i don't rename that now uh why oh is it because it's still looking for test one yes it is my bad text one all right so that's all the binding's done so now if we jump right over here you can actually see that we have text one text two text three here and i'm actually going to just rename i'm just going to give these all a default value of press me with a low exclamation point at the end and i'm going to assign this to all three of them so that way we have values for all this and i'm actually going to get rid of all this because we're not going to use construct or anything like that but what i'm going to do is going right over here to the button if we actually scroll all the way down you can actually see that we have a whole bunch of different events that we can trigger off of now for a widget interaction component which is what we'll be using in order to actually interact with these buttons we want to use on pressed so in order to do this all we're just going to do is click plus on this on press and you can actually see it's already created our event for us and before i go ahead and do what i wanted to do with these i'm just going to go and grab all three of these and just get those events real quick and there we go so now using these three what we're going to want to do is uh i'm actually going to just rename these texts that way we can make sure that these buttons are working correctly so we can actually just drag off this and i'm just gonna say what up and this last one i'm just gonna say it's dude what up dude so so once we press all these they should all rename the the text within those buttons should actually be named to what up and dude so something different for each individual thing now of course if you want to do something different you can of course go through this you can do something different for each button press i'm not going to worry about doing some huge extravagant thing with all these buttons i just wanted to keep it simple but of course you're probably going to want to do something much more complex than this but that's all that we that we're going to do with this ui so now once we press all these three they'll all change text so i'm going to go and close this real quick and i'm actually going to go ahead and open our content browser again and i'm going to create a new folder and i'm just going to call this actor nice and simple and i'm going to go ahead and create a new blueprint class called actor and the purpose of this actor is actually going to be to give us something so so that way we can actually see our ui within the world so i'm just going to call this ui actor and go and open that up okay so we're not going to do too much to this what i'm going to do is i'm actually going to create is i'm going to add a widget not a widget interaction we're going to use a widget and this is just going to be called widget we're just going to keep it nice and simple i'm actually going to replace that as our default scene root so what this will allow for us to do is once we drop this in the scene we'll be able to actually go into here and change our widget class so that way this can actually be used with different ui and by using this we'll actually be able to have one actor that does that's able to use all the ui that we have and i'll show how that's going to work here in a second there's one change that i do want to make in here uh no you know i'm thinking the widget interaction component my bad uh so no uh but i do want to actually go in here and draw a desired size and the reason for this is what usually ends up happening is you can actually see right here we have a draw size and when we actually crea and when we actually add in a widget class what we'll actually do is it'll actually create a certain size widget and it'll try to and it'll fit whatever we have within that widget class within that space so by doing draw desired size it will automatically resize to whatever we want to use in this case it's going to resize to the size of that border so by doing this it will automatically adjust its size so it's it doesn't look all weird off to corner or something like that or maybe it's like cropped off all weird or anything like that so i'm actually going to drop this into the world real quick so we can actually see how this looks so that did not pop up there we go so i'm actually going to change widget class to simple ui you can actually see it wasn't visible from that side and that's because it's facing the wrong direction so let me go and rotate this real quick and i'm actually going to raise that other ground a little as well all right so you can actually see that's actually perfectly sized to our border uh it will automatically resize to the elements that we have within our ui so that's part of why i added in a borders we can make sure that it is resizing correctly and we don't have to manually set up some obscure size for our buttons or anything like that it also makes it nice and easily visible so yeah uh so and then the final thing we're going to want to do is we're going to need a modifier player now this again is where you're going to run into some differences if you're in unreal engine 4. so the first difference you're going to have is i'm just going to be using the vr pawn because the vr pawn has our motion controllers our camera all that kind of stuff it also already has a widget interaction component attached to each hand so i'll be showing how to enable those however if you're on if you're in unreal engine 4 you're going to be using the bp motion controller component or i think it's just called bp motion controller um and that's what you're going to want to modify since that's where both your hands are now if you want you can you can use a motion controller pawn attached to it to your headset or something like that so it's based off wherever you're looking but that can be kind of awkward and i really wouldn't recommend doing it that way but anyways so we don't need any of these graphs or anything at least not yet so we're going to go and jump right over here into our viewport you can actually see uh as i said in unreal engine 5 we already have widget interactions attached to our left and right motion controller components so we don't need to worry too much about that now if you don't have widget interaction components you can actually just go right in here and just look up widget interaction and just add one in that's going to be up to you if you don't already have one like i said so looking at these there's going to be a couple quick changes that we want to make first one we're going to want to make is we're going to want to go right over here to trace channel and we're going to set this to i believe it's world dynamic if i recall uh let me just double check that real quick this is if we go and drop this down world dynamic so that's that's the reason we want to change the trace channel from i believe it's 3d world or 3d object to world dynamic is because otherwise it won't actually pick up the collision of the ui so we need to set to world dynamics that we can actually collide with the ui itself next thing we're going to want to do is some of these are going to be kind of optional depending on what you want to do so interaction distance this is going to be how far you want your widget interaction component to trace to so if you have your uis pretty far away then you are of course going to want this to be a lot farther away if it's a little bit close then quite frankly it doesn't really matter it will actually cut down the trace to the point where it hits the ui so if you want to throw it out to like 5 000 even though you're not even going to go anywhere near that you can that's going to be entirely up to you though uh interaction source we can leave alone we do want to click show debug this will actually make it so we actually see a red line from our motion controller or in this case our widget interaction component to wherever the widget interaction component is meant to go and of course if we want to go down here we can actually change a bunch of properties of this we can actually change the sphere line thickness and what this is is once we actually hit a widget itself then what it'll actually do is it'll draw a little sphere right at that collision to make sure that just to let you know that it's actually colliding you don't have to do any modifications to all this i think all this is pretty good where it's at um so yeah and we do want to of course do the same thing to the widget interaction right now there is one little change that i do want to deliberately draw some attention to and that's going to be right here at the pointer index so if you were looking at this you may have noticed in the widget interaction left it's a different value than what it is in our widget interaction right the reason being is that each which interaction component within the scene has to have a different pointer index if you don't have them all different then it will only take the first one that's generated into the scene and it will only allow that one specific which interaction component to function unless they all have different pointer indexes which is why we actually have it set up like this so by doing it like this we can actually have both of them function correctly if i were to actually set this back down to zero then presumably this one wouldn't function uh at the very least one of them went function but presumably be the right one since this one's probably a little bit lower on the hierarchy that would be my assumption is it would be this right one that doesn't function but yeah so that's going to be how that works all right so now that we have everything set up in our widget interaction components themselves uh here in the viewport at least they should now be able to detect when they're colliding with the ui and they should be visible within the world so that way you can actually see where you're pointing and what you're hitting and all that kind of stuff so in order to actually trigger ui elements we're now going to have to jump over here to the event graph so i'm actually going to uh take over these trigger left in this trigger right since i'm not using these trigger press trigger released and you know all these elements that they have right now i'm just going to uh cut this off here and i'm just going to drag these down so we can use these down here and we're going to use our triggers in order to detect or not to detect but in order to actually interact with our ui and be able to press on things so in order to do this we're going to have to take down both our which interaction left and our widget interaction right and i'm going to set these right next to those all right so in order to actually detect these we're going to have to run two functions one unpressed and one on released uh so on press what we're going to want to do is we're going to want to do press and when we type in press you actually see that we have press release key press key and press pointer key what we're going to be using is press pointer key and we're going to want to run that when we actually press down on the trigger and once we click down on key you can actually see it actually gives us the options to do a whole bunch of different things depending on what we want to trigger because we're interacting with ui we're actually going to use left mouse button so i'll basically simulate a left mouse button on a mouse wherever the widget interaction is at so if it's like in the top corner of a ui it will hit it will uh simulate a left mouse click button there if it's down the bottom right then it'll simulate a left mouse button there if it's on a button or something like that it'll tr it'll simulate a left mouse button there now for the released we're going to want to do release pointer key and again we're going to want to set this to left mouse button now you do want to make sure that you do do release and the reason for that is if you don't do a release pointer key what will actually end up happening is once you press down it essentially won't reset so you only be able to press on the ui element once or i guess technically anything once and you won't be able to click on anything ever again so it'll be a one-time use thing once once a release is run then you'll be able to click on the ui element again so um and then we're going to go and copy this and just go and bring this down so that way we don't have to worry about copying all this again and again with the widget interaction right and with that that's all that we really need in order for this to work so i'm actually gonna go ahead and boot this up real quick uh as as i usually do i'm on a valve index um if you're on a quest or anything it should be a very similar process uh you should have it no issues whatsoever so let's go ahead and jump right into this and i have one of my controllers off all right so here we are um i'm i think i'm a little bit elevated for some reason but i'm not concerned with that at the moment um it could just be my perspective on things so you can actually see these red lines these are actually the widget interaction components this is extending out if our call is 500 units uh so you can actually see where you're pointing at and my right controller just bugged out on me so you can actually see if we actually go over the ui itself you can actually see that it does do a little sphere right there and i can't really see behind the ui very well from this position but if i were to go over there then you would be able to see that's not going through the ui itself you can actually see when we mouse or when we go right over any of the buttons with either of these you actually see that it will actually highlight to simulate that you're mousing over it so if we actually go ahead and press trigger you can actually see it says what and then up dude you can also see too it resized itself um and that's it also maintained a center position that's part of that's part of it um keeping to the desired size of the widget class because the uh the border actually resizes based off of what's in in the uh what's in the widget it actually resize itself and it maintains center because the actor itself is actually resizing itself to fit the new size otherwise it would have kind of repositioned itself probably up to the left maybe even just kind of repositioned itself uh just kind of squeezed together but it wouldn't have looked right after that point regardless and with that that's how you implement some very simple ui into unreal engine using the widget blueprint i hope you found this tutorial helpful if you did be sure to hit the like and subscribe button down below and let me know what other tutorials you guys would like to see done in the future with that i will see you guys in the next reality

Channel: VR Playground

Views: 2,137

Keywords: VR Playground, VR, Virtual Reality, Game Development, unreal engine 5 tutorial beginner vr, unreal engine virtual reality, unreal engine, virtual reality ui, vr ui ue4, vr ui unreal, vr ui design, unreal engine vr tutorial, unreal engine vr development, unreal engine vr tutorial oculus, unreal engine ui tutorial, unreal engine ui widget, unreal engine ui menu, ui, unreal engine 4, unreal engine 5 tutorial, unreal engine vr, ue4 vr, vr

Id: H5nVjSwM_Uk

Length: 25min 27sec (1527 seconds)

Published: Fri Jun 25 2021