How to make a hexagon grid - Unreal Engine 5 Tutorial

in this video I'm going to be showing you how you can make this pattern this hackcon pattern uh procedurally so we make the logic that actually generates this pattern uh this is done in blueprints so uh and you'll be able to have these types of controls that kind of show off uh that allow you to make kind of the basics for whatever game that you want to make uh this is a pretty popular pattern for all sorts of games uh turn-based games and a lot of logic kind of revolves around this hexagonal pattern so we're going to go ahead and we're going to learn we're going to understand kind of the logic behind this like how do we do tiling like this what is important uh to make sure when you're designing tiles like these for your games uh and then uh in the end uh you should be able to uh build your own and um uh and yeah and I hope hope you really enjoy it so uh now that we can begin let's jump into blender and let's build our first tile so let's make uh a hexagon tile or hex tile so I've opened up blender and the reason why I'm making it uh even though it's a pretty simple shape is I want to make sure that all of the uh all of the sizes and all of the numbers are accurate because uh it's going to it's going to matter a lot when we do the tiling that uh that everything is is accurate so this is just the default blender scene I'm going to get rid of the default Cube here I'm going to go and add and I'm adding a cylinder so uh here at the bottom left I have all of the properties here the vertices uh for our hexagon is going to have six vertices uh and the radius of the uh of what we're doing uh we're going to keep that at one but this is probably the the most important property that we uh that we need to make sure that we keep track of it's the radius because that's going to be the key number that we use in in tiling uh I'm going to make the depth I'm going to make it a little bit smaller so the depth is going to be 0.2 and then I'm going to move it on the Y AIS because yeah it's the y- axis I'm going to move it up by 0.1 so nope it's not the y- axis we are in we're not in unreal so I'm going to move it up on the z z axis by 0.1 uh and what we're going to end up with is is a hexagon uh and we have it kind of sitting nicely here on the on the ground plane which is just uh nicer and what you see when I'm looking at it is and is that the hexagon is filling out the space on the grid uh here on the sides here on the y axis but it's not doing it on the x axis and we'll we'll talk a little bit about uh this later so the last thing that I'm going to do is just to make it a little bit nicer I'm going to select all of these edges here here at the top uh and I'm going to add a l a little bit of a bevel uh something like this and this is just to make it look uh look a little bit nicer so now I've created my my hexagon my hexagon tile so the next thing is going to be uh we're just going to export this out and import this into unreal uh but before we do that I want to jump in and talk a little bit about the hexagon shape and how uh we're going to actually tile it over um uh yeah create a grid of the hexagons so let's take a look at the hexagon this is a regular hexagon which means that it has all of the sides are the same length and it means that it has six sites uh some of the properties or the anatomy of a hexagon is uh it's pretty interesting uh we have a radius like we we looked at in the uh when we created the hexagon and blender so the radius is actually uh sometimes called size uh and this is the distance from the center and to this corner here uh the long corner here uh and because of of uh because this is a regular hexagon we know that the length of the site here is the same as the radius so that gives us the information about how long each side is and then another property which is uh a little bit more interesting which is the height and this is the distance here on on this this area here from the flat Parts all the way all the way down here and uh if we take a look at the hexagon that we created earlier and give us give these some numbers uh the size or the radius is one uh the width that means that the width is two because we we just take the the size or the radius and multiply it by two the height is 1732 or uh the formula for calculating this is we take the square root of three and we multiply it by the size uh or the radius and uh I'm not quite sure why this is the case so if anyone knows and cares to explain I would love to hear it in the comments uh so this gives us the height of the whole uh of the whole hexagon so you can see that the width of it is two but the height is a little bit shorter and then the last uh property uh that sometimes talked about is the perimeter and the perimeter because we know this is a regular hexagon this is just the number of sides uh times the size so this gives us six but what we wanted to do is we wanted to title this so with this information uh we can create a tiling uh algorithm or we can create a tiling uh program so the first thing that we do is we shift the newly created tile we start with a tile at the original kind of original position or some known position and to do the tiling we shift on the x axis or to the side uh we shift it by 75% of the width so we don't want to do uh shift it all the way because then this corner here would be here and uh that's not going to work for us but then we also shift it up by we take the height we shift It Up by half of the height so we calculate the height which is the sare root of 3 * the size and we divide it by two because we just want to shift it up by half of it uh and then we just continue we we shift it again by uh 1.5 or 75% of the width which gives us uh three and then we continue so we can continue doing a a tile uh kind of strip like this uh by just following this uh kind of this algorithm but our goal pattern is this and we pretty much created uh whatever we what we need to do that so let's jump into unreal and take a look at how we implement this so now that we're in unreal uh I've imported my uh hexagon here into the engine and I've given it a material so uh you can see here on the grid if I go I'm in the static mesh editor right now so if I go and take a look at the top view uh doesn't actually show me the wireframe but or the grid so let's go back to perspective view okay so we can see it here so uh again just like in blender we have all of the sizes correct so uh the long side here is filling out the uh the grid and the the short side is not so uh basically here uh I have the hexagon in here so what we're going to be building is uh going to have this Behavior here so I've already created the uh created the actor here but we're going to recreate it but I just wanted to show you how it's going to work so we're making uh logic that's going to allow us to uh create this kind of hexagon hexagonal strip uh before we actually do the grid itself so as you can see I'm just modifying a property here called Rose and uh that's going from uh probably shouldn't be Rose but there's a property here that I'm modifying so for any any number here that I'm I'm modifying it's going to give us like one more piece uh or one more row once we actually go up and and do to the uh to the full grid uh so this is uh this is what we're going to be building so uh let's jump in and create a new actor so I'm going to make a blueprint class and make an actor out of it and I'm going to call it BP git logic new because we this is a new one so jumping into the actor uh what we're going to do is we're first we're going to do a little bit of setup we're adding a static mesh instance uh an instant static mesh here so this is going to allow us to kind of stamp static meses based on uh the locations that we give it so uh I'm going to find our Hax hexagon tile here and you'll notice that nothing happened here in the viewport and this is because the uh we need to add an instance to it right now this is just an instant static mess with no in instances uh so we need to do that so when I'm working on something like this I like to work in the construction script especially for for stuff that's kind of procedural or generated and uh stuff like that because uh that anytime that I I compile I don't need to press play or simulate or anything like that this just happens uh automatically when the object is kind of refreshed so I'm getting uh a reference here to the instance static mes and I'm going to do add instance so this is going to give me an it's going to add an instance it wants an instance transform so I'm just going to make an empty transform here and now that I compile you'll see that I have my mesh and it's in the right right size and if I drag this here into my seam uh you'll see that we have one of them what so the next step here is uh we're going to make we're going to create a loop and we're going to start making it uh making a tile uh I'm going to create a for Loop so this is going to run so the for Loop is going to run from an index we can start at zero for example to an index we can start and then we and this is just going to control how many tiles we want uh to show up so if we say that we want four uh this is actually going to give us five so I'm going to start the first index at one uh now that I've done this this is going to create four instances uh but what's going to happen is uh they're all going to be placed in the same location because I'm adding them all at the same location so now let's start implementing some of our uh some of the details in our algorithm or in our uh in our log IC I'm going to make a float uh here and this is going to be radius so the radius is 100 so even though we set the radius to one in blender once we exported this in the coordinate system in unreal uh makes it so that the size is 100 so I'm going into the top view so you can just middle Mouse drag and you can see that uh the radius here is 100 so our radius now is is 100 so uh just like we did in the example before we're going to multiply this by two to get the width so make this big again so we're going to multiply this by two to make this big and then we're going to multiply that by 75% so we don't want this to go all the way we just want this to go uh 75% of the way and we are going to put this into the Y AIS because the on the y- axis if we take a look at the coordinate system here uh we want to be tiling this from the long sides so now oops so now what's going to happen is uh it's probably just going to shift a little bit yep here we go but it's not actually tiling and the reason for that is that we then need to take this number and we need to multiply this number with the index so that means that anytime this runs uh we shift it by so on index one it's going to be moved by uh it's going to be multiplied by one and then two and then three and so forth so we pl plug this in here and what we're going to see now once I compile is we have uh the grid correctly working even though this doesn't really look look correct so uh we can go ahead now and we can just right click here on the last index and we can do promote to variable and I'm going to call this uh number on y so it's not on the screen right now so it's here I'm going to add the click on the eye button here which makes this instance editable so this allows me to go in here and do what I I showed earlier I can go in and I can just slide this to make this uh kind of make this go up and up and down so the problem here is uh we're not doing the shift up so we're we're actually just moving it to the side so this piece here every other piece is supposed to be shift uh it should shift up so let's go ahead and Implement that logic uh so now we're going to do do something pretty cool so first we need to figure out what is every other uh every other tile so the way that I like to do that is I'm going to use a modulo operator and I'm going to say uh if the modulo modulo 2 so I would also love to hear a good explanation on why this works I read this online so I can't explain why this works the way it does but I know that if I check that a module 2 of an integer number if it equals one then this is a round number uh so if I if I change it like this and I say only uh do only do the logic when the number is round uh if I compile this you can see now it's skipping skipping one so now we have a a space between them so that's not really really what we want to do what we want to do is we want to say that on every other one of them we want to shift them on the xaxis so I'm going to make a new note here uh and I'm going to actually make a new uh locate new Vector make Vector uh like so and I'm going to uh recombine these here so uh I can use the the uh because this is a Boolean value I can use something called select I'm going to do a SE select Vector so the select Vector is going to take the the number that I uh the Boolean value is this even or is this false and it's going to alternate between entry a and entry B based on that so I'm going to use the result of this uh and I'm going to plug it here into the location uh so if the number is even we're going to use our uh original value which was the the Y AIS was here and the x-axis is zero so we should be still seeing the didn't plug it into yeah so we don't have the execution not so this goes in here uh so we're getting every other one here so now we just make we need to make the transform or make the vector uh that's going to be the same one or the yeah the the same one but but it's going to be shifted on the on the x-axis so the Y value stays the same but now uh we implement the second part of our uh of our algorithm or second part of our logic and we do uh we take the radius that we had here I'm just going to duplicate it we take the radius we multiply the radius I'm going to do multiply we multiply it by the square root of three so here we go and we take the square root of three and we divide it by and that's going to give us the height the full height of it we're going to divide that by two because we only want half of it so here now as it's getting a little bit dirty for us now we should be able to uh plug this into uh into the x value and uh now it looks like it's starting to behave the way that we want it so now that I uh move it up and down you you can see that we've created basically recreated this single grid line of uh of tiles so uh now we pretty much have everything that we everything that we need we have the math behind this so now all we have to do is we need to uh adjust the logic a little bit to make it so that it uh we shift it up so that it actually forms a grid and not just a strip so let's take a look at how we do that all right so let's make a tile on the other axis as well and finish our grid so I'm going to make it uh just as straightforward as possible the the code is not going to be very clean uh so you can easily clean it up but I'm just going to try to make sure that you follow the uh the train of thought so we have the height here if you remember from before uh we made the height by taking the radius and we multiply it by the square root of three and then we divided it by two so what we need to happen now is we need to shift the whole thing up by uh or on the x axis in our our scenario we need to shift everything by the height so I'm going to take the height here and I'm going to copy it and I'm going to paste it over here so this is where uh it would be pretty easy just to save this as a variable but uh uh I'm going to say height here uh and now that I have a copy of my height I'm going to add another for Loop and I'm going to say that for uh before we do anything uh we're going to we're going to have like this this is what we call nested nested Loops so these nested Loops we're first going to do one Loop here and while this one does one this one is going to run all of their uh uh like all of their Loops so this Loop is going to be doing the x axis while this one is going to be doing the y- axis so I'm hard coding the numbers here to start with so all we have to do now is instead of saying uh where we were doing the uh uh the coordinate here we had the x value just hardcoded at either zero or we had it that's not supposed to be here uh had it hardcoded by on zero or we had it shifted by half of the height so all we have to do now is in our external Loop or The Loop that is supposed to move us up on the x-axis uh we take the height the full height and we multiply the full height with the index so this is going to be uh one in the beginning and then the next time that we running this is going to be two so if we plug this into the into the height into the x value here and compile we can see now that the every other tile is being placed oops let's slow down the camera a little bit Yeah so we can see that every other tile is now being placed in the correct spot and that's because we've dealt with the the case on the uh on the even numbers here so uh and now we just repeat the same thing we have the logic here this is the half step pushup so let's copy this again and again this could be made much much more beautiful uh so we're going to take the height we're going to multiply the height by the index on the on the xaxis the outer uh the outer loop and we're going to add that to uh our offset so our we basically we're going to take the full offset and then we're going to add the uh uh kind of the half offset and we plug this in here so now that we compile now we we pretty much have our grid so uh our hexagon grid so all we have to do now is we right click on the Outer Loop to promote the variable and we do uh number on y uh number on X uh compile this make it instance edit editable again and now that we go in here and select it again you can see that we can uh if we do number on X you can see that it goes on the uh grow on the x- axis and if you do number on y you can see that it grows on the y axis so this is uh this is pretty much kind of the basics of it so now you should be able to uh make a grid that is as big as you want uh it's pretty efficient when it comes to rendering because these are this is an instant mesh uh so uh uh so yeah so that's pretty much what I what I wanted to show uh you on uh of the basics of this I want to make a couple of more tutorials related to this uh and actually add things like how do you click on it how do you highlight them how do you animate them in h and even go as far as making them store state so that uh you can you you can have them remember you can make a save game and all of that stuff but it's good to start with the basics so uh if you have any uh any feedback or any comments about uh what you want to see next uh if you have any explanations about some of the math stuff that I'm not clear about that definitely leave a comment uh and uh and yeah and hopefully I can follow this up with uh with more videos that are based on this these kind of hexagon uh this hexagon pattern because this is pretty cool and you can make some really really interesting things with it uh so until next time um thank you e

Channel: Gisli's game development channel

Views: 991

Keywords:

Id: vSevINGWtEc

Length: 22min 26sec (1346 seconds)

Published: Wed May 08 2024