UI Options - VRChat Udon CyanTrigger Tutorial

hi there this is fiona with another scion trigger tutorial today we will learn how to make an options board using ui that can adjust post processing audio volumes and toggle options in your world all using cyan trigger check the description below for useful download links be sure to get the latest version of the vrchat sdk and cyan trigger there's also a downloadable version of this prefab so here we've got a little ui board if you were in vr you see your little raycast to to this and using this board we can do things like here we've got chairs we can toggle the interaction for the chairs off and on we can turn off objects in the world you can see there's some pickups over there we can turn those off and on or we can disable particles there's a lot of things you can do with toggles turn stuff off and on your world we can also adjust the volume of background music [Music] we can adjust post-processing here is we've got a bloom adjust and a brightness adjust for kind of like a sleep mode okay all right let's set this up i've already set up sort of a copy of this but taken off all of the important bits so we're going to start on our own the first thing that we're going to do whenever we're making a ui system is to make a canvas all right and the way that you make a canvas let's just start off here here's our quad which this is just visuals we've just got this little background here and i've got a title we're going to start by making a canvas game object ui canvas now if we double click on this this is way off in space and it's kind of not doing much here we need to do these following uh changes to it we need to turn it to world space that's going to make it in an object in the world as opposed to something that renders on top of your camera we are going to change the scale of it to 1000 by 1000 pixel canvas however it's also interpreting that as a meter so let's go ahead and turn this into 0.001 scale everywhere so now it's actually uh two by one meter so basically think about each one of these pixels is a millimeter okay and let's go ahead and put this back at the origin of our world so we can find it now i already have this quad set up so a really easy way of putting this in the right spot i'm going to drag it as a child here and zero it out all right there we are okay and now i'm going to drag it back up to the top so that our scales make sense and it changed our z scale so i'm going to set that back to 001 and our x scale 001 all right so now look that is the border of our ui anything that we put inside this will be interactable so you can see this gizmo this little outline of our canvas that's what we're going to want to do okay now that we have our canvas we need to put some stuff in it so let's start off we look at our example here let's make a toggle all right we've got three toggles here a toggle is a button that just goes between two states game object ui toggle all right where is that toggle and how big is it okay here it is it's right here it's very small so i'm going to scale this up to kind of match and then we're going to need to bring the z position up a little bit so that we can see it there it is okay so let's just put it up here now you may notice this looks a lot different than what i have over here that is because you can customize the look of your ui however you want and i strongly suggest that you do so uh in this option for example if i look at this toggle that i've got a title which i've made test text mesh pro and then i've got a background that i've put different images in and the check mark for the thing that goes off and on in your toggle instead of the check mark it's like a little circle it's got a little color so now if we go back to our toggle right here this is what unity gives you by default i'm not going to actually make it look good for you you should make yours look good however you want we're just going to put in the functionality for today okay so functionality of the toggle let's name this one i'm going to name this one pickups as an example okay so if we were to go into play mode and uh try to click on this right now it's not gonna work so there's a few more things we need to add to canvas to make this work for vrchat so let's look at the example here up in my other options board okay so we have a few things that we didn't have on ours so this vrc ui shape that's just a thing you throw in there to make it work in vr chat and we also need a collider so let's go ahead and put that onto our canvas so add vrc ui shape and then we're going to add another component which is just going to be box collider we will set it to trigger so it doesn't get in the way just as long as it's on there it doesn't matter what the size is okay that's all we need to do all right back to our toggle this is the toggle script provided by unity we want to change navigation to none is on this is the variable we care about so if you check out over here the little check mark if i uncheck it it goes away comes back goes away comes back that is what's showing us what our boolean is okay and then the other thing we're going to want to do is what action happens when you click it and that is going to be this the on value changed okay before we can set that up we need to actually add the sign trigger so let's add the sign trigger and we're going to put in what we want to change so here i'm going to add one variable which is going to be a bool and i'm going to call this is enabled this bool is where we're going to store what the same thing is as is on up here that's all i'm going to do there okay so i'm going to add a custom event and i'm going to name this custom event i can name it whatever i want in this case i'm just going to toggle you can name different sign trigger actions uh the same thing on different game objects and that's completely fine and so if i were to duplicate this game object and try to use it for another toggle it can all stay in the same the same naming convention and you'll be fine okay so now under our actions we're going to add first let's sync up the variable we want to make sure is enabled and is on are doing the same thing so let's sync that up toggle get is on all right so it's going and and let's drag ourselves into it that's this one right here and the boolean that we're storing is is enabled perfect now the next thing we want to do is put in the objects that we want to turn off and on so if we want to do the pickups let's just do game object uh set active all right and then we'll put in the ones that we want to set active and so in this case i've got toggle examples down here i have three pickups that i can drag in there so let's go back to our toggle there's a very handy handy little thing that you can do to make your life so much easier do you see this little lock up here this will lock this inspector to keep it from disappearing if you click on something else so let's lock it let's come down select all three pickups drag them right into this header right here do you see that little plus sign they all show up i'm gonna go ahead and remove the empty one like that now unlock the inspector so see here if i click around it's not changing unlock the inspector now it's going to change easy way of putting like if you had like 100 pickups and you need to select them all that's the easy way of finding them just dragging them all in at once okay so now we've got uh the toggle we get it is true or false and then here's all the objects and i'm just going to change them to whether they're enabled or not that is literally it super easy okay for just turning game objects on and off now let's go back up to the toggle itself and then we are going to hook it up to that cyan trigger so here we're going to say this object itself the function is going to be an udon behavior oh my god look at this huge list ignore all of it look for send custom event all right that is what we're looking for send custom event and the send custom event we want to look for is the same thing that we named our cyan trigger custom there we go so now when we go and click on this it should toggle those game objects off and on we'll test that later and make sure we set it up all right what's the other thing we want to check uh how about those fireworks here we got some fireworks in the background let me just let me just play all of them oh very pretty very pretty but some people might not want to have that so we can turn those off in the exact same way let's do that just by taking that toggle we had before let's duplicate it let's drag it over i'm going to change that label call it fireworks now in this toggle that we just duplicated down here those things that we're setting active or not well let's just make those the fireworks instead okay so we can do the same thing we can lock the inspector let's just change that back to zero select our three fireworks objects drag them into the header they populate unlock the inspector now we've got a second toggle that does fireworks and you can do the same thing for chairs is going to be a little bit different we don't necessarily want to turn the chairs off and on because if someone is sitting in one we might want to still see the visual of the chair so let's do that a little bit different so i'm going to go ahead and duplicate this toggle one more time and on this one let's scoot it over let's take the label and we're going to call this one chairs and instead of changing the game object when uh the toggle goes let's go ahead and delete that and then now we're just going to do a collider set enabled and then same thing let's go ahead and lock that let's find those three brc chairs drag them into there unlock it um go back to our chair toggle we might want to change these we're gonna i'm gonna name this chair toggle so it's easier to find the inspector this was fireworks toggle and this was pick up toggle okay oh we had one more chair i missed one so let's go back to our chair toggle and if you add something to your world you want to disable just add another one here and then drag that other chair in look now we're disabling all four chairs great okay we did all of our pickup toggles let's do background music now okay so we've got our background music um i should have that here we go this is just an audio source i've got this audio source in the world it has this volume slider right here and we can change this with scripting so let's look at our example over here how did we do this this is using a slider you see we've got this little slider it's just like a toggle but if you expand this down it has a few more options so that's all visuals pretty much same uh visual stuff that you can mess around with right here the difference we have here is value value is a float that will scale like uh on the slider right here or if you want it to be an integer so it snaps to certain values you can check this and it turns into an integer we're going to go ahead and leave it a float it was a set at point one by default okay let's go back to our canvas and then game object ui slider let's add that okay where is it here it is it also probably needs to be scale five and we need to pull it up a little bit so that we can see it it's not z fighting there we go and then it doesn't have a label right now so we want to give it one the easy thing to do is just i'm going to take this label i'll duplicate it and i'm going to stick it under my slider there and now i'm going to move it kind of where i want it to go and then i can change the text and we'll call this music all right now let's take that whole slider and kind of put it more or less where we want it right there okay so now the way that we are going to do this is very similar we're going to add a signed trigger to it all right the difference here is now the variable we're going to add is going to be a float so float and we're going to call this i'll call this music volume okay and then we're going to add an event and we're going to call this custom and this is going to be called slider changed now look here our min and max all right so our minimum value and our maximum value let's say you don't want this music to ever go above like point four in the audio source nobody needs their ears blasted so we can go ahead and change that right here make sure it doesn't get too loud okay so that's the range of our scale so now here the next thing we need to do under actions we need to get it so let's get slider slider get value value oh oh i almost forgot was the thing we need to do navigation none almost forgot to do that all right now we're going to drag ourselves in slider and we're going to store that in music volume and then we're going to set the volume on the audio source so audio source set volume and all we need to do here is find where's our background music there it is all right and we're going to set it to music volume so whenever that slider changes it will go ahead and update our audio source with that that volume now that we've set up our music volume slider with our cyan trigger we've got our slider changed custom we need to uh hook this up to the actual slider so let's go ahead and on value changed we'll put our slider in here and again udon behavior all the way down look for send custom event and then same thing we're gonna copy paste slider changed so now it will actually interact okay the next thing that we are going to do is set up post processing controls on the options board so the sliders are going to be very similar but we cannot read the values directly like we did for the music volume we have to add an animator and then use the slider to update the the float in the animator itself and this is a little more complicated so i'm going to go over this in more detail the first thing you need to do is import and set up post processing in your scene i'm not going to go over the details of that the easiest thing to do is to use this tool vr world toolkit i'll put a link in the description of where you can find this the uh this will set up post processing um automatically so if you go to post processing import processing if you don't have it yet set up post processing and if you do that it will stick a volume in your scene and set up your cameras and your layers and everything correctly here it's going to have a default profile in there go ahead and select that profile and duplicate it as many times as you want to change effects okay and then also duplicate your post-processing volume object so for example i might want to do this a few times swap out to each individual profile and then put these all under an empty so i've already done that up here right here so you can see here's a parent object and i've got three post-processing volumes that are all using a different profile i've got a bloom profile a brightness profile and a color grading profile and these are all under a single parent okay so the next thing we're going to do is add an animator okay and here's an animator that is going to control the relative weights of all of these so if we look at bloom the weight is how much is applying to the scene so you're going to set this up so that when it is at one this is the bloomiest it ever gets and then zero would be off entire okay so now the animator in your in your assets you're going to want to create new create animator controller all right so that's a new new i'm going to say new post processing controller and now on this post processing controller go ahead and put that on there now let's go into animation i like to put my animation and a tab down here if you don't see that go to window animation and go to animation and then i like to see my animator and a tab up here so window animation animator okay so the animation is individual clips and the animator right here is how all those clips are organized okay so the thing that we're going to use here is layers i'm going to add uh [Applause] [Music] two layers i'm going to call this one bloom i'm going to make another one and call this brightness and then i'm going to add some parameters that control those and so i'll add one and this is going to be a float and i'll call this bloom weight and make another one and we'll call this brightness weight okay so a layer in here then we need to go in and set these layers to one override one and override that's all we need to do now we can pretty much ignore the base layer the base layer would be things that were always happening and then these layers you can control individually and this is just how you set things up so that your animation can run all at the same time and these things are controlled individually okay so now let's go into our bloom layer and the next thing we're going to need to do is make some clips that control the uh the weight of those create a new clip i'm going to call this new brightness high and then all you need to do is hit this little record button now let's go into the thing i want to change and that was this and i'm going to change the weight at zero makes the brighter the brightest right there and it's added this little keyframe okay and now i'm going to make a new clip create new clip and call this new brightness low same thing hit the record button now let's take this all the way over to there on record and it's made this here so now let's look in the project and you can see we've got new brightness high new brightness low now look at this up in our base layer it's automatically put these things in that's great we don't want something in here right this is our base layer it's automatically going to apply this animation let's go ahead and i'm going to call this empty and i'm going to remove this clip and then i can delete this one from here i don't want those anything in the base layer okay let's go over to brightness now we're going to make something called a blend tree a blend tree is just a way to control how much you're going between one animation and another remember we just created those two clips brightness high and brightness low and they just went from zero to one for the same property and we're going to blend between them with that float value so let's go ahead right click create state from new blend tree double click that blend tree we are going to come up here here's our blend tree click on this motion now it says motion because it's assuming you're like animating a moving character but you can do blend trees for anything so i'm going to go ahead and add in a motion field and add in another motion field like this so what we are going to be animating is what is our parameter i want to pick brightness and then i'm going to put my two clips in here so i'm going to go ahead and take new brightness high new brightness low now we can do the same thing for the bloom create state from new blend tree double click it click on it add to motion fields um we're going from bloom white here and i'm going to go ahead and use the bloom the animations i already had okay bloom low to bloom high and let's go back into the scene so let's now check in my animation and you can make sure these are set up correctly your animations by clicking on this clicking on animation and now it's actually referencing this one that's in the scene okay so if i look at bloom high yes you can see how it changed and when i use the play bloom low it changed brightness high it's bright brightness low let's do the preview it's low perfect let's take the preview off so now we know that that is all set up correctly great okay now let's set up the cyan triggers that controls all of this now that we have our post processing set up with our animator controller and our clips with our blend trees now we need to set that up in the slider so let's go ahead and just duplicate our music slider scooch this down a little bit scooch this down a little bit let's call let's go ahead and rename these for clarity and this one is called music volume and we'll call this one bloom and this one brightness okay so now let's make sure that everything looks the same so over here we're going to change this to bloom and then we'll change this one to brightness great okay so our uh animator is on up here on our post-processing controller but we're gonna handle all of the logic in the sliders okay so starting with the bloom we've got our slider we have our slider changed custom here but instead of doing an audio source just delete right there animator set float do you remember the float that we made in the parameter okay so what we need to do here is then pick right here animator into flow we the int would be the id of the parameter like like the first one would be zero the second one would be one i want to use a string so i know exactly what i'm talking about so let's go back to our animator look at our parameters bloom weight just type that right in make sure you get your capitalization correct and then we are going to be putting in the slider value which i'm going to just rename right here um and i'm going to call this bloom amount just to make sure that it's a different word and i don't get confused okay and i'll just put in our animator for our post processor right there now that should be all set up okay and let's actually go ahead delete this one and duplicate this one and go rename again call this one brightness change our label to brightness brightness and now we're going to do the same thing here except i'm going to rename this to brightness amount it's doing the exact same thing i don't have to rename these i'm just doing it to make myself uh get less confused okay and then this let's look at our animator what do we call it brightness weight okay double check our spelling is all correct great okay so now let's look at our scene i have all of the options that i want the next thing i need to do is change the layer it's going to automatically put all of these things on the ui layer okay if you do that you can't interact with it so go up to your canvas okay so this is how it starts and then you want to set it to default or something some other layer that you might want to have and say yes change children and it'll change everything below there to that layer other thing we need to do let's go back and check everything and make sure that we don't have navigation on any of it navigation none navigation none none none none great so now that we've uh checked all of those the next thing that i'm going to want to do is i realize that each one of these sliders is defaulting to zero which may not be what we want to start on and i have given uh each one of those post-processing things here a default weight already now you may want to decide okay how do you want the world to start and kind of play with that and get an idea of like where you want the world to start so i'm going to say like point 1 looks pretty good for here bloom we're going to give it maybe 0.25 um color grading stays at one because we're not changing that background music i start at point two okay so you want to control all those things in the sliders so let's go ahead in the sliders and we're going to add some start just to set all the stuff up ahead of time our music volume i'm gonna say this is a value i'm gonna start this at point two um the bloom i was like at 0.25 and the brightness um was that what point one i think something like that okay so let's put in some start values so we're gonna add event start and then on this we are going to just call slider changed okay that's all we need to do cyan trigger send custom event slider changed that way it will grab the value that's in the slider and apply it so that everything matches up from the beginning so let's just do this in all our sliders this would have been better to do when we started and duplicated them but it's not too not too bad okay and i've already got that there same thing here add event start add an action sign trigger send custom event slider changed okay now it should all initialize correctly when we go okay let's give it a try okay now we are all initialized okay now our brightness bright dim okay i like that now music perfect bloom very good now let's take a look we got our chairs for interactable let's go ahead and turn this off no longer interactable we can turn off our pickups as well you can see those disappear and then disable the fireworks that is how to make a basic options board using sign trigger thanks for watching

Channel: CyanLaser

Views: 8,170

Keywords:

Id: PIFzRuDeK4M

Length: 28min 17sec (1697 seconds)

Published: Wed Oct 13 2021