Oh, no, you guys think I put all this work in all these videos, but I've gotten in such a bad habit
lately of filming the day before I post them. And it's been some early mornings. I'm Justin,
your fellow procrastinator, and this channel is all about virtual reality development plus games,
tech demos and all things virtual reality. Let's talk about some UI. Oh, and this
tutorial doesn't have any coding. First, we're gonna be going through and setting up all the
you know, XR settings and making sure everything's right. So if you already know how to do that,
or if you've seen one of my other videos, skip to that timestamp right there. And that will start
the UI part of it. We're in a new U R P project starting completely from scratch this time. And
if you'll notice, I'm using Unity 2020 point 3.2 just upgraded to that version. But this project
should work in 20 19.3 or newer. So as long as you have above that version, you should be fine.
First, we're gonna go to Edit Project Settings in the package manager and check the Enable preview
packages box. I understand. Now let's go to Window Package Manager. And we want to swap this over to
unity registry and then look for open XR plugin. Install that it's going to ask you to restart
because it's going to set you to the new input system. So just hit yes, the project will restart
and let's open up the package manager again. And scroll down to the very bottom XR Interaction
Toolkit. We're going to install that as well as the samples default input actions. Now we're back
here in the project settings. Let's go down here to XR plugin management and check the open XR
box and then go down here to features and check Oculus Touch controller profile or whatever
headset you're using. Go back into XR plugin management, click on this exclamation point
and then click Fix all There we go. If you have an Oculus quest, you'll need to go to File Build
Settings and swap over to Android, you'll need to install the Android portion of unity hub and then
switch platforms in order to run your project on an Oculus quest or a standalone device. Otherwise,
we're sticking with the PC, Mac and Linux Standalone a few more steps. Let's go down to the
project pane, go to samples XR Interaction Toolkit, whatever version you're using,
and default input actions and then we're just gonna go through and add all of these presets.
And then after we do that, we're gonna go back to the Edit Project Settings and then to the
preset manager. And then inside of here, find the action based controller preset and we're going to
label these right and left accordingly. Now we can add an XR rig to our project. So right click
in the hierarchy go to XR and room scale XR rig action based inside of that XR rig, we want to
add a component and this component is going to be the input action manager. And then we want to
drag the XR default into the action assets. And now we should be all set. If you went into this
right now you should have two lines coming out of your hands and that you can move around. Alright,
let's start making a canvas. So I'm going to reposition my XR rig and face it towards the wall
because we're going to project or we're going to put the canvas on this wall here. And let's scale
these icons down much better. So this is going to start out just like adding any other Canvas,
you right click on the hierarchy go to UI, and then you add a canvas, this is going to come
with an event system. So we're just going to throw this to the top with our XR interaction manager.
We're going to update this in a minute. But let's talk about Canvas first. So normally, you have
this screen space overlay, that's the render mode that it's in. So if we double click on the canvas,
we can zoom out and see this is a giant canvas. And then if you can barely tell there's a green
dot down here in the corner. And that's where our little world is. And the canvas is huge. And if we
were to run this the canvas what you wouldn't even see it if you were in VR, nothing would happen.
And you've got two other options here for render mode, there is screen space camera, this would
let your player actually see the canvas, but it's going to be stuck to the camera. So wherever that
person looked, it would follow. And so that's not really what we want. So we're gonna go down and
select worldspace here at the bottom worldspace is going to require an event camera. So let's
drag our main camera into that spot. And then let's scale this way down. There we go. And I'm
gonna mount it to this wall right here. And when you're adjusting the scale, make sure your x and
your y are the same values because if they end up being different, your text and buttons and stuff,
they're gonna look stretched one way or the other. So try to keep your x and y the same and if you
need to adjust the height or the width, you can do it with these values here. And now we can go ahead
and add text and buttons to this like you would a normal UI so Let's add a little textbox here,
and I'm going to scale up the width and the height and our text is facing the wrong way. So let's
grab the canvas and just flip it around. And with the font, you want to scale it with the font size,
not the scale. If you scale it up with just scale, it's going to start to look blurry, the bigger it
gets. So font size is how you want to make font and bigger and this is going to be a wet pink
sign. And let's add a button and a slider just to demonstrate and these are going to obviously
behave just like any other button or slider, you're gonna have this on click event for the
button that you can put any method into that you want to execute when the button is clicked. And
then the same thing you have an on value changed for the slider. So whenever that gets moved back
or forth, it's going to update that value and run whatever method you want it to run. But how
do you interact with these right now, if you just played it, you would not be able to interact with
the buttons or sliders or anything. So let's fix that inside of the canvas, we're going to want to
add a new component and this one is going to be called the tracked device graphic Ray caster, we
don't need to do anything in here, we just need to add this component. And then in the event system,
let's go up in here and delete this standalone input module. And then we're going to add an XR
u i input module in this will allow the Raycast from the left hand and the right hand controllers
to interact with this button and slider. So I'm going to select both of these, and we're going to
mask nothing and then switch it to UI. Now the Raycast will only turn the activated color if
it's touching UI, and we're going to have the invalid color gradient be zero alpha. In this
way, the Raycast will only show up if you're pointing directly at the button or the slider
or the text. Also, I'm going to adjust this down a little bit. So it's a little thinner, because I
think that looks so much better. So let's jump in and test this to make sure it works. Right. Let's
wait for everything to render. And now you'll see the pointers only show up if I'm hovering over
a UI element. And if I went away, then the pointers disappear, which is exactly what we want.
So I could just drag the slider back and forth, click on the button. All of that works nicely. And
that's basically it. That's the whole tutorial. Now you can do some pretty cool things with this
in VR by just parenting the canvas on to physical objects. So if you wanted to create a tablet,
let's actually do that real quick. Let's create a new empty object, we're going to call this tablet
and then inside of that, we're going to create a 3d cube object, make sure both of these transforms
are set to zero gonna move the tablet up to where I want it. And then let's reset the cube
scale to like point 02101. And then the y is going to be pointing 5.2. And let's put the Z
at point four. Yeah, that looks good, a little bit big for a tablet, but you know, and then
let's grab the canvas, I'm just going to duplicate it and drop it into the tablet, set the positions
down to zero again, pull it out a little bit. And then we want to scale it down even more. There
we go change the text to tablet and then let's make this tablet and XR grab intractable, let's
have it. Yeah, it can use gravity shirt, whatever. And then the left hand and right hand, go back to
the array interactor. And let's also create a new layer called grabbable. And we're going to put the
tablet in this grabbable layer grabbable. Let's set the Raycast mask to also include grabbable.
And then let's set the tablet layer to grabbable. And yes, the children can change now if we play,
I can select the tablet, pick it up and then also interact with it, he could do so much stuff with
it. So you can add a you know a bullet counter to guns, you can do a ton of different UI things with
this from heads up displays to tablets, like I just showed you to a weapon bullet counter
to you know anything you can think of really, you can also take some elements from the last
video about buttons and put the physicalized buttons onto the tablet to if you wanted to.
And instead of using a UI like this, you could do a physicalized UI, which is usually an arguably
better for VR and just put those on the tablet instead of having the buttons look like you know
their actual like big toy buttons, you can turn the mesh into more of like a hologram looking one,
and then you can press the buttons and it's so physicalized but it looks like you're interacting
with a digital interface. There you have it, there's a super basic UI setup. And I hope you
guys can take some of those ideas and just run with them and make some really cool UI stuff.
I am not a designer by any means. And I'm sure some of you can come up with some super cool
UI like holographic looking elements and whatnot. But you know, there's my stone tablet and a
little slider on it. And you guys can take the rest and run with it. Add a button to your wrist
that will activate the UI and have it pop up and like a little watch or something like that.
You can have you know, tablets, phones, lots of cool stuff there and I'm excited to see what you
guys come up with. And Holy Cow we just hit 1000 subscribers that's absolutely incredible
your support and encouragement has been absolutely amazing and thank you to my VIP Patreon kin, Ray,
Austin, Tim Scott, Jane and Ava, thank you guys all so much for continuing to support me and if
you're watching this video and you want to support me or if you just want access to the source code,
you can support me on Patreon and grab that and of course free of charge. As always I
comment and reply to every single one of the comments underneath one of my videos so if
you ever run into any issues or need some help troubleshooting, just put a comment down there
and I will reply as soon as I can. Thank you all so much, and I'll see you in the next video.