Adding a Heads Up Display to a VR Player - Unreal Engine VR Tutorial

having a heads-up display in vr has a lot of very neat applications not only is it a great way to keep track of information such as how much health the player has how much mana they have or their bullet count but it can also be a great way in order to add a little bit of extra details that if a player is meant to be wearing some sort of mask or a helmet so in this tutorial i'm going to show you how to attach a very simple ui to the player's view so that way it can act as a hood as well as how to control this hud using a very simple slider that players can manipulate themselves before we go ahead and jump into that if you enjoy this tutorial and want us even more just like this one be sure to hit the like and subscribe button down below and with that let's go ahead and jump right into the video now let's go and get started here so i'm going to go ahead and get started here by opening up the content browser i'm going to go and right-click and i want to create a new folder for materials now we're only going to have one material here for this tutorial but i just like to keep things organized so i'm going to and set our material here called m underscore hood that's supposed to be underscore hood and i'm going to open that up now reason for this material is this material is going to allow for our texture to appear in front of all the other actors that we have in the scene so if a player for example sticks their head in the wall or if they stick their hand in front of their face and it's too close to the camera then our ui won't appear behind anything and in case that's unclear what we're going to do here is we're actually going to have the ui uh attached in front of our camera it won't actually be added to viewport as you may typically do if you've ever done like any sort of desktop applications or anything like that and i'll i'll talk about that a little bit more once you get to that point but let's go and get started here so i want to go ahead and set the blend mode here to translucent i'm also going to go and change shading model to unlit you don't have to do that um but i just find that looks better it just tends to be a little bit better in my opinion and now i'm going to come right on over here i want to right click and i want to look up texture sample parameter 2d i'm going to call this slate ui and i want to come down here and do a couple things so first i want to change the sampler source to shared wrap and i also want to change parameter to what was it called white white square texture there we go and i'm going to feed the rgb into mist of color and the alpha into opacity and this will uh basically set up stop we will actually still be able to see our ui even while it's sitting there in front of us and i also want to i did almost forget this let me go ahead and click on this and i want to look up depth and i want to make sure disable depth test is true because we because that's what will make sure that our ui appears in front of everything else it won't appear behind anything i'm going to apply and save that and close that out and now let's go ahead and open up our content browser again here and now we're going to get started on our ui so i'm gonna go ahead and again create a new folder here call it ui and i'm gonna go and create a user interface here and we wanna make sure it's a widget blueprint i'm just gonna call this hood here so here in our hud this is what we're going to be using in order to determine what our player sees um as we expect to do in a hud um so for this one i'm actually going to have a simple progress bar down here at the bottom that we'll be able to control uh manually it's good i'm going to try and design something that looks a little bit something like a health bar so i'm going to go ahead and grab a progress bar here bring this right to the bottom and i'll go ahead let's see here i want to anchor this down here in the bottom center here and i'm going to increase the size x to 800 here and let me go and center this a little bit and let's take that down a bit 150 there we go and i also want to let me go and increase this percent here for a second our percent range is anywhere between zero to one and i'm going to go and check and set our fill color here to a nice bright red here uh and i also want to get rid of i don't know how clearly you should you'll be able to see this but we've got some uh some bars going back and forth so i'm gonna go ahead and disable that animation at the very least because i don't really need that and i think that should be pretty good uh i do also want to go ahead and add just one text here just right above this that we'll be able to see go ahead and place this down here i'll just go and call this health text and let's again go and anchor this down here at the bottom let's do [Music] 150 there and minus 75. we'll do like minus 200 i think that'll do yeah it does cool health and there we go so that's gonna be nice simple um we don't really need a whole lot here but we will be influencing this in our player itself so i want to go ahead and jump right over here and we need to bind our percentage that way we can control this so i'm going to go ahead and jump over to our graph here and when we're control when we're binding uh values especially float values there's typically a couple ways of doing it the easiest way is to simply go in create a new variable and i'm just going to call this health percentage go and change that to a float and once we have that made we can actually jump back into our designer and we can just bind that here in our percent so we can just bind health percentage and whenever we make a change there to health percentage then it will automatically change what our percent appears as here so that's nice simple easy to do and we don't need to worry too much about that so i that's all i'll do here for the hud for this tutorial so i'll go and close out of this jump back over here and now i want to go ahead and jump into our player so i'm going to go and open up vr template blueprints and i want to jump into vr pawn now if you're working on real engine 4 you may have a different player um or your player may look a little different than what i have here however so long as you're in the roo of your unreal engine 4 player you should at the very least have the camera and you should have control over your inputs which is all we really need for this tutorial so i'm going to go ahead uh let me first jump over to our viewport here and i want to go ahead and attach our ui to our display so our player will able to see our hud that we've created so i'm going to go ahead and add a widget and i'm just going to call this hud widget and then i want to attach that to the camera so let me also go ahead we need to set our widget class here to the hud that we created so i'm going to set that to hud as right now this is a little bit big but we'll fix that here in one second i'm going to go ahead and move this out from our player i find that 100 tends to be a pretty good value you may want to go further out or closer to the player depending on what you want and i'm also going to go and rotate this 180 and then now we want to make sure that this is decreased to the point that we're actually able to see it within our player actually let me also go ahead and set our draw size here to 1920 by 1080. i find that we that that's typically a pretty good value to have there and then let me go ahead i'm going to decrease our scale i actually want to lock that so we that way we scale all of our values at the same time i'm going to set that to 0.1 and that should work pretty well now if you want to check to see what your hud will somewhat look like once we actually have our player in we actually go right into the scene drop it in our display and we can actually see roughly what it'll look like so this doesn't look particularly clear um but it should be good enough for what we're looking for once we're finally in the headset um so i'm just gonna go and leave that as is let me go ahead and delete that and we'll jump back into our vr pawn here and now let's go ahead oh before we go ahead and go on to our blueprint let's also go ahead and set our element here to m underscore hood there we go and that also kind of gives us a nice general view as to what the whole thing looks like and then i also want to come down here and i want to make sure that our collision preset is set to no collision because this is the ui and it should be attached to the player we should expect that our player shouldn't be able to to access this and modify it except for maybe through inputs on your controller so pressing a b trigger grip so on so forth however we do want to make sure that our widget interaction components if we have any in the scene it will not be able to interfere with this along with any line traces or anything like that so we want to make sure we have no collisions whatsoever now let's go and jump over to our event graph and i'm actually going to take our triggers here that we actually have so i'm going to go and delete these execution nodes we have here there we go and we're quite simply going to want to ha we're quite simply going to modify our overall health for our player so in order to do this i'm going to go and create a variable here i'm just going to call this health change that to a float and i'm actually going to set the let me go and compile that i'm going to set the default value here to 100 so since we'll typically want to start with full health and now i'm going to want to jump down here on pressed on our trigger left we're going to decrease our health value on right we're going to increase our health value so this is actually pretty simple so i'm going to go and get our health value i'm going to subtract here let's say 10 i think 10 will be pretty good i also want to go and clamp this as well so i'm going to clamp that float between 0 and 100 make sure that we can't go below zero since that won't really make much sense and then we'll go ahead and set health there we go and then with all that done i'm going to go ahead and divide this value by 100 and now at this point we want to go and grab our hud that we had originally uh designed and we want to set that health percentage that we have in our ui so i'm going to go and grab our hud widget here i'm going to get user widget object and i'm going to cast this to hud and now we should be able to access that health percentage that we originally had so i'm going to set health percentage there we go and that will be that so i'm just going to copy this all for our right trigger go and copy and paste all that there we go except instead of subtracting 10 i'm going to want to add 10. there we go and that will allow for us to control that health bar that we had originally set up in our player now one one more thing that i did almost forget to do here is i want to come right up to our begin play actually let me go ahead and copy our hood here i'm going to go and copy all that i'm going to come right up here to our begin play and i want to make sure our health percentage is set to 1 by default so that way it will actually be able to see it at full health and it won't automatically jump all the way up to the top or anything like that and that completes all of our setup for our hud it allows for us to control our heads up display it'll allow for us to have a health value that we can see and so on and so forth so now i'm gonna go and jump into vr and we'll be able to see what this all looks like so before i go and jump into vr there's something i wanted to note here that you guys will probably end up noticing in the video itself is that our health won't actually look center and the reason for this is if i actually go and drag out here you can see a center here to me what i see in the vr headset it will look centered as well however when we go ahead and press play here it'll actually open a new viewport window and we'll actually see what i am seeing out of my left eye because of this the ui walk should be slightly off center and it may even cut off a part of the rightmost side of the ui for you so it might look a little bit more off to the right and it might even appear a little bit bigger than what it actually is possibly even a little bit lower than what it actually is so it is something to keep in mind if you're doing this for yourself and you're looking to develop a hud for yourself make sure you throw on the headsets that way you actually see what it'll look like and not just what you are seeing here on screen so uh with that i'm gonna go ahead and jump into vr here all right so i am now here in vr now so uh i now have the health out in front of me as i mentioned before it probably won't look centered to you for me it appears right in center here but you can actually see if i go and press my left and right triggers i can go ahead and affect our health value here and of course if you wanted to set some sort of death or something at the end then that works fine as well um as i said you're probably seeing what's coming out of my left eye not my right eye um so it's not looking centered to you but for me it's it looks just fine it looks pretty clear uh it's it's a little bit big for probably what it should be but it is there and it is something that i can see and i can easily see what is going on and no matter how close i get the either of my hands to my face i'm not able to affect you know affect the way our ui looks it always appears in front of everything else so um i could even try sticking in the ground uh a little something like this i probably should have put up a wall or something but i can try sticking in the ground and that should actually be in the ground right there but i can't actu i can still see it perfectly fine it's not affected in any way and it moves out perfectly fine with no matter where it is i go and with that that's how we put together a very simple heads up display that players are able to see in their vr view as well as how to simply modify some of the values on the ui itself with that i hope you enjoyed this video if you did be sure to like and subscribe button down below and also i'll give a quick shout out to my patreon supporters so you should see over here on the right hand side and with that i'll see you in the next reality

Channel: VR Playground

Views: 496

Keywords: VR Playground, VR, Virtual Reality, Game Development, unreal engine 5 tutorial beginner vr, unreal engine virtual reality, unreal engine vr, unreal engine vr tutorial, unreal engine, unreal engine 5, unreal engine 5 vr, ue5 vr, unreal 5 vr, unreal engine 5 vr tutorial, vr hud, vr heads up display, Adding a Heads Up Display to a VR Player, add heads up display vr, vr player heads up display, vr player hud, vr player ui in view, adding heads up display vr, ue heads up display

Id: 5q-bIUTOsQM

Length: 15min 7sec (907 seconds)

Published: Fri Oct 22 2021