Make Your MAIN MENU Quickly! | Unity UI Tutorial For Beginners

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hi dear friends. Welcome back to Rehope Games. In this Unity Tutorial we’re  gonna make a Main Menu. when we press the play button, the level 1 scene will be loaded. when we press the Options button, the options panel will be open. And when we press the quit button,   the game will be shut down. Okay let's get started. We have three different scenes: level 1 level 2 and level 3. Start the game in this case.  As you can see, the next level is loaded when the player reaches the finish point. Let's make a main menu. First I'm going to create a new scene. Right click on the project panel. Click on create and select scene. I'm gonna call it Main Menu. Open the scene. As you can see, the scene is empty, there is only the main camera. I'm going to add the scene to the build panel. Drag and drop the main menu onto the panel. Make sure to add all your scenes here so you can switch between scenes. To load a scene you can use its name or build index. Close the panel. First I'm going to create a play button. To create a button right click on the hierarchy panel go to UI and then select button. As you can see a button appeared on the scene. I want to call the button as play. As you can see when I add a button to the scene Canvas and Event System are added automatically. First I want to make some  adjustments to the canvas.  Canvas is a very important subject and I will share detailed videos about canvas in the future. If you want to prepare a beautiful User Interface, you must master the use of canvas. This is the game area and this is the canvas area. I will change the UI scale mode of  canvas as scale with screen size.  And Set the reference resolution. And I will set the match value to 0.5. The settings we need to do for  the canvas That's it for now.  Select the play button. I will change the scale of the button. As you can see the button has a text object. And you can change the text as you want. You can do detailed adjustments to the text. You can set the position of the button from here. Start the game. As you can see when I click the play button nothing changed. I want to load the level 1 scene when I click the play button. so I'm going to create a new script. you can add the new script to any  object in the hierarchy panel.  I’ll add it to the main camera.  Open the script. First I'm going to add Scene management library. I will create a new method  named play game as public.  I want level 1 to load when this function runs.  SceneManager.LoadSceneAsync() you can write here scene name or scene build index. Save the script and go back to Unity. the script is here. Select the play button. You can add an Event to the button from here. so we will set the function  of the button from here.  Click on the plus button. then i will drag and drop the object containing the Main Menu script here. And click on here , find the Main Menu script and select PlayGame function. that’s it. Now when ı press the play button the Play Game function will work. Let's test it. Start the game. I've pressed the play button  and the level 1 scene loaded.  Nice ! The play button works properly. I want the buttons to look more elegant.  So I created my own custom  buttons in Adobe Illustrator.  And I exported them to a folder named UI. Then I added this folder to Asset panel in unity. I'm going to drag and drop the UI folder to the Sprites folder. I'll delete the text object of the play button. I will drag and drop the play image to Source image of the button. I will resize the button according  to the size ratios of the image.  Let’s test it.  Ok! The Play button is ready. Let's create the other buttons. Duplicate the play button. I will rename it as options. I'll move the play button up a little. I will delete the event because it is an event that belongs to the play button. Drag and drop the options image to the source image. then duplicate the options button and rename it as quit. I'll move the quit button down a little.  And of course I'm going to change  the Source image of the button.  I want to create a background. So right click on the canvas UI and choose panel option. Rename it as background. And i will move the background panel to the back. Change the alpha value of the panel. And drag and drop the background image to the source image of the panel. Alright ! The background is ready. On a canvas the topmost object appears at the very back.  As you can see, the Quit button and the Options button have no function. Only the play button works. Let's make the options panel. I want to tidy up the canvas. And then I want to create an options panel. I will create an empty object named options panel. Then I will add a panel to  the options panel object.  Set the Rect Transform of the panel.  Then drag and drop the options  panel to the source image.  Increase the alpha value of the panel.  And I will resize the panel  according to the options panel image.  I'm going to add the cancel  button to the options panel.  Delete the text object. And rename it the button as cancel. Drag and drop the cancel image to the source image of the button. And of course resize the button. I'll set the position of the cancel button. I will activate this panel  with the options button.  If I move the options panel up, it will appear behind the buttons. I will keep the options panel  inactive when the game starts. When I press the options button I will activate the options panel. So I'm going to add an event  function to the options button.  Drag and drop the options panel here. Click on here, go to the game object and select SetActive. And click the checkbox. Now when we press the options button the options panel will be active. Let's test it. Start the game. As you can see, when I press the options button, the options panel opens. But when the options panel opens, I want the main menu to be inactive. So I'm going to add a new event  function to the options button.  Click the plus button to add a new event function. And then drag and drop the main menu object here. Choose set active feature of  the object as event function.  uncheck the checkbox. Let's test it. Start the game. Nice! the options button works properly. Let's add event functions to the cancel button. Alright, the options button is ready. Let's set the function of the Quit button. Open the main menu script again. And I will create a function  named quit game as public.  You can shut down the game with application.quit command. Save the script and go back to Unity.  Click the plus button and drag and  drop the main camera object here.  And then select the QuitGame  function that we've created.. The Application.Quit call  is ignored in the Editor.  So I'm going to build the  game quickly and test it.  Open the game. As you can see, when I press the quit button, the game shuts down. In the next video I'm going to make a level map. I hope the video is useful for you. Thanks for watching and see you in the next Unity Tutorial.
Info
Channel: Rehope Games
Views: 74,687
Rating: undefined out of 5
Keywords: Unity Main menu design, unity main menu tutorial, Rehope games
Id: DX7HyN7oJjE
Channel Id: undefined
Length: 10min 32sec (632 seconds)
Published: Mon May 08 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.