Simple Hex-Based Game Design for Unity 3d - Episode 1 [Livestreamed]

I want to do tutorial stuff outside of you know project porcupine because we still get lots of questions on lots of different topics and one of the topics that I get asked questions about all the time is hex style games because I've done tutorials on tile based games before and in fact project porcupine is a tile based game and I've often made the case that all the code we write for a square tile could also work in a hex tile I use tile just to mean like a map unit basically some people think of tile is just a square thing so they've got tiles and hexes I would call this hex tiles but you know whatever right um now we did four let him dare for the London air game program in competition um oh hey we got a donation that came in um I did a game that was hex based in there that wasn't really a hex based map exactly but what we're going to do one of the things with load and air is I have to just sort of go fast got 48 hours to make the game and I can't it's not a tutorial I'm not really explaining things entirely so this is going to be semi recreating some of the things that we didn't let him dare that weren't properly explained at the time and we'll be trying to answer some questions people have about hex based game I'm also going to change things up while most of my tutorials for tile based stuff has been purely 2d I do this one in 3d just to just to shake things up and hopefully people can mine things Grenda hey thank you so much this is becoming routine it seems you lovely fellow well I said we ever want anything to become routine man we got to shake things up thank you very much for your support your enta that's really really really appreciated cheers to you I'm gonna have a cola by Ari Abbott okay and thank you everyone who's subscribing doing all those things so we got a good amount of people 1,300 people and for those you who are here for the gaming they're gonna do two hours of programming after that we're switching to tarsus which is a beautiful wonderful turn-based dice based space survival game the second I saw it I was like I really wish I had done this game it is just lovely it's great just a really wonderful game that you guys are probably going to want to see if you haven't already seen it on my channel and then after that we're gonna do subscribe to multiplayer we're going to do League of Legends all random all mid czar sort of goofy stuff the way we do it is I send out the password to all our subscribers first they get come in and if the game doesn't fill up we reveal the password to everyone that win it and we can get in make sure you League of Legends client is patched make sure you're set up for a North American account good to go okay let's start programming so hex base tiles right so a hex is a six sided object I actually went and made a 3d version of it but here we have a hex we could we could be doing 2d by drawing things in Photoshop we could be actually unities got some really helpful features as a 5.3 where you can quickly create a a sprite of different shapes over here very easily and you can actually use that as your baseline for a variety of things but I went into blender over here and I just made a do I turn off perspective mode again there we go and I just made a simple technically this is a cylinder in in blender over here but it's a six-sided cylinder with you know relatively low thickness and we have a 3d text so people might be interested in making a game like sieve 5 they might be well there's lots of hex based games out there right now one of the things and if you've watched my tilemap tutorial before in there address questions of how do how to overlay sort of a more complex you know sort of bitmap image over it where you get like edge blending and all those things those topics I'm not going to cover today because we're going to stick to some more basic things but that still applies but I'm going to be doing a different implementation here because I'm going to do doing this especially that's the other point of this tutorial is to try to make it different from what I've done before what I've done before we've looked at ways to implement a tile map as a single giant mesh and in our project Porcupine stuff we're doing we are using game objects for each individual tile but those tiles are just very loosely linked to a sort of data representation of the game world in the background this I'm going to be doing everything in the most unity way possible it's going to be very unity very basic very easily achievable and everything we do here should work on you know a variety different systems so here is our our starting hex so to make a map basically what we're going to be doing is we're going to be taking be nice that the light we're going away there we go we're going to be taking this object here and just you know effectively whoops I can even duplicate there we go effectively we're just going to be laying them out like this right so I'm gonna I'm just going to do it manually just at a glance here first so that we can sort of get an idea of how a hex based map will work obviously we're not going to be placing these down manually all right but do some of that and then drop some more up there and drop some more up here and over here this will also be accompanied with some excellent Photoshop art explanations okay so this you know is an example of a hex based map let me take this light and just shove it a million miles away so it's out of our screen there we go so this is a hex based map and some of you may look at this me like okay how do we sort of like how do we organize a hex based map as it turns out a hex based map in in sort of memory and organization in terms of coordinates is just a two-dimensional grid it's exactly the same as a square tile map and so for that now we're going to go and do some cool illustrations here in the Photoshop so um we can very quickly get a polygon tool over here and I think it's set up the hex is good so if we've got our hex over here come on there we go let's say break out of that and another one here and I'm going to take both of these and just duplicate them again and move them in here I'm going to just going to do that one more time and grab these two and we're gonna move them down here and even though it doesn't look like it the coordinates of these are exactly what you might expect actually let me take this whole thing and they've one more copy like this there we go so it's exactly what you might expect on a sort of a square grid in other words if I grab my text tool over here and we grab out a no courier which might be easier to read and we're on white text already excellent and we just make a new layer so the coordinates of this particular spot font size 36 there we go is zero zero it has an X of 0 and a y of 0 this one just to the right of it is going to be a 1 0 it's got an X of 1 and Y of 0 2 0 and so on and then the row above it is going to start 0 1 1 1 2 1 and then the one above that will be 0 2 1 2 & 2 2 basically a ballet dancer right so you can already tell if we can if we can index or refer to these hex tiles using just X and y coordinates obviously we can represent this internally as just sort of a two-dimensional grid hey tomba thanks for the reset the only gotcha is the fact that the world position of these things isn't going to match up with their internal sort of index right because the first table we put down say this one here we might literally put this tile down in unity space in the unity world space at position 0 0 0 right XYZ 0 0 0 but this one over here is not going to be at X 0 Y 1 Z 0 we can ignore the Zed because we're going to assume that everything is going to be flat right it's obviously not going to be that in unity space that position is going to be something like maybe something like negative 0.5 and something like 0.6 comma 0 in unity space and you can sort of like eyeball this right it looks like it's about assuming that the width of this hex let's assume this width of this hex in unity world space is about 1 so you can easily tell that this tile here has been shoved over to the left by about half a unit and then the height of it it's not quite double height right because if we were to go and grab and grab one of these polygons here and give an example so over here and then grab this and duplicate it again so a height of one would put this tile basically like this this is what it means for a height difference of one which we're clearly not in that situation at all right so there's some sort of height difference now you can calculate this because there's you know math that you can do with your tiles based on the angles being a certain amount you could figure out what the difference is and also factoring a certain amount of padding in between that's that's beyond me I don't do that what I do is I place two tiles next to each other so they look good and then look at what the numbers are on unity and being like well there's how much are x and y offset is per row the other trixie bit is that it's every other row that's sort of offset in the x-direction right the y-direction is always going to be the same offset let's say it turns out that it's zero point six units from say the center of this to the center of this one vertically then this one here will be another zero point six so this would be at one point two so your your position in y space is just going to be another you know zero point six or whatever the math ends up being but the x space is going to be a zero offset and offset of zero point five a zero offset and offset is zero point five and on and on and out so placing these gets a little tricky but it's really not that much you just eyeball it it's fine no worries we're gonna do that right now hey cuckoo fan thank you very much for the tip thanks for making us addicted to your forex videos keep them coming I certainly intend to I am loving Aurora 4x so much so let me go and trim this list of hexagons down over here and let's make sure that we're looking straight down over here so I'm gonna grab the second hexagon and I'm going to go ahead and place it tell you what instead of going negatives will go on the right so let's assume looks that looks pretty good the spacing over here let's assume that this hex here is going to be at zero zero zero which it is right zero zero zero excellent perfect and the next one let's assume that this is hex zero point one in fact let's call it that hex zero zero one okay that's it's sort of internal representation this one is hex zero zero we can tell that hex zero one has been offset in the X direction by zero point four five six world units this is going to depend based on the actual physical size of the image that you're using right so it's going to differ based on all of us depending on exactly you know what size graphic you drew in Photoshop or what size cylinder you did here and if you're scaling them up or down or whatever so figured out and then my my what I was calling the Y offset right is 0.778 but right now we're looking straight down so we're not offsetting things in the Y direction we're offsetting them in the Z direction in world space does that matter no we get to choose how we want our camera to face right are we looking down on this map in which case our map is always again basically going to have a Y of zero because it's level it's flat in unity world space Y is your horizontal is your vertical axis right so if you're looking down on a map that's flat then your Y will always be 0 and it just gonna be your X and your Zed the changes alternatively you could flip things up so that your camera is looking forward into sort of a wall of your map in which case it would just be x and y both ways are perfectly fine and legit if you're working in 2d space then you're only working with x and y your Zed is effectively going to be 0 unless you need things in front or behind one another since we're working in 3d and theoretically we want the world to sort of make sense in a normal 3d ish way where your Y is up and down for example then we'll go ahead and accept the fact that our hex at hex sort of index position 0 comma 1 is actually going to be in world space 0 point 4 5 6 comma 0 comma 0 7 7 8 anyway we don't need we don't need to figure that we just eyeball it we're like alright that's good let's make something that'll generate a big map for us so I'm going to create an empty here I'm going to call it something like map and I'm going to create a class and I'm going to call it map mm-hm that works fine so we're going to grab this script over here just add it to our game object over here so this script is just going to be responsible for spamming out a bunch of hexes and position them correctly so let's go ahead and open this see it says there's an interesting core discussion about coordinate systems in the chat right now because here's the interesting thing depending on what game engine you're using or editor you're using different places have different assumptions as to what directions should be now to me to me it oh it does make sense that why is vertical and that because that's on your screen normally you think about it this way right on your screen your screen goes x and y and that sort of naturally makes Z be the depth into the screen right but it's hardly the only way to think about it there's nothing necessarily wrong with assuming that you're looking down on the world and you want x and y or sort of y is your sort of north-south access and X is your east-west as access at which point Z becomes the sort of normal to the surface at that point is that become sort of your height they're all legit you just have to you know sort of pick one and go for it and then then you get into the right-handed versus left-handed coordinate system which gets really confusing like blender uses a different coordinate system than unity which is really annoying which is why when you bring in a graphic from blender into unity you get some weird stuff going on where your hex is if we look here you'll notice my hex is actually have a 90 a negative 90 degree rotation around the X that's because when unity imports blender graphics it has to do a rotation to get everything to make sense which is like weird and annoying but there it is all right one way if you don't like and this is actually a really important thing to do typically when you're working with any 3d model that you bring in from any program but especially if the program has a different set of axes than unity it's really important to not use the model directly because otherwise you get this weird X rotation and you will run into trouble it's actually much better if you create a prefab I'm going to create a prefab called hex and I'm going to grab my hexagon model and put it inside of that hex there we go make sure the position is set to 0 inside of its parent let me let me clear out hex 0 0 and X is 0 1 so now we have this hexagon model inside of its parent hex just for the sake of argument I'm going to go ahead and Center everything the model has the 90-degree rotation but the parent itself doesn't have a rotation it doesn't have a scale or rotation which is great because then everything is sort of set to zero and it's the way it's supposed to work if you ever need if you're bringing your graphic into unity and the graphic that you you know are your your your model happens to be way too big or way too small and you need to scale it then what you can do is you can scale this part which is the actual model but then again leave the parent untouched at the default settings you're going to save yourself tons of trouble so we're going to do is we're going to drag this hex prefab into here so now we have a prefab that is just an empty unity object that can pose the model for us which is great we can organize our project a little bit something like models really there's only going to be one let me go ahead and drag the hexagon file into there I will make this project available to you guys after the fact too and then I'm going to make a new folder for prefabs our projects that can be that big it's not going to be that much of a concern but what the hell so we've got a prefabs we really don't have to touch the models at all the prefabs over here and then I guess we could have another folder for our scripts if we want to keep everything clean although again there won't be very many of those either so we'll move the Maps script into there there we go so we've got a prefab and a map and there we go I can go ahead and just apply this in case it matters clear that out okay so all we have in our game world right now is the camera a directional light and this map game object which is completely empty for simplicity I will Center it it's a good idea for these sorts of things to be centered because you're unlikely to cause yourself further problems down the road if you're creating things inside of a container that is not the the origin point you might get confused as like why things aren't lining up right and then it's like oh it's just that just save yourself some trouble stick things at zero zero zero by default and then you know move them later if you need it okay so let's go and look at our code over here and say this is probably going to reload because I did Ari I did move that file alright let's and Bing in this so this map script it's job is just good spam out a bunch of hexes all over on the screen so to do that it does need to know what our hex prefab is going to be for that we can just do a public game object and we'll do something like call it hex fab poro food oh come on going to be one of those no typing days apparently so if we do this we have this public variable called hex prefab and we go back in unity what's going to be very nice as our map over here is going to have in the inspector a little placeholder for that so we're just going to go ahead and point the prefab to there this is the thing it's going to create many many many many copies of okay and that's what we're going to do right now let's say we want to make a map that is 20 by 20 let's put in some little placeholders here with equals 20 and height equals 20 note that this is a size of the map in terms of number of hex tiles this is not representative of the amount of world space that we're going to take up ie our tiles might be more or less than one unity world unit right there's nothing stopping us from making a tile that is like 10 units wide which is fine in which case having a width of 20 means that a map will be 200 units wide and unity space but that's okay there's no reason not to for simplicity I'm designed something that is supposed to be about one tile wide although with hexes it's a little bit awkward because if we take if we take a look at our hex over here it's actually from point to point here it's a little bit taller than it is wide because you can imagine that this is a circle right and it actually becomes very clear if I just put it in here I don't know if you can see these subtle little lines in the editor box here I can make it a little bit clearer not much clearer but a little bit clearer if I were to go and put in like maybe a cube and let me give it a color let me create a new material here just to make something that's a different color this one is going to be red there we go and the cube is going to get the red vent here real okay there we go so the cube is clearly one unit by one unit right because that's the way it goes but oops none the said the why I just move this so we can see the hex you can see that the hex from point to point at the top is indeed one unit tall but because it's sort of getting clipped on the sides because it's a hex shaped doesn't quite take up one unit of width over there which is fine that's just the way hexes work one thing I haven't mentioned is you can have two variants of hexes you can have one like this and you can have another one like this do you have a flat top text or do you have a pointy top text completely arbitrary what we're about to do here is going to work perfectly no matter which way you do it it's just a question of how you want things to look so and get rid of this cube I also don't need the hex in the game world right now so let's get rid of that let's go back to our code over here so to generate our map it's going to be very simple we can just get a couple of for loops right so for and actually I've shown you guys this before if you type four and then you tap twice in in monodevelop it goes ahead and Auto completes it which is great so we're going to go X is less than width and for tab tab Y is less than hide you to enter we're going to create a copy so we're going to instantiate a hex prefab now this technically is sufficient you could do this it would instantiate the copy the hex prefab and whatever XYZ coordinates are the prefab is sort of set to by default which should be set to zero but we obviously don't want to create all the hexes at point zero we want to give it a position so we need to give it some sort of vector with some sort of positional information let's just go ahead and go like zero zero zero for now we'll come back to it it also needs a rotation and for this we're just going to want the identity quaternion basically we're telling it no rotation so the question is what what will be our coordinates well just the ballpark it right now let's say that the x-coordinate will simply be this x value and the y coordinate or that y coordinate is going to be 0 because we're keeping think flat vertically so it's the Zen that we're going to use are why I realize it's a little bit confusing right maybe there'd be some better way to do it because we're not really doing width and height we're sort of doing north-south NISS east-west nests right and I mean here we could call this loop Zed but it's only confusing the only place it's confusing at all is the fact that our unity world coordinates is going to use this thing we're calling Y which we're also referring to as a height in the Zed which is actually just a depth but you can rename things you can do things but it seems more natural to generally work in X&Y and then you're just translating that x and y transforming in some way to work in unity space so we're going to do that now we're gonna have to do more work about this because this is not this is not going to work right this is not going to do what we want because we know our textiles don't fit in this particular arrangement right so let's go ahead and hit play and see what happens BAM we get a square grid of 20 by 20 tiles exactly what we asked okay that's a good start right that's a good start if we were using square tiles we'd be done we're not using square tiles we're using hexes which means we have to do a little bit of wiggle waggle to get things happy again what we want is we don't want this thing to be up here so this is our hex technically this is hex 0 1 right internally 0 - 1 which actually I should name them when I create them we don't want it to be at position X 0 Z 0 sorry X 0 Z 1 we don't want to be there we want it to be here as discussed so we want the X offset for it an odd numbered row to be 0.45 right so float we have like odd row X offset is equal to this this is how much we offset a row if it's on an odd number or how much we offset by X if we're on an odd numbered row so row 0 doesn't get an offset Row 1 which is what this is is going to get an offset that way and then Row 2 which comes after this is not going to be on set again it'll be lined up with the very first row again right so that's question number one question number two is what the Z offset is which is always going to apply Z offset Zed offset is this amount so right now we're doing is doing for based on our row we're setting Z to be equal to the row number but that's not true we want our Z to be equal to zero point seven six four multiplied by the row number okay so let's do the second part first so right now we're just feeding Y into the said bit but let's take Y multiplied by this Z offset and let's try to run it again see what it looks like now we should get a lot of overlapping stuff we'll should have called it Zed off so it sounds rude so now things are overlapping and squishy right but if I go and move this we can see that yeah that's looking about right right we're still not fixing the X but now the distance along the z axis is looking perfect cool all right let's let's fix the X thank you very much to all the December supporters over at patreon.com slash Quilly team creates and these mic-check supporters we got alexander guettler we've got Marius valve old again disco geek ole a Peter Talgo Julian augur lafawn Steven staggers Michael McClintock we've got kale the quick drazzey on Wes olden boiling Craig more tell a nail Vic strim Phillip nickels Andre Odin doll Niall Neil Blakeley Milner speedy savant valiant cake Fein Aaron Tyson rey del del paso peso bunny hyper dingo and andrew Henninger and thank you everyone who watched shared favorited and subscribed these to these videos really appreciate all your continued support and look forward to continue this awesome project of ours see you next time

Channel: quill18creates

Views: 128,241

Keywords: Unity (game Engine), Game Engine (Software Genre), programming, tutorial, first, person, shooter, first person shooter, fps, howto, how to, beginner, guide, unity, unity 3d, unity 4, physics, blender, 2d, 3d, quill18, quill, multiplayer, hex, tile, civilization, pathfinding, click

Id: td3O1tkbqYQ

Length: 26min 35sec (1595 seconds)

Published: Tue Feb 02 2016