Project Description


Title: Live Training 19th September 2016 – Polishing Your Game Menu
Platform: Unity Tutorial
Length: 01:06:16
Difficulty: Beginner

In this live training session we will look at adding polish to your game menu including audio, animation and transitions using Unity’s UI system.

so for this live unity tutorial training session we will be working on polishing your main menu and what I mean by polish in this case is adding animation and sound to juice up the interactions with your main menu so little highlight animations transitions between the panels of the menu sounds when you interact with things and should be a lot of fun not to advanced i’m assuming that you know some of the basics of what the animator window and the animation window or like there’s almost no scripting which is kind of interesting i thought i was gonna have to rely on scripting a lot more for this but actually was able to do a lot with events and with animation at the end of the training we’re going to write a few very tiny state machine behaviour which are scripts that you can attach the states in the animator and so that’s going to be kind of cool and i’m going to be building off of content that we created last week when we did creating a main menu so you see in the image there so let’s fade into unity so this is the completed version of what we’ll do today and so I’m continuing from the kind of basic multi-panel menu that I made in my previous training which i’ll put a link to and you can find at the unity 3 live training archive or on the unity 3d youtube channel and so let’s take a look at what we actually turn to some little sounds hear something to turn up my volume let’s take a look at what we’re going to create so i play my scene so here we can see we have a nice little animated transition in and then when we highlight our buttons they do a little squish out and they play a little whip sound when we click the start button actually the other ones first when we click the help button it wipes in does this kind of squashing transition for the help panel and squashes back out for the back button audio works the same way start will play a little sound and fade to white before loading the next scene and quit plays a different sound and fades to black didn’t get these weird i’m pretty sure these are editor errors i’m just going to clear them and hide them for now so they don’t distract me and so that’s what we’re going to be creating so we’re going to be using the animator window quite a bit here the animation window we’re going to be working with a lot of UI elements many of which already setup but we’re basically going to be adding animation to them and so we’ve got Blaine in the chat Blaine is in there thanks for joining us he can answer some of your questions as we go and then i’ll be taking some breaks to answer questions from the chat as well so what us begin so i’m going to close this instance immunity with the finished project and I have behind it an instance of unity with the project in the state where we left it last week or two weeks ago at our previous training so in its current state I’ll just play this show you we’ve got these sort of dark blue highlights which are using the color tent transition mode in the UI will talk about that and then we just cut between the panels when we select them and we can start to load the scene and we can quit which will exit play mode in the editor or quit the application if we are in a built and this for selected with set actually don’t want that there’s a little simple script that we wrote that’s attached to each of the panels that detects if there is a keyboard or controller input and start selecting buttons to allow it to work with the navigation and then just really too simple scripts for the start button this amount of behavior that we’re actually going to replace and then for the quit button that due to starting to quit everything else is done with on click events and UI elements and so we’re going to kind of continue with that low programming approach doing a lot of stuff this time with animators and animation along with the UI event system so the first thing we just look at the chat make sure you guys can hear me and that stuff is working uh yeah yeah some questions about why is that selected it selected because you can choose a UI element and set it as the first selected object in the event system so it will be automatically selected and that will help it to work with a controller or a keyboard navigation if you don’t have this little script that we wrote that’s checking for input and then we’ll select whichever button in this case it will select the start button so now if i play the scene then just push the down arrow it will automatically select and then once something is selected I can begin using navigation and that was something we covered last time but maybe worth mentioning alright so what we want to do is we want to set up a kind of a template button that we’re going to use and copy for our other buttons so i’m going to do with the help button to start so I’m going to highlight the Help button and what I want to do is I want to set up transitions for the button that are going to be animated so right now in the button component here the transition is set to color 10 and that’s why we’re getting this dark blue tent when we either mouse over or select the button with the keyboard so what I’m going to do is I’m going to switch this now to the animation transition mode and what this is going to do is allow us to play animations when the button enters these different states so normal which is unhi lighted highlighted pressed or disabled now there’s a really useful little feature here which is this auto-generate animation button what this will do is create an animator controller with four states and for animation clips along with transitions for each of these states trigger transitions for each of the states or trigger parameters in order to transition between the states so a lot of boilerplate work being done for us with this automation so we’re going to click that button it’s going to ask us to create a controller i am going to make a new animation folder to put all this stuff in and i’m going to call this button controller and hit save and so now it’s added an animator component if we double-click on it it’s going to open the animator window right I’m going to assume that you know a little bit about the animator window the short version of this is that we have these states which control what’s what animation is currently playing and we can transition between them to play different animation clips and we can control the rules for when those transitions will happen and also specify when we want transitions to start via script so notice we’ve got a state for normal highlighted pressed and disabled normal is set as the default state that’s why it’s orange and there’s this transition from the entry node here we’ll put this up here into normal so as soon as this starts it’s going to transition to the normal state and then if we look at the list of parameters here we can see that we have the parameters for normal highlighted pressed and disabled which are going to allow us too we’ll see here for example to transition from any state to normal the condition for it is normal right and we’ll be using this a bit so we’ll talk about this a bit more if you’ve never seen the animator before will be will be using it and I’ll explain as I go so what we need is now we have basically empty animations for each of these states and the one we’re interested in is this highlighted state so in order to edit it i’m going to highlight the Help button choose window animation and I’m gonna dock this in the same tab here and actually maybe all know I think it’s good there and so what I want to do is I want to squish out the scale horizontally when the button becomes highlighted so I’m gonna do this by adding some keyframes if you don’t know what a keyframe is it basically specifies the goal . for an animation to get to and then anything between those key frames will be interpolated so if we’re trying to go from point A to point B we will specify . . b and the animation system will create the frames in between moving between those two points so what we need is we need to select first of all from this menu here the animation that we want to edit so i’m going to choose highlighted and then add property now the component that I want to animate is the rect transform so I’m going to unfold that and I want to adjust the anchor maximum and the anchor minimum let’s start with the anchor maximum notice when we click that it adds two keyframes at the beginning and the end of the animation now we’re going to want to start in this same state with this one side not the anchor i’m i’m thinking of something else not the anchor maximum delete remove property i want to do the scale so it gives us these two keyframes right the beginning point and the end point and what we want to do is say maybe over the course of 10 frames we’re going to raise this scale so I’m gonna add a keyframe here at ten frames and i’m just going to adjust this value so i’m going to go over here to the X scale on the rect transform this is for the help button and i’m just going to type in 1.1 will see that it changes we can see it kind of flattens out here or stretches out and now it’s gonna be fast but if we play it we can see it’s going out but then it’s also going back and resetting right and we don’t really want to do that so we actually just wanted to go one way so we can delete this later keyframe and now we just have this short animation of it going out and then staying if we loop it was going to go if we play it’s going to look really fast but that’s what we want so the other thing that we want to add here is a changing color right i want to color to get lighter so i can do that by adding another property in this case for the image component and its color right and now all i need to do is select the point where I want the keyframe to be added and actually i can just change the color directly because as you can see this record button is enabled in the animation window and that means now that changes that I make in these parameters that are red are going to have keyframes written for them so what I’m going to do is I’m just going to lighten this out not all the way white but you know maybe it’s kind of nice pale blue and that’s going to add that keyframe for me so now if I scrub back and forth we can see that it’s stretching out and taking on this nice highlighted color so that’s actually all we need to do to add that animation and because we’ve used let’s turn off record mode and put the animator on screen play let sex go out of maximize mode so you can see both happen now if I mouse over this we can see that the animator is transitioning to the highlighted state and our animation is playing but it’s looping crazily right and that’s because we need to turn off the loop property for the highlighted animation so I’m going to exit play mode select the highlighted animation and turn off loop time right now let’s try it so you can see the animator is going to update in real time right so we can see right now we’re in the normal state nothing is happening and now when I highlight the help animation it transitions to that state so that’s nice so we’re going to use that and apply it actually to all of our other buttons so what I’m gonna do is I’m actually gonna unfold the help and audio panels i’m using ctrl click to select their back buttons and then i’m going to select the quit audio and start button and what I’m going to do is I’m going to go to edit selection save selection once i’m going to save these as a selection so that I can recall these five buttons all at once when I need to so now i’m going to highlight the Help button and copy the animator controller for the animator component with the button controller in it so now we’ll reload our selection could use ctrl shift one to do that and what do I have have selected something that I don’t want to have an animator state machine won’t even know you could do that that’s funny i made a bad selection we go ok so now we can see right we can edit all of these simultaneously with them all selected so what I’m going to do is I’m going to paste component as new right I’m gonna use the context sensitive gear menu and paste component as new that’s going to add this animator with the controller that we just edited and i’m going to change the transition mode to animation for everything so now they should all interact in the same way let’s test play very good and you can see the reason that we’re only seeing the Help button highlighted is because that’s the last animator controller that we open right so we’re just seeing the animator for the help button but so this looks nice right we have this little animated highlight for each of our buttons and the next thing that we’re going to do is we’re going to add a little sound to that but before I do that let me just look at the chat and see if there any questions oh and that yeah those asking how am I getting my canvas to show this way it’s using the canvas scalar i’m using the scale with screen size setting setting so i can see it at its what it’s going to look like properly without having to maximize let’s see question should they’re just be one canvas scalar yeah pretty sure there should only be one I’m just using one canvas for this whole UI you can have multiple campuses but generally speaking if it’s one menu you can probably do it with one canvas it’s not really a reason to have multiple and less like when a screen space in one is world space for example ok so let’s continue so we’ve got our button highlights we want to add a little sound to them so what I’m gonna do is I’m going to create a empty game object called menu sounds and this is going to be a holder for several other objects and this will be a button highlight sound we’re going to add a audio source component and add an audio clip now i need to import my audio clip so i’m going to create a new folder called audio and open that up and then I have them here in a $YEAR explorer window in windows and i’m just going to drag them in so these are just a series of wave files i got these from the VR samples asset pack so they’re not included in this sample you I asset pact that we’re using and i’ll post a link to the asset pack later if you can’t find it on the asset store for both of them these are actually sounds that I made for the ER samples project that was my contribution was making a sound design in the music which is pretty fun and so I’m just going to reuse them here for them you would they were the same thing there they were menu sounds and so we’re just going to use them here so i’ll just play them quickly we have many clothes when you open your gaze over in this case because it was a gaze you I was a little menu load sound oh so soon music which we can maybe put in later and then a second select load sound so what we’re going to do is we’re going to add our little menu gaze over sound to this audio source we’re going to turn off play on awake right because we don’t want to play when the season starts and then we are going to add to our Help button or template button we’re going to add a component called an event trigger this is actually something that i just learned about in the case of making this session but it’s really cool because we’ve seen the on click events 4 buttons which are events that are raised when the button is clicked but they’re actually a bunch of other events that we can graze using this event trigger so what we’re going to do is we’re going to add a new event type and here we can see the whole list of events that can be that can be used can be triggered so . or enter . your exit . down . or up DRAG&DROP scroll selected select a whole bunch of others so really really useful so what we’re going to do is we’re going to do . or enter and we’re going to add an event to that so it’s just like the on click events for the button component but in this case we can choose what type of interaction with the UI is going to trigger it and then again we can make a list of things that will happen when that is when that interaction occurs so i’m going to drag in my button highlight sound navigate to the audio source and call the play function so now we play the scene weep very cool so we can see I’m getting this weird error this is I believe a unity editor error have to follow bug report on and so we can see that when the pointer enters that UI element this event is raised in this case this sound is played now in order to have this work with both mouse and keyboard controller we need to actually add another event type which is the select event because if you well not going to demonstrate it not working but basically and this hopefully grabs the same source and the same function so that should just work because if you select something with the keyboard it doesn’t count as a pointer enter which is interesting but kind of good to have separate control and then we are going now i’ll push the keyboard button and we can see that it works for both mouse and keyboard ok so what we’re going to do now is let’s just see if I can do with the keyboard ctrl shift one to switch it up snow we first got a copy the components i’m going to copy the event trigger component and then push my control shift 13 finger button combo and bring back up my selection that I say it right and then paste component as new and so that is going to know add those sound events to all of our buttons including our back buttons and so on so very nice and now we can move on to so we’ve got our buttons working the way we want with our highlight animations and our sounds and the next thing that we need is transitions between our menu panel so we’re going to do the main menu panel first before I do that I’m just look at the chart yeah the star boxes i learned something new event trigger i totally didn’t know about that either i was going to do it a really Jenky way and I asked Adam Buckner and he pointed that out to me and I was like oh my god so cool so that’s a nice one Glenn hunter asks i’m assuming the event trigger has to be attached to the button object yes very important right has to be attacked or has to be attached to the UI object that is going to raise the event right in this case on point to enter let’s go back to the Help button on pointer enter or pointer enter gets the event gets fired when we enter our pointer into the Help button specifically right so it’s attached to the Help button it has to enter that UI element you know it could be a something else see a slider or a panel or whatever but it has to its tracking whether the pointer enters the bounds of that rect transform I assume that all right so let’s set up our panel transition so we’re gonna start with the main menu panel so we’re going to start by creating the animation so I’m gonna go to the animation window and hit the create button which is going to create an animator and an animation clip create and we’re going to call this main menu open and hit save and so what I’m going to do is I’m going to animate the anchors of the rect transform to get this kind of squash in effect and so let’s we’re going to add a property to the rect transform for the anchor max and what we’re going to do is we’re going to set the anchor max 20 and we’re also going to set the what they’re calling the size Delta X which is basically the offset in pixels between where the edge actually is and where the anchor is we’re going to set that to zero so what that now does is now we’re gonna have this very long slow animation right what we’re going to do is we are going to 0 and I want to set the the other anchor here can I just do it or doing it yeah that so just zeroing that out will um create the keyframe for me i’m going to set that to zero as well and so 0 in this case is the leftmost edge of the screen so now we’ve got this and we just want to pull this back in oh wait I broke something undo go back this is what you want this is going to go here and this is going to go 200 totally wrong weird-o because it’s not getting the max all right let me just as weird or it’s not getting the men there should be . 250 alright so now we’ve got our nice little transition but we can see our texts is kind of now hanging out in space right so what we’re going to do is we’re going to add a fade in on this panel so to do that I’m going to add a component to the main menu panel which is a canvas group component this is part of the UI system and basically the the reason I use this a lot is to add alpha control to a whole UI element right so we’re gonna want this to be at one here and at 02 start the animation and so now we have it fades in and stretches in group very nice ok and so in terms of the animator so let’s click over to the animator window this animation if we play the play the scene going to loop right which we don’t want so let’s fix that maintenance main menu panel asset I don’t know why these ended up in audio let’s put them in animation the is because audio selected the main menu open animation clip past that we’re going to turn off Luke time and now it’s test which their group there we go ok so we can see it doesn’t like playing the animator and the thing window at the same time we can see that it animates in automatically because it’s transitioning by default to the main menu open which for this panel only we actually want we’re gonna make a second animator controller for the other panels which is not going to default to open its going to default to close so what we need is we need another state to close this panel to zip it back over this way so i’m going to highlight the panel again i’m going to click in this window use control a to select all ctrl-c to copy choose create new clip from up here right from where we would select our clip and we’re going to choose main menu going to call it main menu close hit save and i’m just gonna click on the animation window and paste and all i need to do here is just rip make sure select these and then just swap their positions in time right so now we’re going to start closed so we’re gonna start open and go to closed right so in the animator that’s added a new state for us right and so we need to configure the state machine so that it will do the things we want when we want so we’re going to need to when it’s time to close the panel we’re going to need to make a transition from main menu club from main menu open to main menu closed so i’m going to right click on main menu open choose make transition and then drag this line here to make menu close main menu close and it’s going to make the Menu close and so what I’m going to do is highlight that line click on the little triangle there and right now we have no parameters for this animator controller so we are going to want two parameters that we are going to set the first is going to be a trigger parameter called open and the second is going to be a trigger parameter called close so what I’m going to do is I’m going to choose trigger add a new parameter called trigger and then click the plus button here to add a new parameter called close so going from open to close we are going to add a condition so we’re going to highlight the the transition the line turn off has exit time has exit time is going to mean are we going to wait for his position a specific time before we initiate our transition or we going to do it if we turn it off it’s going to be immediate which is what we’re going to want so then we’re going to add a condition to our list clicking the plus button and by default that defaults to open which happens to be the one that we want so we don’t need to change it next we’re going to set a transition from main menu clothes back to open and for this we’re going to highlight the transition turnoff has exit I’m hit + to add another condition and in this case it’s going to be close which will select from the drop-down menu so now we can use the animators . set trigger function to set these triggers which will then cause our animations to play so let’s set that up now in the inspector so what I’m going to do is let’s say our Help button first we’re going to want to display the help panel and play the animation to close the main menu panel so what we’re going to do is we’re going to add an on-click event so previously in the previous training we were just using game object . setactive on the main menu panel to turn it on and off now we’re going to choose instead of game object that said active we’re going to choose animator . set trigger and we’re going to choose string now we just need to type the string make sure that you type it exactly the same right it’s a string so it needs to match right so this is the case capital C close ok so now when I click my help button is going to do two things is going to set active the help panel game object which is the way we had it before and it’s going to send the trigger message or set the trigger for the animator component attached to main menu panel to cause us to transition from main menu open to main menu close so let’s see that in action let’s turn off this so we don’t accidentally animate things we don’t want you can see it’s on right because this is red and then we are going to let’s put the animator in front so you can see it hit play and maximize anyway go to help click it and it totally doesn’t work for some reason and that reason is animator set your clothes on the Help button should be right mm and when you close that looks correct if I missed you i miss chat close game objects active huh it all seems so simple oh because I did open not closed door closed I flip them because I’m very intelligent that’s why ok let’s try it again play whoo ok that’s looping right we don’t want that so let’s go get our clothes animation turn off Luke time okay very good so now what we want to accompany our closing animation is a closing sound so I’m just going to duplicate this button highlight sound and we’re going to call this close sound and we’re going to switch it to menu close sound effect and then when we push the Help button here we’re going to add an on-click event and dragging our clothes sound and audio source play through to try we’re very nice ok good so now we need to so we’ve got the transition in and transition out for the help panel for the main menu panel sorry the next thing we need to do is the help panel so let’s do our help panel so first of all I’m going to enable it and then I’m just going to copy my animation for my main menu panel so let’s go to animation open select all those keyframes ctrl-c to copy go to help panel create a new clip this is going to be helped panel Oh Ben save i need to add the canvas group component before i forget less my animation complain about it not being there and then i’m going to paste in those key frames so now the hell panels come from the same side but we actually want to flip the side it’s coming from so what we’re going to do is just set these to be with highlighted doing the inspector we’re going to set the minimum and maximum 21 instead of 0 so one is going to be the far right side of the screen and will zero out the offsets near all and there we go and it’s got the Alpha fade in there and that’s all we need to do for that we are going to you can actually just reuse that copy and we’re going to go to create new clip and this will be helped and i’ll close clicking the window paste and we’re just going to swap these em there we go to your room alright cool so the last thing that we want to do is to not the last the next thing we want to do is to set up the animator controller for this and for this we don’t want to immediately open the panel we want to wait until the button is pressed so what we’re going to do is we’re going to create a right-click just in the background here choose create state empty so there’s going to have an empty state with no animation associated with it and then i’m going to right click and choose set as layer default state so we’re going to transition to this from the entry node by default then depending on what is happening we’re going to transition to open and we’re going to need again our parameters trigger open and add trigger close and so we’re going to transition from let’s call this state idol because this is just going to be waiting doing nothing from idle to open know has exit time and the condition will be open in this case right I don’t wear opening yes and then from here we can transition to close this case condition is closed turn off his exit time and then from close we can go back to open if we want to for this condition again is open think I got that right that time and we also just want to make sure that both of these animations are not looping before i do that again and now for the help button we’re going to set those triggers so instead of using game object that setactive now we’re going to do animator set trigger open and while we’re at it in the back button we are going to choose help panel animator so this is when you click back it’s going to call animator set trigger you close and main menu panel animator . set trigger open and the last thing that we want to do and kind of the reason that we made that idle state is because we want to set the starting position to make sure whoops make sure recording is off right when i set the start position for our help panel to be all the way over to the right side so we’re going to set this 21 this 21 this 20 and this 20 so now it’s all the way over here and wait no that was right see yeah and then no not you and then the alpha is going to be 0 as well so now let’s test and write in group we were there we just need to add that button sound I should have actually done that too let’s actually do that to all the buttons we are going to select the Help button under notes in the on click event now that won’t work okay so we just need to add closed sound ok can’t copy that we just need to add closed sound here audiosource play that back button and here let’s just add it one thinking about it closed sound audio source play ok alright so now instead of creating a third unique animator controller for the audio panel we can use what’s called an animator override controller so we need to still make the animation clips but we don’t need to set up a new controller with the parameters and everything so i’ll show you how that works so first of all we need to do we do need to set up our clip so I’m just again I’m going to grab selected keyframes for open activate this hit create and then this will be audio panel open paste those clips in its give me a yellow warning because i forgot to add the canvas group but we can add it after the fact do that and then click on the window and a link up and in comes the audio panel and then we just need to create a new clip for audio panel clothes and paste and swap and so the when we created the clips it actually created an animator controller which we’re not going to use because it’s just going to take extra steps to set it up what we’re going to use instead is if we hit click right click to get to the create menu in the animation folder we can choose an animator override controller the animator override will call this audio panel override what this does is allows us to use another animator controller and its state machine as a template which is pretty cool so what we’re going to do is we’re going to grab the help panel drop it in the controller and then now it shows us the state’s here so here we have helped panel open and help panel clothes which are currently playing the help panel open close clips but we can replace those with the audio panel open and audio panel close clips and reuse that state machine the last thing we need to do is just set the animator override controller in the controller field of the animator component of the thing we want to animate so if you you know have situations where you’re doing a lot of the stuff with the same state machine but different animation clips this is a great way to do it really much easier ok now we just need to setup the logic so let’s go to audio button again right we’re not going to be using setactive we’re gonna go to set trigger and add closed and then here we’re going to go to set trigger open and on the back button we are going to go to animator set trigger close and animator set trigger open and that’s gonna try play ok so here I had this problem before the problem is that oh yes we didn’t set the so what’s happening now is that the alpha is turned all the way down but the panel is still over our main menu so it’s misbehaving so make sure right probably better to before you turn the Alpha down to in the idle state to set the anchors the way you want them so i’m going to set the x and the y 21 get rid of the offsets and now set the Alpha 20 just so I can see what’s going on play and of course i forgot to turn off looping you guys are not on we were very nice ok cool so that covers our transitions but for our buttons and panels and now there are just two more things to do which are the fade to white for start and fade to black for quit for which we’re going to do some state machine behaviour so let me just look at the chat and see everybody’s doing and then i will continue dese 2 99’s what version of unity i’m using this is 5.35 no.5 sorry 5.4 f2 I have no idea what was no unity i’m using this is the latest release not a beta but the latest i don’t know if it’s actually the latest patch but it’s the latest . release well I always try to use the latest . released when i’m streaming tuna me please test you out with the keyboard sure oh yeah so here there’s an issue with the navigation where we can’t go back with the keyboard on i will show you how to fix that in a second it’s because if we look at this we go to like the scene view the navigation is true because both of these panels are active the navigation is going a little haywire it’s old tedious but i’ll show you how to fix it yeah no problem it’s a good question ok so let’s just do our last two things were going to talk quickly ish about state machine behaviour because those are kind of cool and then I’ll show the navigation thing we can try to figure out those other questions that came up that i can’t remember and you can remind me of all right so super coffee definitely still iced coffee weather here in New York superhuman today alright so what we’re going to do is going to fold these up and i’m going to add to the canvas an empty child and i’m going to add to it an image component which I’m going to using the anchor presets for the rect transform an alt click the stretch and fill the screen with white and this will be fade to white is the name is game object and then i’m going to use a canvas group again just for the Alpha started at zero we’re going to go to animation and created new animation and this will be fade to white we’re going to add property for the canvas group you guessed it alpha and here just over the course of a second we are going to go from clear all the way to white and actually what I’m gonna do is I’m gonna give it a little buffer at the end it’s going to add a keyframe and have a good to white earlier so that it sits on white for a second not a second more for you know roughly 10 frames yeah now you notice here if you look at the inspector you see how it’s going it’s over shooting and then going back down that’s because of the curves you can see it’s made this little curve here and what I’m going to do is just flatten it doesn’t actually matter but just in case you’re wondering what that is we’re just going to flatten that curve so this case doesn’t matter i guess its alpha you can have a positive alpha value but anyway our alpha value greater than one alright so now we just need to trigger this and the way we’re gonna do that is with the animator controller and again so we’re going to need a idle state to wait until the button has been clicked and that is going to be the default layer state then we’re going to transition whoops I mislabeled wait a minute wait just a minute I just relabeled the wrong one call that fade and this is going to be idle and the condition here is going to be a trigger called fade and we’re going to add it to our list fade turn off his exit time so that when we click the button it will fade now we’re going to do another thing in here which is we’re going to add another empty state transition from fade to the new state the new state is going to be called load and we are going to use has exit time for this so it’s going to wait until the fade ends till that state is finished playing and then transition over and before I forget me just turn off looping and for the load state i’m going to highlight it and then i’m going to click here add behavior and this is going to be called load on enter when we can use script click create an ad and that’s going to attach this script to this state in the animator and we double-click it to open it in our favorite script editor monodevelop we will see that this does not derive from monobehaviour it is a state machine behavior so it’s a different type of behavior and it has different callbacks monobehaviour gets things like start an update state machine behavior doesn’t have those instead it has I believe among others but at the bare minimum these commented out callbacks that you see here with comments that describe what they do so on state enter is called when it should transition starts and the state machine starts to evaluate this state so in this case that’s actually what we’re going to do so when we get to this state we are going to load our next scene so I’m going to add using unity engine . seen management which is the new API for loading scenes which is now in its own namespace which it didn’t used to be before and then we’re going to say seen manager . lode scene 1 i’m going to do it by index right so that’s going to load this random sample scene which is it index one in our build settings which under are under file build settings so I’m loading by seen index ok that’s all we need save convert and so now once we’re done fading we’re going to go to the load state and this when we enter the load state this this function is going to be called so we just need to setup our in the main menu panel for the start button we just need to setup the on click event for that and that is going to be so before we were just we had a model behavior attached to the button and we’re just calling the load seen directly i’m going to remove that monobehaviour and dragging a reference to our fade to white object select its animator and choose set trigger and type in need and let’s also add a nice sound going to be load sound use menu load for the sound and I can click event for that dragon load sound and choose audio source play and now they are seen what’s going wrong oh this is a key a key error here teachable moment fade to white this image needs to be marked as not interactable and not blocking raycast in this case adding the canvas group they’re made it things like oh there’s a panel that should block the things behind it no we want to just be clear and to not block our clicks we try to click buttons and we go and so I’m going to click start and it didn’t load the scene what happened what happened whoops nope nope let’s see one load Oh what well that’s interesting where my bingo I mean okay right but ok don’t think that was my fault there we go alright so it works i don’t know what that was but if that happens you double-click make sure somehow your script and get nuked by bugs that have to file a report on yay bug reports what we’re going to do is we are going to repurpose this for our fade to black so I’m actually just going to duplicate the fade to white object and call it fade to black set the color to black and I’m going to duplicate the animator controller and call this fade to black and with the highlighted i’m going to change the load state so i’m going to remove load on enter at another behavior called wit on enter create an ad and i’m actually going to reuse from my Mike Witt on click script which was just a public quit function that just either exit play mode or quit the application that before I was triggering with the on click event now I’m just going to copy that and add it to my double click on quit on enter to open at going to add at the bottom Mike Witt function here and then call it the same way wit so now when we enter this state we’re going to quit going to call that quick function so label this quits and we can add a sound now we got a wire it up right so we’re gonna get rid of this quit on click monobehaviour and instead we’re going to call fade to black animator set trigger and fade it’s still going to be the parameter just fine and then no no we are going to add a quick sound with this slightly slightly inappropriate quitting sound this menu select and on the quick button we’re going to add an on-click event quit sound audio source shoe play and yeah let’s see if that works play nope oh i forgot to change the animator controller so it’s still using fade to white right so we are going to change the fate white controller to fade to black and here we go and acquits the last thing that will do just for for funsies is add an audio source with some lovely music which is going to plan awake and it’s going to loop and we’re going to set the volume down 2.5 and so now oh-oh-oh-oh-oh-oh-oh-oh-oh we should have an audio fade out right for the music but we don’t actually if you want to couple couple little other references before i finish if you want to cook these sliders and have nice audio transitions for the music an idea previous menu training called game jam menu template which is a very simple menu but has sliders for audio that that connect to the mixer and has a nice fade out for the music and stuff so you can grab that stuff there if you’re curious and that actually the finished product there is a package on the asset store that you can just grab and just grab the script and everything from although that one is more script driven and this is more like event and animator driven so kind of different but anyway you might want to grab that and yeah oh ok before we wrap i want to show so one of the issues that’s created by the way i did this is that the navigation the automatic navigation so for the panel or start for the kidney where is this is the navigation again I forget there’s a place to set this H the canvas to the button now you so / UI element in this case the navigation is automatic which right now is trying to go from start over to here which is not good right oh yes mr. rollro to suggest if you disable the interactable option on the canvas groups when the panel is closed it should fix your not a problem that’s a good idea if we can do that real quick let’s go to help button and let’s see if we can do that from the events I mean obviously we could write a script for it but let’s to an event and this will be helped panel can this group pool interactable is true and then let’s set it to false when it’s not on screen let’s see if that does it Oh whole wall o the mornin to do right so when I pull this up i need to set the other one to another one which is gonna be made menu panel canvas group interactable false try that oh yes it works ok so for those of you guys doing controller based navigation right make sure that you toggle the cameras groups to interactable on and off as you switch between panels Thank You mr. roti terrific good suggestion and mr. Rohde suggest you could do the enable/disable stuff in the animation that’s a great point to yeah that would be a good idea actually we could do it with the one we’re animating the Alpha on the canvas group so that’s a really good suggestion thanks all right somebody followed me on Twitter cool yeah twitter is a pretty good way to keep up with what I do I’m pretty active on there and I definitely tweet about these trainings before they start and stuff and any of the other tutorials and stuff we make obviously the unity Twitter send stuff out as well you at unity 3d I Matt Matt Maher fish Oh Oscars oh also could you explain how the finite state machine transitioned to the load state without any trigger know it had a trigger oh no didn’t have to go yesterday right ok so it transitions where my fade to white it goes from fade to load because we’re using has exit time that’s the condition the animation is finished playing the exit times the end of the animation which you can define here if you want to if you want to change it and it goes and in fact we really want to just like make it all the way over so just really finishes oh yeah okay yeah my understanding about has exit time is that it is when the when you’re allowed to start transitioning out of the state like I think it’s most important in stuff like walk cycles where you don’t want like the leg to be up in the air when you shift into a jump or something like that that you have to like wait for it to cycle back around before you start doing something else that’s that’s my that’s my understanding of it her blast is it possible using the animator for jumping between panels to return to the previous panel in the middle of the transition yeah you can because again talking about has exit time as long as you don’t use has exit time and you have a trigger set up and it’s not like a button that you need to click while it’s moving if it’s like the keyboard or something like that then yet if you flip if you hit it it should as long as has eggs at time is false and you get there you set the trigger it should be immediate Oscars are yet if i turn off has exit time it gives me a warning saying transition needs at least one condition or an exit time to view to be valid otherwise it will be ignored yeah so has exit time is kind of like your default transition condition getting 303 asks why was the text not aligned when you animated to the left it’s probably because let’s look at that I noticed that too and just kind of ignored it start all of the other ones are just going to be the setting for the start the text will see the text text is centered here these are centered to overflow overflow and those are both set to overflow is it the with oh yeah look it’s this it’s because the for some reason that position on that text got messed up if we 0 everything out and then maybe is that why is it left its weird it should be like that they should all be stretch here we go now why that one would be different but that should make it could work that’s just some bug from the way to the last time they go were just one of those being funny ok alright guys so I’m gonna jump off i’m going to cut my mic and cut the stream but i’ll keep the chat open if you guys think of any other questions and thanks for coming out great to see you all welcome to everybody knew and I always good to see the regulars popping up the chat so thanks again bye