Level Selection Menu with Stars & Level Unlocking | Unity Beginner Tutorial

hello everyone I am the unity dude and in this tutorial I will show you how to create a simple level select menu for your unity game the end result will be as shown in this video we will first create a simple menu with buttons to start our levels we will then add the logic to lock and unlock levels finally we will implement the logic to add stars to our level selection menu the UI asset I will be using in this tutorial is cartoon game UI pack the asset comes with a complete collection of all the UI elements required for creating a beautiful menu it includes beautiful animations and sound effects for all the UI elements the link for cartoon game UI pack is available in the description of the video so let's get started with the tutorial I have a scene with the main menu which we created in the previous tutorial a main menu Isn't required for this tutorial however it will help us better understand the flow of our menus to start off create an empty object inside your UI canvas I will name this the level select menu set the alignment of this object to stretch across the whole screen next add an image inside this object for the background of our level select menu assign a Sprite for this background image and then set its alignment to stretch across the whole screen insert the level select menu create another image for the pop-up which will hold all the levels change the source image for this pop-up and then adjust the size and Alignment as needed next let's add a button to close the level select menu I will change the image of the button and then place a back arrow on top of it and let's reposition the button to the top left of the screen next let's add a label for the level selection menu for this create a new image as the background of the label position it at the top of the screen and inside this image create a text for the label perfect the basic structure for the level selection menu is now ready let's add a new script to the level selection menu object I will call this the level selection menu manager double click on the script to open it up and here let's add the code for when the user presses the back button create a new function for back button click and inside the function we are simply going to disable the current game object inside Unity select the back button in the button on click component attach the object with the script and now select the function we just created on the main menu object I have a script called main menu manager and inside this script I have a similar function for when the play button is clicked inside this function I'm simply going to enable the level selection menu and now if we play the project we can enable and disable the level selection menu using our buttons next we are going to add the level selection buttons to our menu for this first create a scroll view inside your pop-up delete the scroll bars of the scroll View and resize it to fit inside the pop-up change the color of the scroll view Source image to transparent and now inside the scroll view navigate to viewport and then select the content object on the content object add a grid layout group and now inside the content object create a new button we will call this button level 1. change the source image of the button to match your menu graphics next let's change the size of the button to do this select the content object inside the scroll View and in the grid layout component adjust the cell size you can also adjust the padding of your content panel to add some spacing on the borders next let's add a label inside the button to display the level number adjust the position and the size of the font as required and the last thing we need for the level button layout are star images for this create a new image inside the level button and assign a gray Star as the source image adjust the size and the position of the star and now we can duplicate the Star by pressing Ctrl d adjust these three gray Stars inside the level button as required perfect later in this tutorial we will change the Sprites of the stars from Gray to Golden depending on how many stars the user earned for this specific level now let's create duplicates of the level selection button to see how our level selection menu looks and as we can see we need some spacing between our levels select the content panel of the scroll View and inside the grid layout group we created earlier increase the spacing as required also on the viewport object you can add a rectangle Mass 2D to soften the edges of the viewport adjust the softness and the padding of the rectangle mask to make the borders of the viewport smoothly Fade Out and this is our level selection menu will look since we only want vertical scrolling let's quickly disable horizontal scrolling on the scroll view object and perfect a level selection menu now looks exactly as we want it to and now since we will only be working on one level select button delete all the duplicates let's start adding code for when we click on this button open up the level selection menu manager script we created earlier start by importing the unity scene management Library and now create a function for when we click on the level button the function is going to take an integer as a parameter for the selected level number we want to load the game scene so let's call the function for that as a parameter of the function we will pass the exact name of the game scene also make sure that the game scene is added in the build settings you can remove scenes from the build settings by clicking delete and you can add new scenes by simply dragging them in the build settings now that we have our scenes in the build settings we can add the name of the scene to our code the next thing we need to do is pass the selected level number to the game scene to pass values between scenes we can simply create a new static variable for the level number and now before loading the game scene we can set the value of the current level back to Unity assign the function for selecting levels to the level select button you can do this by selecting the level button and then in the on click method drag the object with the script attached to it and now from the functions drop down select the level selection function and as we can see the parameter we created for level number automatically appears here you can set the value of this parameter to the level number this button will select for the first level the value is going to be 0. let's duplicate this button for selecting more levels change the text inside the buttons to the level number we want them to select similarly change the level number in the on click method of all the buttons and now let's run the project and as we can see when we click on the level button our game scene opens up as of now we don't have any logic in the game scene to run the currently selected level so let's add a few simple levels to the game scene and some logic to select a level in our km scene let's delete the rotating Cube and add an empty game object which will hold all the levels inside the level holder create another empty game object for the first level normally inside this level object you will have all of your enemies your environment and other such level objects but for this tutorial I am just going to add a text just playing the level number I'm going to use text mesh Pro to display this text and let's also add some Physics to make the text rotate and this is how level 1 is going to look let's duplicate this and create a few more levels change the text for each level so that it displays the current level number and there we go we now have five levels in our game scene all the levels are going to be disabled on game start and then from our code we will enable the currently selected level for this let's create a new script on the level holder I will call this the level manager open up the new script and here create a reference variable for a list of all the level game objects in our game scene and when the game starts we will simply enable the game object for the current level we can get the current level number from the static variable we created and set in our level selection menu manager back to Unity inside the game scene assign the reference of all the levels to the level manager script we created on the level holder game object back to the menu scene let's run the project perfect we can now select the level number from the level selection buttons next let's implement the logic for locking and unlocking levels to lock a level button all we need to do is uncheck the interactable checkbox on the button component of the current level button and instead of color tint we are going to use Sprite swap here you can assign the Sprites for the different button States for the highlighted and selected State I am going to use the same green Sprite for the Press State I am going to use an orange Sprite and for the disabled state which is when our level is locked I am going to use a gray Sprite and now as we can see when we uncheck the intractable checkbox or level button becomes gray and we can no longer click on it now let's implement the logic for making our level button interactable delete all the level buttons except the first one and then uncheck the intractable checkbox so that all the levels are locked by default and then from our script we are going to decide which level we want to unlock let's create a new script on the level button which will hold references for all the values inside this level button we can add these reference variables directly to the level selection menu manager however this way it is easier to manage I will call the script level object insert the level object script delete all the functions and import the unity UI Library next create the required reference variables we will need a reference for the button component and the reference for the star images of this level back to Unity assign the reference of the level button and the stars to the script the script will be attached to all the level buttons and will allow us to access the required elements inside that button go to the level selection menu manager script and here create a reference variable for a list of the level object scripts which will allow us to access all the level buttons in our menu next we need an integer to keep track of all the unlock levels in our game we will make this integer a static variable so that we can access it from anywhere in our game and in the start function we will get the saved value of unlock levels from the player preferences the default value of unlock levels is going to be 0. now that we know the number of unlock levels we can use a for Loop to set the buttons of unlock levels as intractable we can get a reference of the level button from the level object script we created earlier and after that we can set the interactable checkbox to true duplicate the level buttons to add more levels to the menu change the text inside the buttons and the level number on the on click component of the buttons and now pass the reference of the level object scripts of the level buttons to the level selection menu manager the next thing we need is the code for completing the current level and unlocking the next level for this go to your game scene and create a new button clicking on which will complete the current level add a new script on the canvas for the code of this complete button I will call this the level complete script insert the script create a function for when the level complete button is pressed inside the function we will check if the current level is equal to the last unlocked level if it is the last unlock level we will increment the value of unlocked levels and then save it to the player preferences and once we are done with the level complete logic we will take the user back to the menu scene back to Unity assign the newly created function to the onclick component of the level complete button and now let's run the project to test our logic so far as we can see by default only the first level is unlocked and when we complete the first level the second level is unlocked completing the second level unlocks the third level the level unlock logic is working perfectly next let's implement the logic for showing stars on the levels in the game scene we will now need 4 buttons instead of one a button for zero Stars a button for one star a button for two stars and a button for three stars the level complete function we just created will now take an integer parameter for the number of stars the user acquired back to Unity modify the level complete buttons by passing the number of stars in the on click component next let's load and display the stars in the level selection menu for this open up the level selection menu manager and here right after we unlock the level we are going to load the number of stars for this level the default number of stars for the current level are going to be zero and here I is the level number for which we are currently loading data once we know the number of stars for the current level we are going to change that many stars on the level button to the golden star image at the top create a reference for the golden star Sprite go back to Unity and assign the reference Sprite for the golden star to the level selection menu manager and now if we run the game all the levels have the default value of the golden stars this is because we are currently not saving any value for the number of stars the user has acquired to save the number of stars acquired simply go back to the level complete script and here save the stars for the current level to the player preferences since we only want to save the number of stars if they are larger than the previously acquired Stars we need an F condition before saving the number of stars and our logic is now complete we can run the game to test everything out and there we go our level selection menu is now working perfectly let's quickly add more levels to test our logic change the level numbers in all of the levels and assign the reference of the newly created levels to the level manager script in the menu scene duplicate the level button change the text of all the level buttons as well as the level number in the on click component and we are all done we now have a professional looking level selection menu in our game along with logic to unlock levels and display Stars that's it for how to add a level selection menu to your unity game if you found this video helpful make sure to like And subscribe

Channel: The Unity Dude

Views: 3,410

Keywords: unity, unity ui, unity menu, unity menus, unity level menu, unity beginner tutorial, unity level selection menu beginner, options menui, level menu, unity level menu beginner, unity level selection menu, level selection menu, level selection menu unity, unity unlock level, unity lock level, unity lock levels, unity unlock levels, unity level stars, unity level system, unity 3d, main menu unity, unity level manager, unity level select

Id: kHSY-pVkiek

Length: 18min 39sec (1119 seconds)

Published: Mon Sep 18 2023