Create LEVEL MENU in Unity: UI Design & Level Locking/Unlocking System!

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hi everyone. 🖐 Welcome back to Rehope Games. In this Unity Tutorial, I'll be showing you how to create an amazing Level System with Unity! Step by step, we'll start by designing a level interface, followed by writing the code to connect level buttons to their respective scenes. Plus, we'll be implementing a level lock system to ramp up the excitement for players! Alright, let's get started. Let's take a look at the project first. We have 4 different scenes: level 1, level 2, level 3 and we have the main menu scene. I've added all the scenes  to the build settings panel.  To load a scene you can use  its name or build index.  Close the build settings panel. Let's run the game in this state. When I press the play button, the Level 1 scene loads. But when I press the Play button, I want the levels panel to open. And I want to choose the level I want.  If you want to learn how to quickly create this main menu, you can check out the previous video. Let's create a level selection panel. I have designed a background and level buttons for the levels panel in Adobe Illustrator. I later incorporated these visuals I created into my project. Right-click on the Canvas object and then create a new empty object named "Levels Panel." Right-click on the levels panel and then create an image named background. And I will drag and drop the levels panel image to the source image of the background. I will resize the background   object to fit the image properly. Right-click on the Levels panel and create an empty object named level buttons . I will add level buttons under this object. right-click on the level  buttons and create a button.  I will change its name to level 1. Delete the text object. Drag and drop the image to the source image of the button. And of course I will resize the button . I will duplicate the level 1 button with CTRL + D shortcut. And rename its. Aligning the buttons manually can take some time. There is a faster and easier way to do this.  Select level buttons and add  grid layout group component .  First, I will define the grid layout area. then set the cell size. Let's assign images of the buttons. The levels panel is ready . I want the levels panel to be closed by default and only open when I press the play button. Therefore, I will add an Event to the Play button. select the play button. remove the old event and add a new event. Drag and drop the levels panel here .  I am choosing the SetActive feature as the event function. I'm leaving the checkbox marked so that when I press the play button, the levels panel will be activated. Let's test it . Start the game. As you can see, when I pressed the Play button, the levels panel opened up. However, pressing the buttons doesn't make any changes. Let's now assign functions to the buttons. Select the levels panel object and click on the add component. I will add a new script to the levels panel named level menu. Open the script. First I will add scene management Library. Then I will create a new function named open level. As you know, we can call a scene either by its name or by its index number. I'm going to use scene name. I will only send the ID of  the level as a parameter.  And after that, I will use the level ID with code to create the full name of the scene. I will load the scene with the created name. I'm gonna connect this function to the level buttons. Save the script and go back to unity. Select all level buttons . Then add an event function. Drag and drop the levels Panel here .   And then select OpenLevel Function. I will write the level IDs of the buttons here. Start the game and test it . select level 1. the level 1 scene loaded. Restart the game. Select Level 3 . the Level 3 scene loaded. Restart the game. If I choose Level 5, I get an error message. Because I don't have a scene called level 5. As you can see in this state, all levels are accessible and players have the option to start from Level 2 without needing to complete Level 1 first. Let's see how we can easily create a system for locking and unlocking game levels. Open the LevelMenu script again. First, I'll add the UI library to the script. Next, I will create an array called 'buttons' to hold the level buttons. I!m gonna store the number of completed levels using the PlayerPrefs method. I'm setting the default value to 1 because I want the first level to be open when the game is first launched. I will use a for loop to disable the interactable property of all buttons. I will create another for loop. I will re-enable the interactable property of buttons equal to the number of unlocked levels. save the script and go back to unity. I am setting the size of the button array to 6 because we have 6 buttons. and I'm dragging and dropping the buttons here in order. In a moment, I will demonstrate how to automate this task using code. Start the game. As you can see, all buttons except level 1 are off and unclickable; only level 1 is clickable. Let's play the game. I’m gonna finish level 1 and level 2 . I want the next level to be  unlocked when we complete a level.  Restart the game. As you can see, even though we completed level 1 and 2, level 2 and 3 are still locked. Open level 1 Scene.  I will unlock the next level when the character reaches the Finish point. Open the Finish Point script. I'm going to create a new function called UnlockNewLevel. I need to add SceneManagement library. The player should not unlock a new level each time they reach the flag. Instead, they should only unlock the next level when they reach the finish point of the highest level reached so far. So, I will add a condition for this. When the player reaches the finish point of the highest level, I will increase the ReachedIndex value by 1 and also increment the UnlockedLevel value by 1 from its previous value. I will run this function as soon  as the player touches the flag.  ok! save and go back to unity. Start the game. As you can see, only the level 1 is unlocked. Let's complete level 1 and restart the game. As you can see, the level 2 is now unlocked. When we complete level 2, the level 3 will be unlocked. As you can see, the level 3 has been unlocked. Alright! The level locking  and unlocking system is ready.  Now, as I promised you earlier, I will show you how to automatically add buttons to the buttons array. Open the LevelMenu script. First, I will create a game object variable called levelButtons. Then, I will create a new  function called ButtonsToArray.  I'm setting the size of the buttons array equal to the number of child objects of the levelButtons object. And, using a for loop, I assign the button component of the levelButtons object's children to the buttons array in order. I will run the ButtonsToArray function first inside the Awake function. That's it. Go back to unity. I will delete the buttons inside the array, and then drag and drop the Level Buttons object here. Start the game. As you can see, the buttons were automatically added to the array. If there is a change in the number of buttons, the system will automatically adjust the array size and add the buttons accordingly. Alright! in this video we learned how to design a Level Menu and create a level lock system. I hope the video has been helpful for you.  If you enjoyed it, please don't forget to hit the like button. Thank you for watching and see you in the next Unity tutorial 👍
Info
Channel: Rehope Games
Views: 19,187
Rating: undefined out of 5
Keywords: Unity, Game Development, Level Menu, UI Design, Level Locking, Level Unlocking, Game Design, Game Dev Tutorial, Unity Tutorials, How to Create Level Menu, Level Management System, Rehope Games
Id: 2XQsKNHk1vk
Channel Id: undefined
Length: 10min 12sec (612 seconds)
Published: Sat May 27 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.