Unity UI Pause Menu Tutorial | Nova

in this video we'll be creating the simple pause menu which has some basic functionality including interactable buttons a music toggle which also has a genre selection and a volume slider we won't be writing any code for this because we'll be using some of the ui controls that come included with nova nova comes with several styles out of the box but for this video we'll be using this modern style so let's jump into unity and get started the first thing i'll do is i'll add a ui block 2d as the root for the pause menu i'll set the color to be a bright blue kind of color somewhere around there and then i'll add the screen space component so that it renders in screen space so this will be the backing panel of our menu now i'll add a text block which i'll call label i'll have this say game paused i'll switch the font over to the new neato font and i'll set the font size to 720. i'll have the text block shrink on both axes so that it resizes with the size of the text i'll set the font color to black and then i'll top align it with a bit of offset and now let's add a ui block 2d which i'll call nav card the style that i'm going for with this menu is this modern kind of design style and i want to have a card like this with this 3d effect where it looks like it's popping out of the menu the way we can achieve that is by having a dark drop shadow on one side and a light drop shadow on the other so let's replicate that first i'll increase the size of this nav card ui block to 500 by 500 and i'll round the corners and then i'll enable this outer shadow here i'll set the blur to 16 and the offset to positive 16 on x and negative 16 on y i'll also make it a bit more transparent so it's not quite so dark but now if we set the body color to be the same as the backing panel color you can see we have this nice rounded drop shadow effect to get the light drop shadow i'll just duplicate this nav card ui block and make it a child i'll rename it to controls since this is where we'll put our controls and buttons and things later i'll set the drop shadow to be white and then i'll invert the offset so it'll be negative 16 on x and positive 16 on y and now we have those two shadows the other thing i'll do is i'll have the nav card shrink on both axis so that it matches the size of the ui controls ui block and that way if we resize it on either axis both of the shadows adjust properly so now let's add a button i'll use one of the modern style buttons included with nova i'll set the size to be something like 300 by 100 and now what i can do is actually if i duplicate this a few times i can enable the auto layout on the controls ui block i'll add some spacing here 48 and then i'll have this shrink on both axes as well so that it matches the size although i'll add some padding here now if we decide to add another button or modify the spacing both of the shadows adjust properly so now let's go ahead and adjust the labels on these buttons i want this top button to be the resume button i want the middle button to be the settings button and then i want this bottom button to be the exit button i also want the settings button to be gray so let's go ahead and pick a gray color here something like that and then i'll just pick a lighter gray for the gradient and for the shadows so i'll copy this i'll use this for the inner shadow as well as the drop shadow and then because this button handles the different gesture states like hovered and pressed we need to make sure to apply these colors to the item visuals so i'll use the body color for the default color the shadow color for the press color and for the hovered color i'll just split the difference so it gets brighter as you hover and then press it and i'll do something very similar for the exit button except i want this color to be red somewhere around there and then for the gradient and the shadows i'll just pick a slightly brighter red something like that so apply this here and to the drop shadow and finally i'll make sure to apply these colors to the item visuals so the body color will be the default color the shadow color will be the pressed color and the hovered color will just split the difference so this is a good testing point let's make sure that we got these colors correct the one thing we'll need to do before we can test out these gestures is we need to add an input manager to our scene this is included with the ui controls with nova so let's go ahead and add that and play and now if we hover our buttons they properly change color and we can press each of them that looks good so now let's add some controls to the bottom of our menu so first i'll add a ui block here which i'll call footer i'll bottom align this and then i'll expand the width and i'll add some margin just to give it some spacing and then finally i'll shrink on the y-axis so that it resizes with the ui controls that we're about to add i'll duplicate this nav card ui block and then i'll make it a child of the footer i'll rename this to music since this will be our music selection i'll go down here and i'll delete these buttons that we added and now let's get the positioning correct i'll zero out the y position and then i'll left align it and now let's add a toggle here this will be our music toggle let's adjust the padding on the controls ui block i'll make the top and bottom padding be 16 and now let's adjust the label here we'll make this say music and what i want to happen is whenever this music toggle is clicked i want to enable and disable a genre selection so let's go ahead and add a drop down let's adjust the auto layout here to be on the x-axis and now let's go down here and on the toggled event we'll add this drop down and we'll call game object set active with the toggled state and now let's add some options for music genres i'll have rock hip hop pop and techno and i'll start this drop down as disabled so now let's go ahead and add our volume slider so i'll duplicate this music selection and i'll add i'll rename this to volume i'll right align this and let's get rid of these controls here and replace them with a slider i also want the slider to have a label so let's go ahead and add a text block here i'll have this say volume i'll change the font to the nunito font and i'll make the font color be black and then i'll increase the font size to something like 380. i'll shrink on both axes so that it resizes i want this label to be on the left side of the slider so let's go ahead and move this over here and there we go let's test this out make sure these work so the volume slider we can click and drag if we enable the music we can select our genre the drop down goes down which is not what we want since it's at the bottom of the menu so let's go ahead if we go to the drop down visuals we can see that there's this expand down option if we click that now it'll expand up and we can change our genre so let's go ahead and make sure to apply that expand down change the last thing we'll do because this menu has a pretty simple design let's add an animating background just to make things more interesting so the first thing i'll do is i'll add a ui block 2d under the pause menu i'll call this dots i'll expand so that it fills the entire menu i'll move this up so that it renders underneath all the rest of our content i'll add the dots texture here and let's change the color i'll make it be white but i'll make it be pretty transparent so it's not quite as overwhelming and now i'll set the scale mode here to envelop so that it fills the entire ui block the way i'm going to animate this is with unity's animation system so i'll bring up the animation window let's go ahead and create an animation and what we can do is just adjust the center uv property of the image so i'll add a property here i'll go to the ui block in the visuals image adjustment center uv let's add that in and for this keyframe we'll start it off at negative one and i want this to be a fairly slow animation so i'll zoom out here to let's say 40 seconds and i'll have this keyframe be now i can delete this keyframe that unity adds automatically and the last thing i need to do is i want this to be a constant time animation so let's go to the curve sheet and we'll just set both tangents to be linear let's go ahead and test this out and now we have this nice slow animating background which just make things a bit more interesting and that brings us to the end of the video hopefully this helps you get started with using nova

Channel: Nova

Views: 4,418

Keywords: Unity UI, Unity User Interface, Unity Tutorial, unity3d, unity menu, unity ui tutorial, game development, game menu tutorial, how to build unity ui, GUI, Unity GUI, Unity learn, asset, menu, ui, user interface, ui framework, unity ui toolkit, unity2d, unity listview, unity list ui, pause menu, start menu, unity pause menu, unity start menu, unity modern ui, unity dropdown, unity slider, unity toggle, unity button, design, neumorphism, neumorphic design

Id: 2oVl8ylXFrA

Length: 7min 42sec (462 seconds)

Published: Mon Sep 19 2022