UI Using Unity XR Interaction Toolkit | How to Make a User Interface That Works in VR

oh i know you guys think i put all this work into  all these videos but i've gotten in such a bad   habit lately of filming the day before i post them  and uh 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 uh this tutorial doesn't have   any coding first we're going to 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 time stamp right there  and that will start the ui part of it we're in a   new urp project starting completely from scratch  this time and if you'll notice i'm using unity   2020.3.2 just upgraded to that version but this  project should work in 2019.3 or newer so as   long as you have it above that version you should  be fine first we're going to go to edit project   settings and then 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 going to go through   and add all of these presets and then after we do  that we're going to 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 xray 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 xri default into the  action assets and now we should be all set up if   you went into this right now you should have two  lines coming out of your hands and that you can   move around all right 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 would  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 gonna 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 world space here at the bottom  world space 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 going to 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 going to 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   text box 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'll 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 bigger and this is going to be   a wet paint sign and let's add a button and a  slider just to demonstrate and these are gonna   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's 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 this one's 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 ui input module   and 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  0 alpha and 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 and make sure it works all 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 point 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 onto physical   objects so if we wanted to create a tablet um  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 i'm gonna move the tablet up to where   i want it and then let's reset the cube scale to  like point zero two point zero one and then the y   is going to be point five now point 0.2 and let's  put the z at 0.4 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 i'm gonna  change the text to tablet and then let's make this   tablet an xr grab interactable uh let's have it  yeah it can use gravity sure whatever and then the   left hand and right hand go back to the ray  interactor and let's also create a new layer   called grabable and we're going to put the tablet  in this grabbable layer grab-able let's set the   raycast mask to also include grabable 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 you can do so much stuff  with this you can add a you can add 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 too 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 they're actual like big toy   buttons you could turn the mesh into more of like  a hologram looking one and then you can press the   buttons and it's still 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 um you  could 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 a thousand   subscribers that's absolutely incredible y'all  support and encouragement has been absolutely   amazing and thank you to my vip patreons ken raja  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

Channel: Justin P Barnett - VR Game Dev

Views: 20,800

Keywords: Justin P Barnett, unity xr, unity new input system, xr interaction toolkit, unity vr tutorial, beginner, how to make ui in vr, vr ui, unity ui tutorial, vr ui unity, vr ui design, vr ux, xr toolkit unity, vr interface, ux design, unity3d vr, unity3d, unity vr ui, unity vr, beginner vr, vr beginners guide, unity tutorial, unity tutorial for beginners, unity tutorial 2021, vr, vr user interface, openxr, openxr tutorial, vr development unity, vr development, vr tutorial, 2021

Id: BZt74PVb7sM

Length: 10min 58sec (658 seconds)

Published: Wed Mar 31 2021