UI Using Unity XR Interaction Toolkit | How to Make a User Interface That Works in VR
VloĆŸit
- Äas pĆidĂĄn 2. 07. 2024
- I can make a UI system without coding! You don't believe me? Well, with Unity's XR Interaction Toolkit and OpenXR, I'll show you.
Hey guys! I challenge you to find any VR game that doesn't use a user interface system... Drawing a blank? Because it isn't done! Every game uses a UI system, and in this video, I'll show you how to take Unity's XR Interaction Toolkit to your advantage and create a UI system WITHOUT CODING!! đ (I knew you'd like that) I would love to hear what cool UI ideas you have for your game or what existing VR games are using. Let me know in the comments!
đș Watch Next: âą What Do I Need to Beco...
đ„œ Enroll in the (now FREE) VR Creator Academy: skool.com/vrcreatoracademy
â Timestamps
0:00 Like!
0:25 Setup and Settings
3:13 Creating the Canvas
5:45 Adding the Interaction
7:12 Let's make a Tablet!
9:26 Comment Below!
#vr #ui #unity
Solid Video!!! All of your videos leave me thinking, "There's so much that can be done now that I know these building block skills!" Thank you for your time and generosity.
Glad to hear it! Can't wait to see how your ideas manifest!
Awesome video. Exactly what I needed to get the basics. Now need an additional video about styling the UI elements. Thanks ! Keep up the good work.
Glad it was helpful!
In each video you give a basic intro of the basic steps form the beginning. That is sooooo gooood. That makes it very easy to understand. Keep it up bro.
Glad it was helpful! I'll keep adding those
This is exactly what I needed, as always coming to the rescue!
Great! Glad I could help
Fantastic Channel Justin, keep up the good work!
Thanks so much Simon!
Thanks for providing free tutorials :)
Thank you soo much, you saved my day. This was he tutorial that i was looking out for
Bro you are amazing thank you
Thanks man, appreciate the video it helped ;) Using G2 at the moment, I'll be back for the Quest version when I get to it in the future.
Happy to help!
You seriously need more subs. I've been working on remaking the .Hack// games for VR in unity and your tutorials help out a ton.
Thank you so much! I really appreciate that. Glad I can help out!!
I wanted to display a photo I took with my phone in a VR world. Couldn't find anything, so I figured something on UI would be the next best thing and landed here. I made it 5 1/2 minutes in, then paused and setup a new project real quick. Then I added the canvas like you did. Then I played with Image and Raw Image. Got it all working more or less. There will need to be some experimentation, but I think I'm good for now. Now I'm back to finish the rest of the video. Update: The second half of the video was great as well and even gave me a couple ideas for down the line. :)
Glad I could help!!
Just what i need keep it up
Will do!
Like the vids. Doing great work.
Thanks!!
Great Tutorial! Thanks a lot.
You're welcome!
fast and easy thank you very much đ
You're welcome!
hey Justin
nice tutorial once again....
cud you add a tutorial on text display on trigger.
once using a controller and point stuff in VR,maybe try display their names
Great!
cool ⊠super straight forward, and saving me hours of reading!!!
Glad I could help!
thanks for the tutorial , very useful into, now i have a HUD in my game
Great to hear!
Great UI overview
Thanks!
You Can directly make UI Canvas from The XR drop down that will directly make your Canvas with world space and will attach ur camera in that. And also it will directly change the UI input module to XR UI input module.
Great tip! Thanks! I think I totally overlooked that đŹ
@@JustinPBarnett Your welcome. đ
@@mohammadrazakhan3852 Hey there. Great Toturial. But i am searching more a Way for "Supportet VR".
so i need a Way, to do in
**unity 2019.4.f1**
an "UI" what is working with :
- old Input System.
- Old UI **NOT TEXT MESH PRO ( just i hate it ) **
and: important: *it should use the Mouse*
in my Version / Game, should be no "VR" Controllers, because it is supportet VR,
not "VR" interactive (there is nothing to grab, and no need for the VR Controllers )
is this possible ?
have you Any Ideas ?
**ideal will be**
to not change the Canvas in the case, so that the game master is staying in "Flat".
but also supports VR (but only the Headset, not the Controllers).
see you any way to reach this ?
**most important**
it need to be Unity 2019. i do not use Highter Versions than this, all after, are boring, slow and buggy.
@@opafritzsche i cannot get your problem what actually u need
@@mohammadrazakhan3852 No VR Controllers
Old Input System
a typical UI, in a typical (non VR) Project.
i hope you understand so far.
i need a way, to trigger the mouse in this typically UI in VR, and to see this.
**without VR Controllers**
just Keyboard & Mouse.
and:
- no Text Mesh Pro (Old UI)
- no new Input system, old system.
any idea ?.
i made a fnaf wristband clock that works, thx for the tutorial that really helped me out
Hey, I noticed you used my design in the thumbnail. It is fine that you used it, I just would have appreciated a shoutout in the description. I am a new subscriber and love the channel.
Thanks a lot Justin ! works perfectly with Hp reverb g2 omnicept
That's great to hear!!
loVe it!! will try it out thanks!!
Let me know how it goes!!
@@JustinPBarnett Thanks Justin! Did a session with a Omnicept last night. Starting to build some concepts for experiments. I am now convinced I am going VR developp, as a track! do you work freelance or so? ps check out my ios game @Redwaterone www.redwaterone.com just launched a free version to trial. been buildinf for two yrs on that.
Hey Justin. Thanks for the awesome tutorials! Any thoughts on what would have to change for this demo to use the XR Origin and the new input system?
Not much besides the xr rig I wouldn't think!
this will be interesting to see :D
đ
@@JustinPBarnett Jupp it meet my expectations! thank you for sharing :D
@@_Garm_ Great!! Thanks for watching
Width and Heighth! Thanks for the tutorial! đâ
đđđ
cool thanks
No problem!
Perfect.
Thanks!
@Justin P Barnett Have you found a way to make the rotating dial depicted in the thumbnail of this video? I'm struggling, and I'm hoping to use XRIT and minimal coding to make a dial that fire events at each "click" of the dial rotation (or a smooth rotation increasing a float value). Thanks for all you do!
If you haven't done so already. the new Unity XR Interaction Toolkit Sample has this interaction (and many more) in there.
Hey, nice video! Any recommendations on how to make the Button clickable by hand and not by button? To give it more of a "tablet touch"? Cheers!
Yea! Check out this video on physical buttons: czcams.com/video/HFNzVMi5MSQ/video.html
Hello great tutorial, I just have a question. Do you know if there is a way in the XRToolkit to interact with the ui by touching it physically with the controller or should I implements it myself ?
You'll have to do that with trigger colliders!
@Justin P Barnet would be good to know how to open our menu with the menu in the left hand controller.
Check out my input actions tutorial! Just set the menu active when the menu button is pressed
Took me half a day to find out that if you have a project in which you created a canvas before XR Interaction Toolkit package was added then you have to add a TrackedDeviceGraphic raycaster to the canvas, otherwise it won't react to the controller's ray casts at all.
God, if I wasn't straight I'd ask to marry you. The Patreon is worth it boys!
đđđ anything for you Anthony
Hi there followed you on implementing UI interaction in my game. Transitioned to XRrig and it wirks like charm even better then previous setup.
I have one issue though. UI interaction works with the backface of canvas. Is there an easy way to disable that?
What is your approach to preventing trigger teleportation locomotion from showing/teleporting while interacting with UI/objects that also have trigger interaction?
You could add a layer check to see if object matches a "teleport" layer requirement
Will you do a tutorial for glance control, ie; Reticle controlled by glance to activate a menu button? That would be a welcome tutorial. Thanks
Like an eye tracking kind of thing?
@@JustinPBarnett Thanks for responding. If by 'eye tracking' you mean look at a UI button while a reticle dot lands centred on that button to activate it, then yes :)
What if I want my pointers to interact with my UI, AND everything else (GO's, Grabbables...)... Do I just leave raycast mask on everything?
Hi the event system didn't appear when I created the canvas in the scene is that normal?
Great video! How can attach it to the camera to create a HUD for showing counters, heath, etc?
Hi ! If you set your canvas on Camera and not World Space it should follow the camera and make some kind of HUD. (It's mentioned in this video). However in VR, having something follow you all the time is really disturbing. It'd be better to have a display like Half-Life:Alyx (on your wrist) or enabling the display by clicking on an option button (like Oculus home or SteamVR). Hope that helps !
đ
Yes, it took me some time to understand that. I was just starting VR development and none of the tutorials I saw explained that.
Now it is clear for me.
Thank you, folks!
Couple of thins have changed it seems. The presets provided by the XR Interactive Toolkit no longer seem to recognize Oculus controls using the OpenXR package. Instead I had to install the Oculus XR Plugin and then in package manager select Oculus instead of OpenXR. Also in the video it shows that there is features section within the XR Plugin Management > OpenXR. However this features section is no longer there and to add a Interaction profile (if using OpenXR) you will need to click the + button under Interaction Profiles and add the Oculus Touch Controller Profile there.
Yup, the new version of unity changed up a bunch. Check out my 2022 setup video for the most up-to-date way to get up and running
@@JustinPBarnett Thanks will do. I appreciate what you do.
Hey Justin, thanks for another great video!
I have a super basic problem that I hope you might help me with. When I add the XR rig, suddenly I can't move the rays anymore. They're stuck in the middle of the scene. Any idea as to why? I can move the headset and look in any direction so the headset is definitely connected. My setup is the same as always and I already reinstalled unity so I have no idea what it could be. It's been like this since Thursday evening now - itching to get back out there creating mini projects!
Youâve got to add an input action controller to the XR rig!
@@JustinPBarnett Thanks! I forgot to insert the default XRI controller into it.....
I have another problem... If you're willing to help me with it I'll transfer 20 usd through paypal immediately :)
I'm trying to assign button A (primaryButton) to make a debug message when I press it. I used probably 20 hours or so this week trying to look for tutorials and unity documentation to figure it out but I simply cant, lol. Ultimately, I want to make a jump function or jet pack or something. I've already set up my XR rig with fully functioning locomotion and hands (+ animations). Now I feel it's time to add some functions to all the buttons.
This is one of the noob-scripts I tried to make it happen. "The name 'device' does not exist in the current context"
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.XR.Interaction.Toolkit;
using UnityEngine.InputSystem;
using UnityEngine.Serialization;
public class TestingInput : MonoBehaviour
{
void Start()
{
}
void Update()
{
bool primaryButton;
if (device.TryGetFeatureValue(UnityEngine.XR.CommonUsages.primaryButton))
{
Debug.Log("A pressed");
}
}
}
@@Martin-xf8be Check out this video and see if it helps! czcams.com/video/SAij67HrgAM/video.html
Could you make a video on how to shoot a projectile from an object you are holding (I'm still trying to get the hang of this XR interaction)
Yea! Definitely going to do a gun tutorial pretty soon
Spot on and thank you. Your tutorials are amazing and have helped massively.
@@markuniversitywelsh3435 Great! I'm so glad to hear that!!
@Ty prou Oh fun! That's a cool idea
Great videos! I am looking to have 3D UI Cubes appear and disappear with new UI "sub menus" from the base UI Cubes. Any idea how I might do this?
Easiest way would be to setActive the things you want when you push the right buttons
Hey, this is a very good tutorial, however i am having problems with the input. buttons and sliders work fine, but when i select an inputfield, the vr keyboard doesn't show up. do i have to manually enable this? it does show that the inputfield is selected correctly. from what info i could find this should automatically open when interacting with the input field. any help would be appreciated.
You'll need to create a keyboard yourself and add it. It's not built-in to VR unfortunately.
Nice video, could you please talk about how to set the raycastmask in the script? I'm struggling with this right now
Join the discord and we can help you out!
@@JustinPBarnett Thx man, I figured it out with a different method!
@@changruizhu7923 Awesome!
How raycast of hand can detect 3d gameobject. for example cube..circle object...etc? it should be done by same way as this video implemented?
There's lots of ways to do it!
Hi, did you make any tutorial to use the buttons of the oculus quest controllers? I'd like to hide/show UI using the menu button in my quest controller. I'm using the XR Interaction Toolkit default input actions but can't find a way to use the menu button.
Nevermind, I found it. I leave the link here for others having the same question. czcams.com/video/Mfim9MlgYWY/video.html
Anyway thank you for your tutorials.They are really very helpful.
Great video as always. Big question: I've set up my UI interaction and the UI elements work. However, When I use my ray to scroll a PDF document on my wall, the text will scroll, but every time I move my head, the text scrolls as well. How is my headset interacting with my scrollable item?! If I move my head up, the text scrolls up, and vice versa. Ive been trying to fix it for 2 days now. Any help greatly appreciated!
Oh that's interesting! Join the discord and we can help you troubleshoot!
Is it possible to make the UI curved using OpenXR? So far the solution that I've gotten is by using OVR package
Hello! How can I scroll the Scroll View with device's joystic only when the visual line selected the scroll area?
Join the discord and we can help you figure it out!
How do I curve the canvas ?
hey Justin! I'm considering how to show up the information UI when I pick up something(book .etc) and trigger the button to stop and resume video playing
You could attach a canvas that is set to not active to the object, then using the interaction events, toggle the canvas to on when the object is selected
@@JustinPBarnett I've solved, thanks a lot, especially for those new to VR Development like me đ
Is it possible to have like a " Physics Menu " where you can like Grab sliders or levers or buttons to push?
Absolutely! Games like the oculus first steps use the action of slotting in a game cartridge into an old console and pressing a physics button as a way to change scenes
@@JustinPBarnett How would I go about doing that? ( New to Game Dev and also don't know code yet lol ).
Hello all, does anyone experience the UI being blocked or hidden by the environment, for example, walls? if so, how do we solve this issue? in my project, this happens when opening the UI while XR rig is too closed to the wall.
How can I use the XR direct interactor in order to touch the button and work well?
You can use a collider to check if your hand is touching the button, or check out my button tutorial!
Hey! Is it possible to use your "Physics" hands in conjunction with raycasting for UI elements? I believe the XR Direct Interactor does not have raycasting?
Unfortunately you can't have both on the same gameobject, so you'd have to add a child object for your direct or ray interactor
@@JustinPBarnett Thank you for the response. I did in fact make it a child and it worked out well!
At 0:50 you say it should work with version 2019.3 or newer. I have 2020.1 and there is no OpenXR plugin. it says the lowest version for that is 2020.2 so what is up with that?
Oh huh, maybe with the newest updates to OpenXR they only work with 2020.2+. I'd recommend upgrading your Unity version to the latest LTS version anyway which is 2020.3 at the moment.
what would i do if I want to have a "cursor" at the end of the ray? would the reticle slot be the one to use for that?
Yea that'd be perfect for that purpose!
@@JustinPBarnett unfortunately it does not really work as it is flickering (Z-fighting)? any ideas?
@@konzeptzwei , perhaps you can create an empty object and then have the reticle as a child and offset the reticle in one of the axis a bit so it is a bit above the canvas/ui components? The empty object is then used as the reticle and where its center is placed on the ray cast hit point.
@@64jcl great idea! I actually tried it an it did NOT work! BUT setting the renderqueue to 3100 finally solved it :)
can i export it as a interactive video?
Would it be possible in your opinion, to use the Unity engine in VR as, for example, the Dreams platform on PlayStation?
Since it is game development in a 3D world wouldn't it be much more natural to navigate it and add shapes and assets while being inside the environment? I don't really know if something like this, besides Dreams, already exists but if it doesn't how difficult would you think it would be to make?
Btw I love your videos, you're so helpful and clear in your tutorials. Keep on going like this! :)
Yes!! There is a Unity VR application you can create the world while in VR! I need to double check the specifics but it can be done! And thanks for your support!
@@JustinPBarnett sorry if i keep bothering you, but i just can't find this app. Is there some where a tutorial which expains how to do it? Btw thanks for answering so fast, I'm not used to itđ
I swear there's a way, but I can't for the life of me find the info right now...I'll keep looking and let you know if I find it. I'm pretty sure FusedVR has a video about it, but I don't remember which one: czcams.com/users/FusedVR
@@JustinPBarnett thank you again man, you're awesoneđ
how do we get a canvas to follow the hand model? I'd like to have a menu on my wrist in VR.
edit - you just make it a child of the Hand Controller, lucky guess!
Yup!
Justin - Great Video. In my XR Ray Interactor, I get the following warning: "XR Ray Interactor requires the GameObject to have an XR Controller component. Add one to ensure this component can respond to user input." I get the rays when I run the project, but they don't interact with anything on the Canvas. What should I do about this warning?
If you're still having issues join the Discord and we can help you troubleshoot!
hmm for some reason this is not working for me. I had it going a couple months ago with Unity 2019.4. Now I'm setting up a new project in 2020.3 and raycast isn't detecting the UI button. Anybody else have an issue??
You might have covered up the button with text or something
Can you do more no coding interactive tutorials and make a VR game ??
Like make a game totally without coding?
@@JustinPBarnett if youâre up for the challengeđ
hi can u make a tutorial to make an enemy in vr with physics and auto balanced
Yea!! Thatâd make a great tutorial
@@JustinPBarnett I would look forward to that!!!
Hey man. my xr interactor detects UI elements, but i cant click anything. do you know why?
Your text may be overlapping your buttons and preventing the button click
Hey, I realise this is an ancient video but I was having a tiny problem following the basic setup for the project. Basically, in project settings, I dont have a "features" tab under XR Plug-in Management --> OpenXR. This means I can't check the Oculus Touch controller profil seen at 1:44. Also, I am unable to add an XR Rig to the hiearchy for some reason, so I really can't do much right now. If anyone has any ideas, I will be very grateful, it will save my grade!
Check out my updated 2022 setup video!
@@JustinPBarnett will do, many thanks!
But how do you make it so the player cant move around?, and can just see whats infront of them.
Wouldn't recommend preventing the player from moving. That's very jarring in VR
I've noticed that the Open XR Plugin isn't available for any of the 2019 versions (it's only compatible with 2020.2+). I've got a 2019 project that is getting ported to VR, and without Open XR, it isn't possible to get the other controller stuff. Is there a way to get around this or to use SteamVR for UI?
Check out my updated 2022 video!
@@JustinPBarnett Very cool, thanks dude :D
@@soareverix sure thing!
I'm trying to follow the tutorial, but none of the Gizmos are showing in my project, so the only way I know where the camera is for example is if I select it in the list and I see the axis mover. Also nothing is highlighted so the canvas has no selection line and essentially is invisible - all my Gizmos are turned on and biggest size, does anyone know why they are not displaying? Using 2020.3
You can adjust the size of your gismos in the top bar of the scene view. click on the gismos dropdown
@@JustinPBarnett Yeah I tried that - I fixed the issue by uninstalling and re-installing the latest Unity!
text broke, its invisible...
nvm it was hiding behind the wall
Hey Justin! Could u Please make a new tutorial because i seem to have a problem. I cant find Room Scale anymore. could u please help me out with that?
Use XR Origin instead! Everything else should work the same
@@JustinPBarnett I did and it wonât work :(
@@JustinPBarnett when I play it it wonât show my hands đ
@@BlackSantaVR You should only see lasers, hands aren't added by default
@@JustinPBarnett yes I meant the lasers. There are no lasers
my ray is getting stuck to my canvas. When I pull my canvas away or my controller the ray is stuck until the canvas is in
front of it again???
Ask in the discord if you're still having issues and we can help you troubleshoot!
@@JustinPBarnett thanks Justin. I fixed my issue. It was a setting toggled in the camera that causes this bug. Kinda weird, but anyway... thanks for your amazing vids (have you heard of Valem? He makes some cool VR stuff you should take a look at!!)
@@tacticalmythic7945 I have!! Great tutorials from a great dude! Did you see his new channel?
@@JustinPBarnett Are you referring to Valem Tutorials? Then yes! Itâs pretty cool I like the see through path for the hands
@@tacticalmythic7945 Yea!!
Hey man, shot you a Linkedin request, thought you'd see this quicker. Just wanted to let you know.
Thanks! I'll add you đ
@@JustinPBarnett K sweet. I've responded as well.
Why do I keep getting unable to Add Package??
I haven't seen that before. Maybe try restarting Unity or updating it to a newer version?
@@JustinPBarnett Yes I fixed it, It was actually an account issue. Had to confirm my email, ha.
@@JustinPBarnett Also keep up the good work man. Youre changing Lives myfriend
@@cjpayne2385 Will do! Glad you got it working!!
Does no grab!!! HELP!!!
what?
@@JustinPBarnett does not grab the tablet. I followed your instructions to the letter. And my controller is not grabbing the tablet
@@alejandrodelgado74 hmmm must be missing something. Join the discord and we can help you debug in the #dev-help chat channel!
@@JustinPBarnett very well thx
Download the Project (for FREE): www.vrcreators.io/codedownloads
I have a Big Ol Problem, I can Highlight the Button, but when I click the triggerbutton, nothing happens.
Just joined. Fantastic content thus far, and keep up the great work!
@@miguelridao2502 your UI will have to be in world space, but yea theoretically it should work fine. I havenât tried it myself though
Bit of a clickbaity thumbnail :S was searching for an actual knob dial and, while this is also helpful, it's not it
hi- i can hover over my buttons and they change to the highlighted color, but i can't click on them. any idea why?
Make sure to swap out the event system