Unity Isometric Board Generator

hello there see willy b here and today i'm going to be showing you guys how to make this isometric tile board generator this generator is supposed to be used while on edit mode so when you're editing your scene this generator is very good and if you were to use this to generate tiles during runtime you might need to do a few adjustments okay so let's start working on our generator the first thing you're going to be needing is the sprites that we're going to be using for this project here i have my isometric tile set already imported i did the style set on my previous video and this style set along with the codes used on this project will be available in the github link down in the description so here as you can see i just changed the sprite mode to multiple the pixels per unit that i use were 33. and i also changed the filter mode to point no filter because this is made in pixel art and i also changed the compression to none so these were the changes that i made in order to have all of these styles right here if we were to drag and drop our tiles inside of our camera we can see how they look like so this will be the base style that we'll be using on our game first we're going to reset its transform and change its name from tiles to only tile and inside of here we're going to create a new folder that we're going to call it our prefabs folder opening it up we can drag and drop our tile and create a new prefab with it we can then just delete this style here what we're going to be doing now is an object that will be generating our board we're going to call this the tile generator and inside of here we're going to create a new component that will be our tile generator script so inside of here on our assets folder we're going to create a new folder that we're going to be calling scripts opening this we can create a new c-sharp script that will be called tile generator we can then just drag and drop the style generator script inside of our tile generator object so we can see here that the script is inside of our game object opening this on visual studio we're not going to use any of this we're just going to ask for the size of our tile so a public vector 2 that we're going to call size and also we're going to ask for a public game object that will be our tile the thing is we're going to be instantiating our prefab in our scene and in order to instantiate it keeping the link between the game object and its original prefab we have to use prefab utilities in order to instantiate this game object because if we just use instantiate it's going to be instantiating the object without the link to the prefab the thing is in order to use prefab utility you need to create an editor script to do that we are going to need an editor folder so here it is very important that you don't misspell this this is going to be our editor opening it up we can then create a new c-sharp script that we're going to be calling tile generator editor and we can open the script and here what we're going to be using is the namespace unity editor and now the base class is no longer going to be mono behavior it's going to be editor okay so inside of here we're going to create a new function that will be called void generate board oh sorry i forgot the semi column here so now that we have this generate board function we need a way to call this function first let's write a simple message here so debug.log generateboard and in order to call this function we're going to create a new button on the inspector because when we use the editor we can also edit the inspector so if we were to save these scripts right here and go back to unity we can see on our tile generator that it's going to be asking us for a tile and a size what we want now is to create a button here that we can press and call this generate board function to create this button what we're going to be using is public override void on inspector gui and inside of here we're going to replace this with draw default inspector okay so now what we're going to do is draw a button on the inspector and whenever we press that button it's going to be calling our generate board function to do that what we're going to be using is if gui layout here dot button and here you can name whatever name you want your button to have in our case it's going to be generate board so if generate board is pressed what we're going to do is we're going to call the generate board function saving this we can head back to unity and check to see if it's working so as you can see there's no button here this is because i forgot to write an important line of the code if we're making a custom editor okay we need to specify what class uses this custom editor so here we're going to say custom editor and this custom editor is type off and here we write the name of the class that we're going to be using so in our case the style generator editor is going to be a custom editor for this class right here so tile generator inside of here we can just write diode generator saving this we can head into unity and here we can see that now it has the generate board button if we were to press this we can see down here that the console exhibits the message generate board so it is working now all we have to do is actually create this function right here what we're going to be using is first we need the current tile generator so here we're going to create a new tile generator that we're going to call tg and this will be the tile generator that is our target so the current tile generator what we're going to do is we're going to loop through tg dot size dot x and then we're going to loop through every column and this time instead of i the variable is going to be j and here instead of length it's going to be tg.size.y and inside of here we're going to be instantiating the prefab tile maintaining its link so prefab utility dot instantiate prefab and here we're going to reference the time so tg dot tile if we were to save this and head into unity we can check to see if the script is working so here we're going to drag and drop our tile and we're going to be setting a size of three by three okay we can then generate our board and here we can see that inside our scene there are new 9 tiles right here so as you can see they were generated on the hierarchy inside of our scene and it would be nice to keep this organized if they were inside of our tile generator because then we can just close this off or get the reference to the styles from the tile generator and vice versa so these styles can get the reference to the tile generator because it's their parent in order to do that in order to generate these styles as the children of the style generator we can delete this head into our code and now instead of just instantiating it we're going to keep a reference to the style that we've just instantiated we're going to call this for new tile in order to do that we need to instantiate this as game object okay so this way we can access new tile dot transform dot set parent and inside of here we need the reference to the current tile generator so tg dot transform so now this new tile is going to be a child of the current tile generator so saving this we can head into unity and check to see if this works if we were to then generate a new board we can see here all of our tiles are inside of our tile generator but if we were to generate a board again you can see now that there are 18 tiles because at no point are we clearing the style generator and of course you can just delete this and generate the board again and our tiles will be 9 again and not 18 anymore but if every time you're going to be generating a new board you have to come here and delete these styles then it's better to have a clear board function that is called before we generate the new board to do that because we now have a link between the tiles that were generated and the generator it's going to be pretty simple so here we're going to create a void clear board and we'll be asking for a tile generator that will be our tg and inside of here we're going to go through every child of tg so tg.transform.childcount -1 and while this is greater or equal to zero i is going to be decreasing okay so we're going through every child of tg what we have to do is to destroy these children okay so destroy immediate and it has to be immediate because we're doing this on the editor and not during run time so it's destroy immediate and here it's going to be dot transform dot get child and here we have to pass the index of the child and this is going to be i and this right here is going to be destroying the transform of the child because this function returns to us the transform of the child to fix this we just need to call the game object okay we can call this right after we get dg so clear board and this is going to be clearing tg we can save this heading to unity and check to see if our generate board function is working so here we've generated our nine tiles and if we were to generate the board again here we have our nine tiles if we were to change the size of the board we can generate a new tile board that now has only four tiles okay let's go back to three by three we can generate it and it's working fine another thing we can do is we can create a new button we can copy this paste it over here and we can replace generate with clear and now all we have to do is we have to send the reference to the tire generator that is our target saving this we can see now that there is a clear board button that clears our board of every tile inside of it so we can generate again now all we got to do is we need to worry about the position of these styles because currently they're all stacked on top of each other so if we were to generate them they would be all on the same point to change this new tile position we just need to say new tile dot transform dot position is going to be equal to a new vector 3 that will be 0 0 0 for now we're not passing any values here on our vector 3. and before we pass these values we need to understand how the position on an isometric grid works the first thing we need to know is that unity to d deals mainly with two axes the x and the y and they are positioned as such we are creating a board of tiles that will be positioned according to their own axes that will be calling i and j we can see then that every tile in our board will have a position on the board that we are going to call i and j and it will also have a position as an object on unity's 2d plane that will be calling x and y what we're interested in is the distance between two points on the isometric grid in order to position them correctly and we'll be considering that we know their i and j position if we take a look at our isometric tile and here we'll only be considering the top part and we'll be ignoring the sides of it we can see that it has a width that we'll be calling w and a height that we'll be calling h this width and height can be interpreted as vectors on the x and y axis so here we'll be using the vector w to represent the width on the x direction and the vector h to represent the height of our tile on the y axis now considering the distance between two points on the board that have the same j we can clearly see the influence that the i position will have on the tile here it will be negative because this is going in the opposite direction of the h vector we can do the same for j and c the distance between two points when the i is the same for both of them and the only influence on their positioning is their j position this time both of these vectors will be negative because both of them are going on opposite directions from the h and the w vectors so the distance between two random tiles that we'll be calling p1 and p2 according to their x and y position on unity can be expressed by this equation now the distance between two random tiles can be described as such we can then rearrange this expression so that we can finally get the influence of the i and j on the x and y position of our tile inside of unity since we're not just simply trying to get the distance between two points on the isometric board we're trying to get their position from the origin where i and j are going to be equal to zero and we can also consider that x and d y position of the origin is going to be 0 as well we can simplify this expression that we have right here so we'll be left with this expression in order to get the x and y position of a tile on the 2d plane on unity from their i and j position on the board we can simply use this equation and get their position now let's go back to the code in order to implement this okay now that we can understand how the position on an isometric grid works what we're going to be doing is here for our x-axis this is going to be i minus j okay and this is going to be multiplied by half the width of our tile the thing is sometimes i prefer to manually set the offset that the tile is supposed to have because then i can have more control on how my board is going to be looking like and to have a manual value that i can set here as the offset what i'm going to do is here on our tile generator class i'm going to be asking for a public vector 2 that will be our offset and this is just to have more control on the position of the tile inside of here i'm going to be multiplying this by the tg dot offset dot x so the offset for the x axis and inside of here it's going to be minus i plus j multiplied by tg dot offset dot y we can then save all of our scripts and head into unity we can now see on our tile generator that it asks us for an offset i'm going to start with an offset of one and a half and normally what we're going to have here is a y value that is half the size of the x value and you could use only one float this way you would ask only for one value and for instance it could be the x offset and to work with the y offset you would just divide your x offset but i prefer to have these two values because then i have more control over how it looks because again you can then customize it more if we were to generate a board with these values we can see that it's almost correct and because it's almost correct i could select here a tile and work with it until i get an approximation of the position that i want so i can see here that the position could be about 0.97 and minus 0.485 so these will be the values that i'll pass on the tile generator so 0.97 and 0.485 the reason that for me most of the time the size of the tile doesn't work is because i normally have the tiles overlaying each other by maybe one pixel or another so generating the board with this custom offset we can see that it looks quite nice and quite better than the other value another thing is i'm going to be changing the background color here so maybe a light bluish color and if we were to then just change the position of the styles and we were to generate the board again you see that it's offset with the tile generator transform this happens because well here we're using transform.position if we want the board to always follow the tile generator we can change this to local position now whenever we generate the board we can see here that it is aligned with archive generator okay now if we were to press play here we can see that now it looks like quite a mess this happens because we're not setting any order in the layer and we're also not setting any z order according to the y position of these styles to change this we're going to be positioning our tiles according to their z position and if we were to look at the camera on unity we can see that the position of the camera is at -10 and whatever is closer to the camera is going to appear in front of the other object so if we were to say that this style right here has a position of -9 you can see that it is in front of our camera and if we were to say that the tile is at -11 we cannot see it anymore on our camera because well it's behind our camera so the camera can see it so if we're going to be using z to order all of our tiles what we're going to need is that this z position doesn't exceed -10 and for the tiles at the front to have a z position that is closer to the cameras than the tiles at the back we can go back to our code and here what we're going to be doing is we're going to get a number between one and zero and this is important because this is kind of a background layer so it's going to be behind most of our objects and if most of our objects is going to have a z position of 0 then this background should be behind this objects so it should have a z position between 1 and 0 okay to have that we're going to be using minus i plus j okay so this is going to be the sum of the column and the row of our tile here and this is going to be divided by pg dot size dot x plus tg dot size dot y because i plus j can never exceed the max size of x and the max size of y then this number right here is going to be a number between 0 and minus 1. in order to get a number between 1 and 0 from this we just need to say that this is going to be subtracting from one saving this we can head into unity and over here when we generate a new board and we hit play we can see that all of our tiles are correctly ordered and if we were to check their position we can see that the first time is going to have a z position of one and the last one here has a z position of point 43 if we were to then get an object here and place it on the scene it's going to be in front of all of these tiles okay so here we have our board and since this still has the link to our prefab we can then use our prefab with different tiles over here the last thing we can do in order to organize this better is just to name these tiles according to their position so instead of having all of our tiles be named taiyo they are going to be named tile and their position so here new tile dot name is going to be plus equal to a space here plus the i position plus a separator plus the j position okay saving this we head into unity and check to see if this works so here we have all of our tiles named just style and if we were to then generate a board now we have all of our tiles followed by their position and we can have fun making boards of different sizes so this was it for today guys if you found this video helpful please consider leaving a like if you have any questions leave them down the comments below and for more videos such as this one please consider subscribing thank you so much for watching bye

Channel: SilverlyBee

Views: 400

Keywords: tutorial, isometric pixel art, pixel art for games, pixel art tileset, tileset, isometric tileset, isometric pixel art tileset, isometric tutorial, unity, unity tutorial, prefab utility, unity board, boards

Id: kDWvlAB0a0Q

Length: 24min 51sec (1491 seconds)

Published: Tue Sep 14 2021