MAIN MENU in Unity - Unity UI tutorial

this is a simple main menu i've created an unity ui system in just a few minutes let's jump to unt and create it before we start be sure to design your menu layout first for example this is my sketch project with finished my new design by doing so i know how everything will look and the process of creating that in unity will be much quicker as you might have seen my previous tutorials here is a simple game called jumping john which has one scene called game let's start by creating a new scene that will be our main menu and call it you guessed it main menu open it here we'll create a new canvas just right click on the hierarchy ui canvas let's double click it to center it on the screen and then also add our background image the same way i'll resize that image to fill the entire screen to do that click on the anchor presets and while holding alt or option key select this double stretch option that way no matter what size of the game window is the background will stretch to fill the entire screen if you like to know more about anchors and how to resize your ui make sure to check out my other video finally let's set our background image and give game object title like background great now time for the logo and its background create a new image then resize it to fill the entire width of the screen and change its anchors to the top stretch we won't be using any sprite here just change the color to black and give it some transparency in my case 180. as always also name it in this case logo background after that create another image that will be our logo itself make sure to create it as a parent of our newly created logo background and give it a sprite with our logo text to make sure it's sized correctly select set native size and if needed move it to the correct position let's call our game object the logo and finally time to move to the most important part buttons as you may have seen before our main menu will only have three buttons start the game settings and exit let's create a new button for each menu item right click in the hierarchy ui and select button it's too small so i'll change its size to 550 by 120 time to format the text inside of it i'll give it 65 font size roboto font and set the text itself to start as you can see based on our mockup the only thing we are missing is the slick rounded corners in fact i've already prepared the image that will replace that generic sprite it's called white rounded rectangle but after i change it you can see that something is off and our rounded rectangle is squished that's because i haven't scaled it correctly look here for the example are the k game assets that contain different ui elements notice that big boxes that have a square shape and will not fit most of the ui systems but when you check the example of the same graphics assets you'll see that kenai made them bigger without stretching them to achieve that we need to set in unity a border that will tell which parts can be stretched and which one should be left untouched like the rounded corners that way you'll be able to resize that shape to anything you like let's jump back to unity and check how it should be done find your texture in the project tab and in the inspector click sprite editor button here you can find these small green lines around the image to make them a little bit more visible on the video i've changed their color there are the same thing i told you just a second before the only thing we need to do is to resize them that way that both in the center and on the edges are elements that can be safely stretched you can even type that number and in my case i know it will be 52 from all of the sides okay so when that is ready click apply close the window go back to our button image and change its type from simple to sliced great now we have a perfect rendered cornice to finish things up let's add a little animation to our button instead of color tint transition we'll be using animation type just click auto generate animation select the location for it i suggest animations folder and click save unity will prepare everything for us when we open the animation tab you will find there 5 different states like normal highlighted or selected by changing anything in any of that state we can create a simple transitions i'll show you how it works when we go back to our mockup you can see that when i hover mouse over button a white box around it appears and text becomes black but when the button is untouched the white box disappears and the text becomes white let's do the same in unity in animation make sure that we're editing normal state click the record button and make all the changes that should be visible when the button is not highlighted in my case i'll set the transparency of an image to 0 and the color of the text to white that's it for normal now switch to highlighted click record and do the opposite change image transparency to full and text color to black after that we can check if our animation is working just press play in unity and then highlight the button it looks great already but in my opinion the animation should be just a little bit faster to do that open the animator tab and for each transition arrow change its transition duration in my case i think point one should do the trick much better now when the button design is finished let's duplicate it two times and move to the correct positions change its text to settings quit and finally to tie everything up name our buttons in hierarchy start settings and exit great i will now add a small black rounded box around our buttons to do that as always right click in here here ui and image we'll use the same white rounded rectangle image and give it black color with 70 percent of transparency now let's make sure it's sized correctly name it buttons background and move up in hierarchy to place it below our buttons also to keep everything tidy let's set all of our buttons as the children of that object great and now the last ui component we are missing is the settings menu as you can see our mockup does not have any settings controls because i don't want to focus on them today so in unity we can simply duplicate buttons background and this time call it the settings background here i'll only leave the last button and i'll change its text to back also to make it a bit smaller we can simply change its size to something like 0.7 in both x and y also to make it more obvious what screen we're at let's add a simple text element so right click in the hierarchy ui and select text once again i'll change its font to roboto font size to 65 color to white and of course the text itself to settings let's resize it and give our game object a nice title like settings header great so now it's time to change some of the behaviors of our main menu to do this first we need to disable our settings background object you can do that by simply clicking that little checkbox next to the object name now find the settings button and add two on-click events to first event we need to link settings background by simply dragging it in from the scene hierarchy then from this drop down select game object set active and mark it as true then repeat the same step for buttons background but this time game object set active and set it as false now let's quickly switch to the settings background find our back button also add two on click events and drag in buttons background and settings background and also set them to corresponding set active options great now i'll only reset our background visibility and let's test everything up as you can see our simple navigation is working as intended but we have still one more job to do let's make exit and start game buttons work to do that i'll click on the canvas and create a new script called main menu open it let's create a new method type public void exit button and open brackets to close our game we can simply call application dot quit because in the editor we won't be able to see it let's also add debug.log and type a simple message like game closed next let's add another method so once again public void start game open brackets and here we like to change the game scene before we can do that at the very top of our document add using unity engine dot scene management now go back to our method and type scene manager that load scene and specify the name of our scene in my case it will be just game great now let's save it go back to unity and assign both start and exit buttons to the correct methods to do that just select the start button add on click event link it to canvas a game object that has our newly created script and finally select from the list main menu start game do everything the same for the exit button but this time select exit game okay i think it's time to test everything up press play and click on this exit button as you can see here in the console below we can see our message and in case of the actual game our application will be closed now let's test out the start game button click on it and we have a problem why into haven't switched the screen that's because we need to add it to scenes in build just press file build options and from the project tab drag both menu scene and game scene remember that the first scene in that list will be loaded on the game start so make sure it's our main menu scene okay now let's test again close that window press play and click on the start game button and it works now i can play my jumping jump game be sure to check out my other unity ui tutorials and to subscribe to my channel if you like to see more videos like this see you in the next video

Channel: Coco Code

Views: 40,003

Keywords: How to create main menu in Unity, main menu in Unity, Unity UI, main menu, tutorial, Buttons in Unity, gui, unity gui, Maciej maj, Unity main menu, Buttons tiling, Buttons border, Advanced Unity UI, bionicl code, unity gui tutorial, How to create menu in Unity, cococode, unity, Unity UI settings, Unity UI buttons, unity3d, bionicl, guide, Unity UI canvas, canvas

Id: RsgiYqLID-U

Length: 14min 58sec (898 seconds)

Published: Sun Oct 18 2020