Simple Animated Main Menu in Unity (Tutorial)

and this tutorial I will show you how to make a good-looking made mean you've seen like this one so the project consists of two scenes we have a game scene which is what you seen now and then empty main menu scene which is this one we want to switch from our main menu scene to the camp scene first right click on the hierarchy go to UI text mesh you can use normal text if you want but I'm going to use text much bro because it has more features if you decided to use text mesh bro go ahead and click abort TMP essentials now you can close this window I am going to reset the transform and rename it to play button and don't forget to change the canvas UI scaler mode to scale with screen size now I will change the text to play [Music] adjust the width height and the font size Center the text alignment and finally sit character spacing to 10 now I won't use my font but it won't show up here unless I create a new font asset and to do that go to a window text mesh Pro for the asset creator select the foot or drag and drop it like so keep everything as it is and click generate font atlas click Save and save it where you want now select the play button text and choose default now a duplicated two times by hitting ctrl + D on your keyboard I will rename them two options are credits buttons now I will separate them by changing the Y position and I will also do some changes to the front size color and more to make the puzzles look better in our scene [Music] [Music] [Music] now as you can see our buttons aren't buttons yet they are just text objects so let's add some functionality to them by creating a script first I will create a new folder called scripts and inside this folder I will create a really sharp script named scene switcher and I will open it up here you must type using Unity engine the team management to get access to the same manager class now inside our sim switcher class we will create a public void function called open scene with an argument that has an integer variable named index inside this version type scene manager dot plot sin and death and that's it for this script now let's say I go back to unity select the main camera and drag and drop the script into it select the play button and click add new component search for button and add it now under on click click the salad last night choose the main camera as the object and look for our fraction if you don't see it make sure the open scene function is public and you saved the script now open the build settings window by pressing control shift B on your keyboard or go to file build settings now since I have the main menu C opened I can easily click add open scene to add it to the same index as you may noticed there are numbers on the right of each seam we added these numbers are the index numbers and starts from 0 you can move scenes up and down to change their index number if you want now in this case the game secret exit number is 1 let's go back to the main menu see so let's play button and now we should type 1 here since it's the index number of our games in now let's just it it works but the scene looks really boring let's add some animations to do that I will make a new folder called animations inside this folder I will create a new animator controller rename it to buttons now select all the buttons and drag and drop the animator controller into the inspector now all of them have the same controller so we only need to work on one button and the animation will be applied to the rest now go to window animation and hit animation now with this window we will animate our buttons choose any button you want and the grace buzzer will appear in the animation window click create and name it to scale up I call that size up to tracker first let me do some changes to the play button so all of them will have the same font size because that's what's we are going to animate the font size now click here then click record go to the inspector and scale the font size up you can stop recording now create a new clip like so and this time name it scale down this clip will animate the buttons back to their normal size click here and before recording make sure that your font size is set to the scaled up size in our case is 30 now hit record and scare the phone down back to its 25 stop recording and preview it now as I said earlier all the buttons will have the same animation automatically because all of them are sharing the same animator controller now go to your animations folder and make sure to uncheck the low box from both of the clips we click play you will see that they are still not animated and that's because we need to tell the animator controller going to scale up or down I forgot to set the light button size back to 25 when I finished the scaled down animation so I will exit play mode and fix it now go to window animation animator and this one do will show up I will organize the window [Music] right-click on the blank space and then create an empty States rename it to normal select it and right click on it and make it the default layer' state select it again and right click to make a transition then drag it to size up same thing from size up to say it's down and from size down to normal now select the play button and choose the button transition to animation do the same thing to the other buttons too now as you can see our buttons have different triggers by default we are only going to use normal and highlighted triggers on the animator window go to the parameters tab and click the plus sign then select trigger let me to highlighted with a capital H as written near add another trigger I name it to normal with a capital M as written here also now select the transition line between the normal and size up and disable translate the time and fixed duration and set transition duration to zero add a condition and select highlighted now select the transition line between the size up and size down clips and do the same things except this time the condition will be normal [Music] then select the last transition line Kip has exit time and fixed duration checked and set the transition duration to 0 for instant transition now the buttons will be always none unless we hover over them the highlighted parameter will be triggered which will make the transition from normal to set up animation and if we remove the cursor from the buttons the normal parameter will be trigger and play the size down animation and from size down directly to normal because we have exit time checked in a duration of 0 seconds now let's try it out as you can see we successfully animated our buttons but we are missing something we need sound effects I already imported an audio clip here and I want to play this sound whenever we hover over a button and to do that it's very easy first create a new empty game object name it to audio and reset the transform now let's make a simple c-sharp script I will call it destroy and it will simply remove the audio from the scene when it's finished playing creates a start function and inside type destroy game object karma three and that means any game object that has this script will be destroyed after 3 seconds save and go back to a unity select audio and drag and drop the destroy script enter the inspector now add a new component called audio source make sure the play on awake is checked I will reduce the volume a little bit because it's too high by default and in the audio clip I will select my sound effects audio you can also drag and drop it now take the audio object and Robert and the file window now go ahead and delete it from the scene now let's make another simple script called play audio create a new public gameobject and a public void function called drop audio inside type instantiate audio object comma transform that position common transform dot rotation save it and go back to unity select the main camera and drag and drop the scripts and the inspector nurtures the audio to be the audio objects select all the buttons add a new component called events trigger now to make changes to the component we have to do with one by one select the play button and then under event trigger component click add new event type and selects pointer enter click the plus sign and choose the main camera and the function will be drop audio now what this will do is whenever we hover over a button it will instantiate an audio object to the scene and the audio object will play the sound effects and will be removed from the song after 30 seconds now I will do the same thing to the other buttons to let's test it out much better of course you can make a better transition between scenes but it's not going to be in this video now quickly I will make a credit scene to make the credits button functional

Channel: Hyped Cloud

Views: 17,011

Keywords: Unity, main menu, title screen, c#, start menu, unity engine, animated, sound effects, tutorial, easy

Id: jh3zD-wGBnw

Length: 20min 49sec (1249 seconds)

Published: Sun Jul 12 2020