How to make a Tower Defense Game (E26 LEVEL SELECT) - Unity Tutorial

thanks for tuning in at brakus hello I want to welcome to this video in creating a tower defense game in unity today we are going to be creating a level selector so some kind of menu that will display the amount of levels that we have in our game and then the user can click on them to go to that level we still don't transition between levels so if you complete one level it won't actually take you to the next one that's something we'll add in a future video and also all of these armed levels are unlocked immediately we still have to do some way of maybe unlocking levels as we go that could be something really fun to add and of course we also need more levels but I thought we would start with the level selector and then work from there so let's just jump right into unity and what I want to do is just base this off one of the our already existing scenes that we have whoops don't want to save this one and I thought we would just work off the main menu because it has this background and that feels nice and also we only have the scene fader and not a lot else in here so let's just duplicate the main menu and let's rename this to level selector and or select or whatever I'm just going to do a level select actually and let's double click on level select so you can see that the one that's opened up now and we want to delete pretty much everything in here we want to remove the standard turret we want to remove well we can actually keep this background here to use as a background for our UI and then just build our UI on top of that or we could have a flat color that's totally up to you I think I'm just going to leave it in here and just remove the main menu objects so that we don't have the functionality for our main menu in our level select script cool so now we can just save that and we can go ahead and start building the UI so let's right-click create UI canvas and we want to rename this to something like UI canvas or overlay canvas something like that I think we want to change the UI scale mode to scale with screen size so that when we scale this up our UI is going to scale with it and I don't want to necessarily select pixel perfect let's just go under the UI canvas in the scene view here focus on it so we can get a good view and make sure you're in 2d mode let's right-click you I and let's start by maybe creating some kind of text that is going to say select level and we want to change this to a Roboto maybe even the thin one and we definitely want to scale this up quite a bit I also want to anchor it to the bottom here so the bottom left and let's bump up the font size here so we can actually see this in the game want to change the color here to white and we can maybe also add a shadow but for now we'll just leave it as is and then we'll see if that's necessary on later so I think this already looks just fine and we can maybe just move this up a tiny bit to make room for our actual UI so this is going to be our title and then we can go here and go UI and then panel and I want to create kind of a a panel on for all of our level buttons to be in so let's just make sure this doesn't stretch with the scene I wanted instead to just be centered or anchored in the middle so just click there no holding down alt or anything and we can simply just scale this whole thing down so I wanted to scale down on the Y here wanted to go kind of far down something like that and I want it to be about the same size or have the same starting point as our text so something like that looks fine for now and remember we can always tweak this later what I also want to do is definitely change the color to a black color and we can see what that looks like in the game and I actually want to bump down the outfit even more so something like that I think that looks quite decent and it's definitely unusable so this here is going to be our levels and on this is the own actual background for our levels I also want to have an object that is responsible for laying out all of our level bodies so some kind of grid I also want to have another object that's responsible for allowing us to scroll through levels so let's say we have more levels that we can show on the screen I want to use the scroll rect so that we can actually scroll through and we'll also add a scroll bar over here for displaying the rest of them so this is our background so now we can go ahead and create a new empty object under that background we can just reset that and we also want this to we actually we want this to scale with our parent object so we'll just um you know hold down alt here and click in the bottom right and this here is going to be kind of our scroll our scroll rect and we can draw maybe just give it a tiny bit on the left here so it's like 20 on the left top right and bottom just so we kind of separated out from our background I think that's going to look pretty nice and and then we can go ahead and create a new empty object under that as well and this here is going to be our actual grid or we could also just call it the content so um we'll have just link all of these up in a moment and it's kind of confusing that you have to create the hierarchy in this way but after having done it a few times you're going to get used to it and yeah it's with every as with everything else in unity they have their standards of doing things and once you once you get used to them it shouldn't really be an issue so what we can do now is maybe um create a bottom button for our content so let's just size it up here and this is going to be automatically sizing to fit our content so that's why I don't really care about the size here I just wanted to make it a bit larger so that we can see our button that we now are going to create and let's just make this say 100 by 800 and actually that doesn't matter because what we'll go ahead and do right away is add a grid layout to this content so we'll go in here and we'll say we want a grid layout group and that now allows us if we duplicate this button here I'm just going to make a bunch flip you can see that it automatically lays them out so that's a really really handy feature in unity and what we'll do is we'll just again anchor this to scale with our scroll rect just to see how that looks and you can see that already looks pretty nice and what we can do is maybe keep the cell size at a hundred but definitely add some spacing so I want something like maybe 13 on the X maybe a bit less I do want there to be another row so maybe 11 on the X there and let's do the same thing on the Y so that already looks quite decent and what we can then do to our content here is we can add a content size fitter and what this will do and it will only do it in just a second is it will automatically resize this object to fit of the button so in our case it would resize to fit like this and then if we remove the bottom button here it would automatically just bump up here so that's really really handy because our scroll rect will orient this content here um and depending on the size of the content so if the content is larger than the size of our scroll rect it's going to of course allow us to scroll through that so it's really really neat that we can get our content to resize to fit the actual size of all the buttons together so in order to make it do this first off I want to take the anchor point here and bump it up to one on the Y just to make sure that it will orient itself from the bottom on center or from the upper center so that it will scale in this way a not scale and both down and up at the same time oh and unity is messing around here I think the unity a UI system is really really awesome but sometimes you just get weird behavior like these warnings here and they're not actually dangerous because they won't actually do anything inside of the game but you can see just how much they're messing everything up right now so let's just disable our content size fitter let's try and scale this up and you can see unity is just going completely crazy here so I might have to restart and it's a really really annoying thing that this is happening I I really hope they're working on it it looks like it kind of stopped messing up their cool so yeah it's just you need each UI system what are you going to do so what we can do now that we've anchored it up here Riaan able the content size figure and on the vertical fit we now want to put preferred size and you can see now that it automatically rescales so if we delete this one it's going to snap up there indeed it does cool so that's already working so what we want to do now is of course go in and make these buttons a bit more interesting and to do that on let's just remove all of them except for one and let's rename this to something like level button and um we can definitely mess around with some of these settings the first thing that I want to do is change the text object here to not say button I want it to say the number of our level so this is going to be our first level and we can go in here and bump up the font size quite a bit and also want to change that to Roboto thin I like that look something like that looks pretty good already actually and you can definitely just use white and black in here but I also thought it could be fun if we maybe are tinted this button here in our in some kind of color but it might just be yeah it doesn't look better I think we should just stick to the very minimalist theme but as always I really recommend that you spend some time on it play around with it get it to look exactly the way that you want it to so I'm also going to go into our level button here and add a our shadow and just to give it a tiny bit of a 3d feel here to make it stand out and I'm definitely going to decrease the Alpha and that's that channel so you can see that looks a little better it just gives a tiny more detail so it doesn't look too simple and dumb so yeah I really like that and one thing we can also do is maybe change the hover animation and click but we can do that in a second so now let's turn this button here in to a prefab by going onto the prefabs folder and dragging it in there and now we can just freely duplicate it as many times as we want because now when we change of course a level button down here they are all going to update so that's really handy and I thought we could um Mae just see how this looks when we had play at the moment so you can see that they are currently extending beyond the confines of our scroll rect and we aren't actually able to drag them anywhere we can click on them but nothing will happen and also um you can see that it doesn't cut off here we want some kind of masking to happen so that they won't just well be shown in places that they shouldn't be shown so that's maybe the first thing that we should add is go to a scroll right here and add a simple mask and we can make this a rect mask to D just to make it simply square and you can see that just cuts everything off that is without the confines of the scroll root scroll rect so you can see there it cuts everything off here it's just a very very simple effect but it looks quite cool and then what we can do is add some actual scrolling so if we go to a scroll rect and add a well you guessed it a scroll rect we should be able to now drag in our content and for the viewport that's going to be the same as the scroll rect component so we'll just drag in our scroll right here and everything else we should be able to leave as is we might want to disable horizontal scrolling because we only want to do that on the vertical so now you should see that when we go in here we should be able to click and drag on these buttons and you can even see how smooth that feels so a really really simple and easy to make effect and we can still click on all the buttons to activate them so that's really cool and you can even see a bit of hardware animation in there so the next thing that I wanted to do was maybe spice up our spice up our hover animation a tiny bit because I think the tinting looks a bit boring so luckily in some of the earlier videos we created this cool hover animation for our buttons and we can just go ahead and reuse that so all we need to do is go to transition and of course I've selected our prefab to change all of them at the same time so go to transition and select animation and we want to turn off navigation and undo arm and we want to go down and hit and add in an animator and this is where we created the controller from earlier called button and this is basically a very very simple controller all it does is it has a normal arm animation with a scale of 1 1 1 then it has a highlighted animation with a scale of 1 point 0 5 and we also have a tiny bit of hover animation in there so you can see that it actually does a bit of pulsating but you can just put a single keyframe here for the point one point zero five and we do the same thing when we press it so we wanted to go back to one one one cool so yeah that's pretty much all that is so you can quickly recreate that I'll go back and watch the earlier videos if you want to see how we did that so you can see already that that looks just much much better and feels much looser much smoother cool so on next up what we can do is link these buttons so that they will actually transition to a new level because currently nothing happens when we click on them and in order to do that let's go ahead and create a script that we want to act as the central place for doing logic when it comes to selecting different levels in the beginning it's just going to have a very simple public method call something like select or load the text in the name of the level that we want to load and then we tell the scene fader to fade into that level but in the future it can handle stuff like looking at what levels are locked and showing a locked graphic checking if you can actually play that level it could also dynamically load all of the levels that you have available from an array or something and put them in here so you don't have to add a new button every time you make a new level you can do a lot of stuff but for now we'll just have it be really really simple so let's create an empty object let's reset the transform and let's call it a level selector and we can go in here an add component level selector and we can double click on that to open it up in visual studio and that's actually the first scripting we're going to do for this videos I'm excited I'm just going to have a sip of water they're awesome so what we can do in here is just remove system duck elections and system duck election startin Eric we're not going to be using those and we'll go in here and create a public void cold let's just call it select actually and the function is going to take in a string with the level name that we want to select or the name of the level that we want to select and we could just go in here and use our unity engine scene manager arm load level and then I load the level directly but let's just utilize the fact that we do have some functionality for fading between scenes so in our case we want to get a reference to our scene fader now we can just call this fader and then we can use fader fade to and then put in the level name here so that's just going to look a bit nicer and now all we need to do is find our level selector and drag in our scene fader into the fader arm field there and we can maybe just drag about level selector to organize that at the top so now we can go into our different buttons and believe it or not that was all the scripting that we needed to do for this video so we can go into our first button for example we can go down here and add an on click event and all we need to do is drag in the level selector go and do the level selector script and select choose select and the and we get a string here that we can input and the level that we want to load is something like level one and we can do the same one for the second one except for this one we want to change the text to two and we want to go in and add an on click event drag in our level selector go on to the level selector script and choose select and let's input now level two so it's really really really simple and we can maybe just delete all of the remaining levels so that we don't have some that will not work and they were just for testing and what we can do now is create these levels so we currently have our main level let's rename this one to level 1 and if we duplicate this level it will automatically name it level 2 and if we now just jump into level 2 I thought we would just quickly change something about this level so that we can easily see that um it's different so for this level let's just go in and change our start lives from 1 to 10 so on level 1 our start lives are going to be 1 and on level 2 our start lives is going to be 10 so that should just give us a clear idea of what level we're currently on so now if we go back into our select level hit play we should be able to go to level 1 and indeed it says one lives here and if we then restart here and select level two it's going to go to level 2 note and here we get an error and that's because we haven't added level 2 to the build settings and this is something you need to do for all scenes just you need to drag them under the build settings so let's go to build settings and let's drag in level 2 let's also drag in level select because we're going to be transitioning to that in just a moment so I'm just going to drag it up here but the order really doesn't matter for us so we can hit save again hit play and try and select level 2 now and it's going to transition and it's going to say 10:00 live so now we you can just go completely nuts create as many levels as you want to and add them in here and yeah you're going to have a lot of replay value so that's awesome of course we also want to have a way of going to or transitioning to this level select level scene and we want to do that from our main menu so I thought when we hit play here instead of just playing from level 1 let's just load up the level select and then the user can choose for himself what he wants to play so let's undo our main menu instead of having our main level as the level to load let's go in here and have level select so now when you go and hit play you start at the main menu you hit play it transitions to our levels select and then you can choose either one or two I'm going to select two and it transitions are further and you can even go back here if you had escaped go to the menu hit play again we can select maybe level one this time and it's going to go in there instead so you can see how nicely these scenes are tied together the last thing that I wanted to show you is under our level select and what I wanted to do was just add a very simple scroll bar in case you don't like this a dragging around of the objects I kind of like it but maybe it's not too intuitive if people have never really seen it before I mean on phones it's it's really common but doing it with a mouse is not really standard so what we'll do instead is go in and let's just create a bunch of test buttons here so let's duplicate this one a bunch of times and let's also go under our levels this main object which has our background let's go you eye and then create a scroll bar and of course this is currently centered to the horizontal axis so let's go down here and change from the direction from left to right and then instead have it be bottom to top and it's going to automatically rescale it here and then what we can do is maybe move it over here somewhere there looks just fine we can also scale it up like that I think that looks a lot better and of course we need to reference this so we need to go into a scroll rect and drag our scroll bar into the vertical scroll bar field and now you can see it repositions itself and resizes itself in such a way that it will fit on our content and when we then scroll to the bottom here you can see our content Scrolls up and even we can still drag like this and it's just going to move the scroll bars so they are both interlinked and will not interact with each other so that's awesome and we can even make our scroll bar a bit prettier because I yeah this is not to kid and we can maybe take our the is our background so we can take that and make it kind of black and very very transparent something like that just very see-through and then we can find our sliding area and then the handle and we can change the color on this also to be black but um add a bit more of opacity to that one so now we should be able to hit play and you can see that looks just a little bit better I think and we can also even use our scroll wheel to on change it so that's awesome and everything is working we can go ahead and delete all of our buttons here and you can see that when it's not needed it's just going to be this um on this um what should we call it uniformly colored bar that you can really interact with you can of course add the script if you want it to fade out when it's not needed but I like it being there like this so that was pretty much all I wanted to show you in this video I hope you enjoyed it let me know what you want to see next I want to do more with levels definitely have some kind of way of transitioning to a new level once you've mastered the the previous one and also some way of unlocking levels which will give us a handy way of talking about saving data inside of unity so I thought that's pretty exciting but of course let me know if I'm going off on a tangent and no one no one really wants to see this so yeah thanks for watching and I will see you in the next video thanks - of the awesome patreon supporters who donated in November and a special thanks to sultan al sharif faisal arrow fire james calhoun and robert Bonham become a patron yourself at patreon.com slash practice

Channel: Brackeys

Views: 100,678

Keywords: unity, unity3d, tutorial, beginner, easy, how, to, howto, learn, course, series, tutorials, workflow, game, development, develop, games, programming, coding, basic, basics, C#, tower, defense, defence, td, level, switch, switching, select, selector, menu, screen, scene

Id: -cTgL9jhpUQ

Length: 23min 59sec (1439 seconds)

Published: Sun Dec 11 2016