How to make a Tower Defense Game (E18 SELECTION) - Unity Tutorial

so when I open my computer today windows decided to do an hour-long update and what that did is mess up my mic so I just recorded a full video with no sound anyways here we go for a second try this video is brought to you by our own Metta thank you so much for donating if you want to support breakage yourself you can go to patreon.com/scishow Cheers thanks for tuning in at brac ease hello I want to welcome to this video on creating a tower defense game in unity today we'll be making some functionality for selecting turrets so whenever we are click on a chart on our map we'll have a cool UI pop-up right above that chart with some options for upgrading and selling the chart today we won't be making the actual functionality for upgrading and selling it will only be keeping track of what turret is currently selected and showing the UI in cool ways and then in future videos we can actually take a look at doing those two things the reason why I chose to do this video today is because in the last one I asked you what you wanted to see and an overwhelming amount of you said upgrades and a lot of you said selling as well so I thought this was a pretty important video to get out of the way in order to do all that stuff so without further ado let's just jump right into it so as you can see I'm here in unity and what I want to begin with it's just kind of sketch out the UI so I want to do this let's bring in a turret that we can use as a reference point so let's find our standard turd and just drag it into the scene and you can see a place to sit right here then let's create an empty object and we'll call this one our node UI so you could also call it select UI or turret UI whatever this is going to store our two buttons and you could definitely implement information about the turret here as well so if you want to be able to inspect turrets to see more about them such as health or cost or stuff like that you can implement it into this UI very easily so what we'll do is have this sit right on top of our turret so let's find our standard chart copy the transform component of that and paste it onto a new UI and the reason why is whenever we want to select different turrets will have this no UI move to the position of that turret so right now when building it we want to make sure it lines up with our reference awesome so what we can do now is pretty much just shift into 2d mode and create a child object of this and this is going to be a canvas and right now you can see our canvas is huge that's because it's currently in screen space overlay we want this to be part of the world space so let's change it to world space and it's also changed the scale to point zero seven point zero seven and again on the Z then we can hit F to focus in on it and you can see that current currently it's it's not really in the right place so let's just hit reset on the rect transform and that actually modifies our scale here so we'll just change that very quickly again here and I keep hitting eight there so point zero seven and point zero seven there we go so now hit F and you can see it's it's in the right place now let's move this up a bit to offset it let's also kind of make it not quite as tall and it's definitely widen it to something like 210 and I'm just going to write it out here so I actually kind of like the look at this we might need it to be a bit taller then what we can do is right click on this go UI and then panel and on this of course has an image and you can definitely keep this in case you want this panel to have some kind of background but since we'll only have like two buttons and then a arrow pointing to the turret I don't think it's necessary for us to have that so let's just disable the image for now one thing that we do want to add is another component here called the arm horizontal layout group and this will just nicely layout our two buttons when we create them we'll also make sure to rename this here to something like buttons so let's now right-click on this go on the UI and create our first button and let's create duplicate this by hitting ctrl D or command D if you are on the Mac so now you can see it easily scales these so let's set up the first one so let's go into text and let's make this upgrade and we can also put an amount in here so let's say that it costs $100 to upgrade it will of course make this arm change depending on what turd you have selected but that is probably for a later video so what we can do is then change the font here and I want to use the road bottle medium and what I also want to do is have this upgrade part be a lot more on or a lot bigger or fat or more clear than on the actual cost so in order to do that let's just make this as bold using these easy HTML tags inside of our text and you can see that will make only that text bold also right now focus on the scene view and don't look over at the game view it's looking a bit weird at the moment and that's because we haven't rotated the UI which I plan to do in a second it's just very much easier to build it out first on with it being just ended standard position with its zero rotation and then rotate it afterwards so now let's make this completely white and it's also change the font size to something like 18 and then let's change the background I want the background to be kind of grey blue and a bit transparent as well so we'll just add a bit of transparency there and I want it to be kind of like what you see down here but I don't want to just copy the colour you can do that but I want to be able to just fine-tune it here because you might need it to be more or less visible than what you have down here awesome so I kind of like the look of this so what we'll do is take our secondary button here delete it we call this one our upgrade button and we'll duplicate this that and call this one cell and we'll change the text in here to cell and the amount here to something like 50 so this is already looking pretty good what we can then do is find our buttons here and drag these up because I want to be very very clear that this UI relates to this particular turn so let's make a small little arrow that points down towards that turn to do this we go under the canvas right click go UI and then image and let's change the image here to the drop down arrow and this is included with unity by default you can also find your own arrow on Google just make sure that you are free to use it or you could of course um easily make this in Photoshop or I'm just going to be using the default one here but you can do whatever you want I think this works pretty great the only thing is it isn't super high resolution you don't it's only 40 by 40 so if you're really soo-min on this you're going to notice that but I think for what we're doing here it's going to be just fine awesome so I like the look of that and then I just want to tinned it a bit blue something like that and make it a bit transparent as well just kind of in line with the a layer with the other elements awesome and I'm going to rename this to arrow and what we can do now is pretty much position this correctly inside of our world space so let's switch out of 2d now and let's rotate this so as you can see my cat is turning in here look say hi hello yeah the light is blinding her awesome um so what we can do here is rotate this over and move it so that it's kind of in this 35 degree angle and pointing towards our turret because at the moment you can see it doesn't look super great so to do this on we can go and select our canvas and rotate this by 35 degrees and then we can easily offset this canvas because I know you I will stay at this position we can do whatever we want with this so let's now just move it over and maybe move it down a bit as well this way it points nicely towards our turret and it looks a lot better inside of our game view especially when we zoom in here so it puts it inside of our world in a really awesome way so cool so what we can also do is maybe I actually want to rotate this pipe even more I think now 35 is better all right let's stick with 30 35 but you can choose whatever and of course fine-tune this stuff I just jump over it very quickly to demonstrate it so let's now delete our standard turret and let's take our no UI here and move it to the top just so we can easily find it let's also take our event system and move it to bottom now I think everything is nicely grouped and what we can do is of course make this interactive so what we want to do is have some place that keeps track of what turn is currently selected in fact I wanted to work in such a way that we can only either have a chart selected that we want to build or have a chart selected in the world we don't want to have both things at once because it could quickly complicate our code and maybe even make it confusing for the user so what we'll do is implement this into the place where we select or where we keep track of what turd we want to build and we do that inside of our build manager so let's double click on that turbinate up in visual studio and we just want to add a few things in here it's not too complicated so at the arm place where we declare our variables you can see that we currently have a private chart blueprint code the chart to build in here we want to create a private node as well called the selected node you could also call it the selected turret whatever you want to do but I'm going to select the actual node here and then down here at the bottom you can see we have a function called select chart to build we want to just make a separate one here called select node which instead of taking in a turret is going to take in a node and it's just going to say set select the node equal to that note that this one that was passed in however because we want to only be able to have either a load or turret selected at one point or a to build we can easily go in here and set chart to build equal to null and go in here and set selected node equal to null this way when we enable one we disable the other great so this isn't actually implemented into the UI but it is implemented into the build manager which means that if we go ahead and actually call this select node inside of our node we should be able to see this working in the game so to do that we find our node scripts so just find that in here and you can see under the function called onmousedown with check do we are are we currently clicking a UI amending which case we just want to ignore it if we're not well then we want to make sure that we can actually build their that our build manager is ready to build and this is what I want to move down because we only want to do this regardless if we only want to do this in case there is no turret there so if there's no turret there we want to try to build so we want to make sure to check if we can build and if we can be called build manager that build turned on and we pass in this node so we you tell a build manager to build a chart here however what we want to change is this if statement so we say if the chart is not equal to null meaning if there's already a turd sitting on this object or on this node well so far we've just returned and said we can't build there what we want to do instead is simply select that node so on we do build manager and just like on selecting or building charts down here we go build manager dot select node and we pass in ourselves so when we sit when we click on that node and if it has some sense something selected we're going to select that node awesome so the way that we can see this working in the game right away is if we hit play you can see currently right off the bat we don't have any hover animation if we then select one of these charts let's just select the first one we do have a hover animation and we can do we can keep on choosing these and it's the same with the other one so now we have this one selected we still have a hover animation but if I now select one of the charts say this one that harbor animation disappears and that's because we currently don't have a turret to build selected we have this node selected and the way that we can actually see this is if we just go over to our inspector select our game master and change from normal to debug mode on the inspector we can see that under our build manager the selected node it's in despite it being a private variable because we're inside of our debug mode we can actually see it and we can see that it points to node 37 so if we now click that and go here you can see that is that turd and if we select a game master you can see that that are variable updates as we select the different turrets so it is actually working but it's not really being showed anywhere and this is where our UI comes in so what we want to do now is kind of create a script on a node UI that is responsible for while hooking up our upgrade and sewed buttons are at a later point but for now we want this to be able to move around the UI and hide it when it's not necessary so let's create a node UI script like this and let's double click this to open it up as well and I'm going to have to take a sip of water awesome and let's keep going so the first thing that we want is of course to keep track of what our current target is what is the node that is selected that we're displaying the UI for and to do that we just create a private variable here which we can call target and it's going to be of type node then we are going to have a public function a public board that is reserved for setting the target so we want to be able to call this on a build manager in here we want to whenever selecting a node we want to be able to have some kind of reference to our UI so we'll go something like on node UI and then we want to go dot and then on set target and then we want to pass in the node that is the time so in order to do this what we do is of course taking the parameter with that target and of course you don't want to call this target because then we don't know what is this target what is this target what you could do is then go this target which implies the field up here that is part of the class equals whatever passed in which is this one and this would work but what I like to do it instead is just rename this to underscore target so to make it very clear that this is passed in here and this is the variable that sits on the class just make sure you differentiate some people like doing really shorthand notation just writing tea there and you can do that as well just do whatever suits you awesome so we have now set that target and then we want to of course change our position so we can set our transform dot position equal to target dot and then get build position and the reason why we don't just use target that transformed up position is because that is the very center of our node and if we look at our notes here that is inside of the actual block and we don't want that we want it to be just at the top of a block where our actual turret is sitting so that is why we're using target dot get build position because that takes the center of a node and just offsets it with I believe it was point five cool so that should actually make our UI update and move around the screen so if we now go into a build manager and make a reference to this node UI and we are already calling the function here so we simply need to make this variable here accessible so let's go in here and create a public and we're going to make this of type node UI and call this one node UI and we can drag this in inside of the inspector we can reference that in the inspector so now no do I touch set target node it's going to go over here set the target and move the UI that's pretty much all we needed to do here so if we then go inside of our game master you can see we now have a field called node UI where we want to drag in our node UI cool and the selected node is assigned but it's not used not yet but it will be so let's now hit play and we should see that this just sits there for now but if we then go in here and build some different turrets and click on them the UI moves to show what what turret is currently selected and it does so beautifully so the next thing is of course disabling this UI whenever we have a turret to build selected then we want this to expire and what we also want to do is have some way of target this UI on and off because in case we have multiple charts like above each other the UI might get in the way and that's annoying so we want some way of toggling it off by plaguing clicking the turd once again in order to do this let's create a function in here called public void and then let's call that hyde and all we need to do here is have a reference to our canvas which sits under a node UI so that we can easily just enable and disable that it's the easiest thing to do so we'll have it be disabled by default and then we can go into a node you I create a I'll do this on top of everything else in public and we'll just make this a game object and we'll just call this UI what we then do in our height function is we go you I that's said active and we go false and inside of our set target of course we want to enable it again so we go UI that's it active and we go true awesome and then we need to call that height method inside of our build manager and if we of course do that whenever we select the chart to build so when we select a node we said we set a target and it's enabled again and whenever we select it to build we go node you i dot hide it's that easy so now we should see that we need to do that reference there so no do I and drag in the canvas there into the UI slot so if we now hit play we should see that it's disabled by default we do these three turrets and when we select one of them it appears and when we select one of the charts down here it is gone however we still have the issue where we can't really toggle it on and off and so the UI might obstruct the user from doing different things that he wants to do so in order to do that and that is a super thing the super simple thing is we just go in here and see if the note that we want to select so inside of a select method if the node passed in is equal to the already selected node well then we want to simply hide the UI and set the selected node equal to not so we say if our selected node node is equal to the that we passed in well then we want to deselect the note so we want to go deselect do you select node and then we turn out of that function and then we create our deselect node and I'm just going to make this public so that you can deselect notes from other places as well and we might want to do nodes here that's just two node so that if you have something that happens in your game say the user clicks on something else then you can easily go in here and deselect the node and all we want to do here is simply go selected node equals null and no UI dot hide and if you notice that's this exact same thing that we're doing down here so let's just turn that into this single function code so we'll just deselect the note awesome that that just makes everything really really simple um so I believe that was all we needed to do that was all the core functionality if we now just close that hit play we should see that if we go in here create some different turrets of different types that we're able to select these different turrets and if I double click of one of them it will hide it so I can toggle it on and off on the different turrets that's freaking awesome and we can go in here and build all the different charts and it will just work immediately because we are using the same central script which is our node script no matter what chart we're using and this is why I object oriented programming can be so strong it's because we can have this idea of different instances and different types even sharing another script sharing a type called the node awesome so on the last thing that I wanted to do is just create a quick little animation for whenever this UI element first appears so I think when it switches from one turn to another that's fine that it's just instant and when it's removed again I think it should be instant as well however when it is first introduced into the scene so the first time you select the chart or if you are say so here we have two turrets here we select one of them I want it to fade in and if we then go back in you can see it's removed again and then we select another one again I want it to fade in I don't want things to just magically appear so this is a very quick and easy thing to do all we need to do is utilize the fact that our canvas is only enabled um when all we want our UI to be on displayed so we simply create an animation here just in the exact same way that we did with our game over window that we'll play whenever this object is enabled so let's just enable it for now hit create go under your animation and let's rename this to node UI and all we need to do is add a canvas group add a canvas group here we'll set the Alpha equal and look she's disturbing again she wants to be on camera so Allah said so we have the canvas group here and let's move forward to say half saying actually I wanted to be there somewhere around here and so that's ten steps and we could do an alpha of zero and then we want to flip these two keyframes so that it will end at one and start at zero and then when we hit play now you can see that's just a very quick fading then we can find our animation find the node UI animation and just remove loop time so it doesn't loop let's also rename this from canvas to something more descriptive like node UI a canvas or just know you are is going to be fine awesome so I believe that was all we needed to do so now let's preview this in full-screen and hopefully it recorded my audio this time so oh of course we need to disable the canvas from the beginning here awesome you can automate that but it's fine I think we just do that ourselves so now we go in here we select some different turrets or build some different turrets here of different types we select one of them and you see it should seed quick defame it awesome it quickly shifts and then when it's removed again that's perfect and you can see it fades in once again the next time we do it so I think that is a really nice blend between snappy controls and a bit of animation in there just to make it look a bit cooler and I really like the fact that we have these opaque or if partially transparent buttons that allows us to see the action that is going on behind them as well so that is pretty much all I wanted to do the one thing that I kind of noticed here is just I want a bit more color in these two buttons here so let's just add that in just make them a bit brighter and I think that just looks a tiny bit cooler we want that really sci-fi a slick look which you only get by making things transparent and super vibrant awesome so that was pretty much all I wanted to show for this video I hope you enjoyed it and without further ado I will see you in the next one thank you so much to all of the awesome people who donated in September and a special thanks to our own Metta Robert Roche James Calhoun Kim Rose koukos Bao and Antoine and vixen pea thank you so much for donating you guys are awesome if you want to support brackets yourself you could go to patreon.com/crashcourse

Channel: Brackeys

Views: 61,392

Keywords: unity, unity3d, tutorial, material, materials, beginner, easy, how, to, learn, course, series, tutorials, workflow, game, development, develop, games, programming, coding, basic, basics, C#, tower, defense, defence, td, turret, select, selection, selecting, upgrade, sell, menu, ugui, node, ui, world

Id: Vn26oMNNpuE

Length: 25min 43sec (1543 seconds)

Published: Sun Oct 30 2016