How to make a Tower Defense Game (E23 HEALTH BARS) - Unity Tutorial

thanks for tuning in at brakus hello everyone and welcome to this video in creating a tower defense game in unity in the last video I asked you what you wanted to see next and a lot of you guys said that you wanted to see enemy health bars so that's exactly what we're going to be doing today so as you can see I'm in unity and I want to begin by just creating a canvas where we can create our UI so let's go over to the hierarchy hit right click and then UI canvas and we can go over and make sure that this is changed to a wall space canvas so we can have it follow our enemies around by going on to render mode and then selecting world space then we can reset the rect transform and you can see it's currently huge so let's scale this down to say point zero three and all axes hit F to focus on it and we can kind of drag it up to see what we're working with let's shift into 2d mode now and let's also scale this down a bit I don't want it to be as small as to health by itself because I want to leave some room in there in case you want to display other statistics about the enemies such as the enemy type or speed stuff like that let's also right-click on the disc and list now and go UI and let's go and create a new image and this is going to act as the background for our health bar so let's maybe size this down or we could just go over here and right click or hold down alt and click left click right here which is of course going to scale it horizontally when we change the size of our canvas but not on the vertical cool and then we can change the height to something like 10 and of course make sure to snap it to the bottom let's change the color here and again this is the background so we just want kind of a see-through black very neutral thing and let's also change the arm name here to something like health PG let's now duplicate this object by hitting control V or command T if you're on the Mac and make this a child object of the background let's now rename this one to our health actually let's do health bar and let's change the color to something a light green with a full opacity something like that but you should of course go ahead and play around with this so next up is of course actually resizing this health bar on and also we have to kind of put our UI under the enemy so let's begin by positioning this on top of our enemy so let's find our enemy prefab on the prefabs here drag him into the scene you can see he's right here let's now take our canvas drag that under the enemy and let's reset the x y&z and we have to do that manually so let's do C Rho 0 0 let's drag it up a tiny bit and move it back I think we're going to give it a Y position of 1 something like that and I might actually want to scale the canvas down a bit more I think there's plenty of space still for us to display all the information but you can always change that and then change the Y position again to one that looks pretty good next up we could maybe take this and rotate it so that it will fit or point towards a camera and I think we should rotate it about 40 degrees that looks much better we can move it back a bit and I think that's all the tweaking that I'm going to do right now I'm sure I'll come back to it before the video so with though so yeah this should now follow around our enemy and the reason why this works right away is because we're currently not rotating enemies if we were doing that we would probably have to figure out some way of having this canvas track the position of our enemy but not the rotation but I think that's for a future video because currently we aren't doing that so let's just not work around it until it becomes a problem if it ain't broken you know so um let's now apply this to our enemy and we should already see this working in the game so if we hit play here we should see that our enemy is now spawned with this health bar and that it follows them around so next up is of course making a change when it takes damage you can see currently it's totally static so what we do here is again we bring up our enemy we find our canvas our health background and our health bar and this is what we need to change unity has a very very handy thing for um kind of clipping away parts of a sprite and it's done by going over here and selecting a source image and you have to select the source image for this to work but we don't want any of the default source images because they scale really weirdly and things aren't looking good so what we want to do instead is just go ahead and find a totally square source image and preferably we would have it be white so that we can just control the color inside of unity remember when you have a white sprite you can totally control the color by tending it but if you have a black color you can't control it at all and that's because of the way that color is somewhat applied together when you multiply with one nothing happens but with you when you multiply with zero you get zero and so it will always be black so um what we can do is just jump into the tower defense as its back and I of course have a link to that in the description go on to these sprites and it's finally white square and this is something I just very quickly made in Photoshop it's just a two by two white square you can search for white square and Google and that will come up lots of images doesn't even have to be two by two or anything um I just went with this because it's very small and therefore won't take up any size so um and I've made a sprites folder here and you can do so as well and let's just drag it under there and let's go and make sure that we change our texture type so let's change that to straight 2d and UI let's also not generate MIT Maps let's change this to point nofilter and everything else should be fine so let's just hit apply let's now go into our health bar drag in our white square and you should see nothing changes except for the fact that we can now change our image height image type from symbol to filled and this is where things become interesting that's a radial fill which we are not going to be using you can do that for you can make that for making you can use that for making progress bars and stuff like that and then we have a horizontal one and you can see how that works so we now have this full amount that goes between zero for no fill and one for full fill and we can control this really easily through a script you can also change the origin in case you want it to go the other way around but I like it this way calm so now all we really need to do is jump into the place where our enemy takes damage and that's within the enemy script so let's just double click that to open it up in visual studio and really all we need to do is add a reference to our new image and then just change that parameter so first off because we need a reference to a UI element let's go up here and include unity engine UI let's also maybe group these variables together a bit because we have a lot of stuff that controls on some parameters on the enemy we have a death effect that we want to be different for each enemy and then we have kind of a reference to a UI element that we want to probably be the same for enemies it's a very unity specific thing so let's just go ahead and make a header here that says something like unity stuff just to let on the user know that this is something that we need to be able to reference but it's not something that you should go ahead and mess around with when are modifying enemies so let's make this a public image and we're going to call this one our health bar and we can go down to where we take damage which is down here and we can just set health bar dot fill amount equal to and of course we could just set it equal to our current health and that would actually somewhat not work because the problem here is our health start set starts at 100 and it ends up at zero so what you have is a situation where unless you are at 1 or 0 health um that's not going to be within the confines of between 0 & 1 so the value here for our health bar is a float number between 0 & 1 and so we need to have a way of figuring out what our maximum health is and what the least amount of health we can have is which is zero and then our kind of dividing those so that we can get a value and actual representation between 0 & 1 of what our health is so kind of a percentage when hundreds yeah so what we'll do is have just the way we have start speed up here we'll also have a one thing you might think is then we just go equals health divided by a hundred and I can see kind of what you're thinking here and this would actually work right away let's just try this too to see that this is working so let's go onto our enemy let's drag in our health bar let's hit apply on this and our enemy should just be working we can just leave him in here and we can put down a turret and you can see that totally works the problem though is when we go in and then change our starting health so if we go into an enemy now and change the start health to say 200 and do the same thing it's not going to be a correct representation until we get to the point where it can be displayed so until we get within the 100 health so what we do instead is we go up here and we create the same thing that we've done with our speed which is the start health and a current health so let's go and call this one our start health and we'll have a and we can just have this be private because we don't need to access it from anywhere and this is going to be our health and inside of our start we'll just set health equal not health bar health equal to the start health and then down here we can simply go health divide it by start health so if our start health is 100 that's going to be whoa my cats living on the keyboard there as always so um if I start health is a hundred and we are at 100 this is going to return 1 if our start hill health is a hundred and we are at 50 it's going to return 0.5 and you get the idea so what we get now is a result where let's see here where we should always have an accurate representation of our health in the health bar and now we should be able to run the game one last time and see this working and it should work with all turrets because they all use the same function for damaging enemies you can see here it works with our standard turret you should also be a to see it working with our missile launcher here so let's see that in action and indeed it does and with our laser turret as well awesome so that was pretty much all that I wanted to show you in this video I hope you enjoyed it again let me know if there's something you're burning to see I have a few ideas for what I want to do next thank you for all of the kind words and suggestions and also I feel like it's a long time since I've mentioned the fact that I have a patreon page on where you can go and support some monthly monthly amount if you want to see more videos or more live streams and just support the project in general it means the world to me you guys are really awesome so you can go to patreon.com/scishow and don't eight and yeah without further ado I will see you in the next video thanks to all of the awesome patreon supporters who donated in October and especially thanks to Sultan l should've faced lemare Fi and James Calhoun become a supporter at patreon.com slash breakfast

Channel: Brackeys

Views: 152,640

Keywords: unity, unity3d, tutorial, material, materials, beginner, easy, to, learn, course, series, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, health, bar, bars, enemy, enemies, ugui, ui, user, interface, image, fill, billboard, how

Id: UKs1qO8w7qc

Length: 12min 10sec (730 seconds)

Published: Sun Nov 27 2016