UI Buttons | VRChat Udon Tutorial

all right so I'm going to go through the process of setting up UI that you can use for buttons or interacts or sliders or anything like that there's a lot to this in the sense of setting up the actual like UI itself rather than the code behind it so this will be a start to finish tutorial like my earlier videos rather than the I've made everything check it out kind of thing that we've been doing as of late so in my hierarchy I'm just going to right click and create a UI slider now what this does is it immediately makes this giant white box and puts this slider down here for some reason I'm going to set the slider to zero zero which that's in the center of this canvas however this canvas is right now rendering over the whole UI which we don't want we just want it to be a small in your world kind of thing so on our canvas will be changing screen space overlay to world space and now it's actually just in our world it's still absolutely massive so I'm gonna shrink this down to zero zero one and see where that gets us perfect this way up there though so let's bring it down here alright I'm actually gonna make the ground any other color there we go so we can see our UI bit better first scale I'm going to drop down a little capsule in here because this is roughly the same size as the player so I'm just too perfect alright so let's say this is our player looking at our UI so we want this canvas to be 1.5 there we go now that's slider really small so we'll just leave these things and set it to like 10 or something perfect actually can we leave that at 1 and just put a zero at the these know it skills that weirdly alright we'll just do it the way I had it before right there we go now I'll just drop this sooo bottom in order for you to interact with the UI using the kind of ray beam interact system you see in the VR chat when you're using the menu you need to go to add component get myself a bit more transparent here and type vr c vr cui there we go no underscore and this will put a little script on here ik I actually let me just hide that alright this will put a little vir cui shape on here and you don't need to do anything else than that this will just make these objects in your interactable the other thing you have to do actually is you select canvas and change it from UI - let's say default because otherwise if it's just on the UI layer you can't interact with it due to how VR Chad doesn't stuff alright so if we take a closer look at this slider object here we have a few things going on here but we really only have to care about two of them one we need to make sure that navigation is that automatic is set to none otherwise if you're facing this and like the center of the vision is on this and you press a or D it will automatically go up or down which makes it really weird when you try to walk up to it and do something because your motion and directional input controls also control the UI natively if you don't change navigation to be none the other thing we care about is on value changed so this is what we'll be doing all of the fancy stuff when we update something so for instance let's just say we want this slider to control the brighten of our directional light let's go from zero to one or something there zero to two so we'll leave that a 1 right now this was right in the middle and we'll get this slider and we have a min value and a max value will leave min at zero and we'll set max to two now if you have this like value here this is its position and this toggles between the minimum one and the max one now what we have to do is write a script for this slider so I have a script folder here how to create you sharp script you you can do it with a normal uh done graph script as well this one I can just do it faster this way so we'll do this light slider here oh I'll show you what you can do with the normal hoot on one as well it it's pretty simple so right now we'll just go to slider well drag the C sharp one on here and hit convert to move on behavior and there we go this one is turned into done and I'll double click this so we can start editing yet alright now that the scripts all loaded up we'll go red head and establish two different variables one of them will be a private slider and I'll just call this slide ooh so we want to get the slider component from this thing here this script right here however natively you can't access those things with it on sharp so where it says using you just do a little drop down here you go right here press ENTER then type using unity and gin UI semicolon there we go now we have access to all the different variables and stuff used in the UI system then after this we'll do a public light and I'll just call this light star again all right now this light will just be the light that we're on defying over here in start we will set slide 2 equal transform dot get component and put in the little carats slider there we go and that will just set this variable to be the slider component that we have on the same game object now we're going to have a custom event here public void slide up date there we go now this will be the event that we call on value changed over here so whenever this slider gets modified or updated we do lights target dot intensity equals slide dot value which basically is just saying the sliders value that number is going to be taken and shoved into the lights intensity which will be between 0 and 2 I'll just hit control s on this and actually I'll copy slide update and because we'll need to tell it to use that over here and I just want to make sure I have the spelling right all right I've just moved my guy a little bit out of the way here so we can see things a bit better for a light target we will set this to be our directional light and up here on value changed there's like a list of events that you can set to be here we're hit going to hit plus and right here where it says none object we need to set it to B itself because it'll be sending information to this script so if it takes slider and drag it into the spot for it it gives us a function option which actually is just the default and we can choose a function for a bunch of things we want to go to Sudan behavior mood on behavior and right down here is send custom event chances are your monitor isn't big enough to show this entire list so you may have to hold down and scroll a little bit but you'll want to send custom event and this is where we will put slide update I'll just hit control s so every time this gets modified this sends well this basically tells it to run this event within this script let's see if I hit play here we can actually modify this slider in unity so if I grab the camera control shift F and it matches our position here I can slide it back and forth right here and it can meet whatever position that it needs to be at if you okay when you spawn your slider and canvas originally you'll get an object called event system that this is the thing that lets you like move this back and forth if you remove this this will no longer function in unity but it'll work fine in VR chat itself since our direction of light is default one I'm going to select the sliders value default ly to be one perfect and I'll control us compile that again and let's we'll just get rid of our capsule and boot into game to see how it works when we interact with it there all right now we're back in game we can run up to this if you feel around it during play mode I guess I could have showed this in unity itself but when you press play and everything gets launched up it'll put a box Collider around this and since it's on the default layer you collide with it but this is what allows us to run up and drag around like this so you see it's modifying the directional light intensity let me do this and you can see it a bit on my avatar when I walk around but now I'm super bright alright so next we will be setting up a button to turn the lights on and off just just as another example of UI things that you can use so on the canvas we'll right-click here create UI button right here and I'm gonna move my do it again alright so on our button we're going to set navigation to be none and of course let's move it up here a bit and make it a bit more visible a rect transform let's bump you up to 10 as well so on our button we'll need another script I'm gonna right click here create new you sharp and I'm gonna call this you i underscore game object toggle that way we can know that this script is specifically for the UI but can be used at any point to toggle any form of game object on and off it's always good to be able to reuse scripts that you've already made rather than having to make them for everything so it's best to try to make them as universal as possible so we're going to do the same thing we did before where we're doing using unity engine dot UI and we'll have a private button button and a public game object target on start will set button to equal transform dot and get component button and then we'll make our a custom event so we'll do a public public avoid let's call this object toggled and when we do this we will set the target dot set active to equal in these parentheses target dot active self or in hierarchy you can do either I take Li do active in hierarchy I don't personally know a difference but so right now this just sets it to its current status so we need to put an exclamation point before this so it's a target dot set active equals the opposite of target presently active in the hierarchy I'll just hit control less on this and we'll come back in here we'll let it compile a little bit since this is going on down here we'll come back to our button and we'll put a UI game object on here so that and just compiled everything to make sure it's all working we'll set our directional light in the target slot and on the button will do the same thing as we did before it will put button itself in the on click option will do mood on behavior send custom event and what did I call this object toggle checked toggle perfect yep all right we'll save that I'll move the camera control shift off to here just so we can see it over here we'll hit play and we'll see if it works and look at that we have a direction of light toggle just by pressing this button and we can do it as fast as we want and then just to be sure we'll load this up in VR chat to make sure it works all right if we load back in you can run off to our button and yeah we can interact with it you can set it all the way down to nothing you can set all the way to max and turn it back on and it's really bright alright so that's the basics of using buttons with custom events in VR chat using it on there's a lot more that you can do with these but this is just the easy way to get started and know that everything's working also the way you know you're hovering over a canvas is your your little glowy UI particle reticle will be visible on it there we go now you can use that one other thing that you could do this is just a quick little tip more than anything else if you set your canvas to be on UI menu layer you will only be able to interact with it while your menu is open so if for say you have a lot of like UI in your world and you don't want people to be accidentally accessing it all of the time you're gonna have it set so that they need to have their menu open in order to use it as one little fun thing that you can do and people were doing it a while back but I will personally always keep it on default because I always have my things it's just like a big panel against a wall or something like that but that is the basics of integrating actual UI with Odin I'll be enjoyed you

Channel: Vowgan VR

Views: 19,653

Keywords: VRChat, Udon, UdonSharp, UI, Button, Tutorial

Id: FWU7ckfkUrw

Length: 17min 15sec (1035 seconds)

Published: Fri May 22 2020