Making an Isometric Tilemap in 2022

a few months ago i made a tutorial series on grid based movement on an isometric map now in an interest of saving time i skipped a step of creating the actual project and the tile map and one of the most common questions i get ever since then is how do you make the tile map how do you get the sorting rights and how do you do all that all that good stuff so that's what this video is all about is those are for those people who are struggling in the very beginning and it's just to wrap up that tutorial finally so yeah let's jump into that so first things first before we have a isometric tile map we need an isometric tile so feel free to skip ahead by the way if you've already had this most people probably locked up tutorials on this but i want to cover everything if we can so let's make a new canvas of like 64 by 64. um not majorly important we're going to make a tile that is ahead for 2 by 32 size so it's not overly complicated we're going to in i'm using spray but you can use any tool you really want um the rules for isometric is generally generally this isn't locked in but you go down by two i already messed up you go down by two every time let me find where was it like so so it's two across one down is the rule for isometric tiles usually technically you can do what you want as long as everything's consistent it would work but this is the classic sizing that you want to do and that's really all you need to know of what we need so where am i going so we're going to go down that way and we're going to go back up again and then we're going back up to our guy here boom see super difficult i know i know super typical for the bottom part of the tile we want the the outline to kind of be on the darker side of the of the cube so typically the light is usually shining on the right hand side so we're going to move it over to the left and we're going to draw it all the way down to the bottom why not and then we'll do it like this and i want to reiterate as well that i am not an artist this is just how i do it on this side i'm gonna go all the way to the top not look to the top super and now we have a outline for our tile sorted out um we can give that a few colors here so we wanna imagine how the light is gonna be shown so we so the brightest color on top a slightly darker color on the side here and then the darkest here and there is your super duper tile wonderful um let's make it a little bit fancier though as well because we're gonna for the sake of the tubes i'm just gonna do some a little bit of drawing here [Music] [Music] [Music] do a dark overhang here and actually i just realized you want you kind of want your outlines well it depends on on the style you're going for but i like that my outlines to be the same on the top because that way they don't show when you when you stick all the tiles beside each other so we're going to get rid of all the all the top outline at least just like that and that is a little grass tile that we're going to use okay and we can even go a little bit further we can do a little bit of uh maybe a little bit of grass or something laying around it um okay so here that's that's our tile sword um that's as well do maybe one more i'm just gonna fast forward to one more okay there's not a very nice water tile that should do us for what we need to do so very quickly now we're just going to export this as a sprite sheet into our unity project now with our tiles drawn we can move on to our unity project and get everything set up nicely so first of all we're going to click on our exported spreadsheet and we're going to do some changes in the inspector here so first we got to change it to multiple because of multiple images i like to set the pixels to 22 uh best picks putting into the size of the splice that you're using uh we're gonna go from filter mode to point no filter i don't know what that does if i'm being honest i don't know what that does and then i am doing uh compression to none we're going to apply that and we're going to go into our sprite editor and here all we have to do is we go to slice and we can do an automatic slice which will give us our boxes that we want for images but what we want to do here is we want to move this technically you don't actually have to do this but i think it does look a lot nicer within your palace you'll see what i mean in a moment um i'm going to do it from we're going to do a custom pivot point we're going to go from x is 0.5 and then we're going to do 7 5 on the y y-axis and over here as well the same one 0.5 and 7.5 was just 0.75 i'm going to apply those changes and that is our images our sprite sheet done however we want it now to create our tile map we're going to right click to the object map i'm going to create an isometric z as y tile map okay and we're going to leave this pretty much alone except the only thing i want to change is is the mode instead of chunk i want to change the individual that means it's going to kind of sort all of our tiles individually instead of um in one big lump just it's it's better when you have if you want to add height or props in into your uh your scene well now in our scene view if we click on time up we see our grid up here and we can click on this button here this opens up our palace window and our palette window is basically like a paintbrush that we can use for drawing out our maps so we can go create new tile map and in grid we're going to say isometric y z um let's call it uh tile and now there's nothing i need to change here but depending on your tile you may need to change the cell size y this is tends to be the so the top of your tiles at the entire type at the top of it it is the height of that divided by the width um because i am uh my height is 16 by and and the width is 32 pixels i don't need to change it because it's 0.5 but if you have a funny shaped tile you might need to pay attention to this but otherwise i don't need to do anything here i can just create it let's create here a pilot folder and now to create add our tiles to our palette we just need to click on our image and we're just going to drag it in like so and that will create a tile asset for our tile and boom we have a title there and we can do the same for our click on the wrong image we can do the same for our water tile okay now there is one detail i intentionally missed out i'm going to show you now i'm just going to take my palette off the screen but it's still it's still there is that when i start drawing there uh extremely drawing actually so i just click on the title i want and then it appears in here see and starts drawing so when i start drawing it looks great right now right it looks like it's all working but a lot of people experience an issue then when you start adding in z's let me just fill this out so when i come in here and i set my z position to two and i start drawing it should be above my tire map but it doesn't it doesn't seem to be working correctly it's actually going underneath us strangely enough and that is because you need to set a custom source access on your project settings and this is a detail that most people seem to be missing when they're asking me about this stuff so we're going to go to custom access y1 is fine and said according to unity's documentation the best value here is zero minus 0.26 and you know i don't know why there is some fancy match behind us and i said they had some kind of formula there to calculate this um but you know for me this works so i don't really care what that formula is but when i enable that and go now suddenly our tiles are working nicely and correct and that is kind of what you need to know for creating a a tile map um let's just take it a moment to maybe make something that looks a little bit nicer than all of this so i'm just gonna fast forward for a second one other thing i started doing when i on my own maps is that i actually start setting my floor tiles up at z axis one instead of zero um this is for our water tiles so um i just think it adds a nice little layer of uh of depth to the map so if i just created query square here and then i will kind of remove a little square i don't know i wanted the square i'll go down square square see and then i can set this to zero click on my water tile then in here i can put a little a little like trough i just think that looks kind of nice it adds a nice little layer of depth to the map that otherwise wouldn't have been there beforehand what i used to do is i used to just have the mods him level and then so there was my water uh and this just looks so much nicer so so that's a little tip if you have maybe water or lava put it in one layer lower and it just it adds a little bit of niceness to it it looks it looks pretty good i think and there it is a lovely little time map built entirely within unity um now i'm not done there's one more thing i want to show you guys before we finish this tutorial but for this if you just want to use unity this is all you need and that is all i want to talk about today short and sweet i know i didn't want to talk about tiled a little bit and i was going to show it show this off and import a map into unity so you can see that as well but when i imported it for some reason the import sends it didn't it didn't like my titles and i can't they all got messed up and i don't know why so i'm gonna have to look into that and probably make kyle recep video if people are interested let me know if he's chao at all and it is a cool title it is a cool tool uh i don't know why it's not working right now um i've used it before and it was fine so i'm not sure what's going on right now but i'll figure it out and come back if if it doesn't trust um but yeah that's it i know normally i cover things that are a bit more complicated than than this um and most you people watching already past this point and you just don't care so thanks for watching if you did keep watching next up is going to be a tutorial on rpg systems for a character so like attributes and stats and stuff and leveling and stuff like that and then that is going to lead into a tone based mechanics that we're going to do another tutorial on and after that i don't know what after that but those two things are coming up next so yeah so if you want to see that do subscribe right now i'm at 998 subscribers i'm gonna get a little bit ahead of myself and say thank you for a thousand and assume that by the time you're watching this i'm on a thousand hopefully course i'm probably about to lose all everyone but yeah just thanks very much and i'll see you again next time cheers

Channel: Lawless Games

Views: 46,758

Keywords: devlog, game development, indie game, unity, game dev, gamedev, indie game devlog, indie dev, dev log, indie devlog, indie game dev, game devlog, indie gamedev, indie devblog, tactics devlog, game design, gaming, indiedev, indie games, programming, tactical rpg, srpg, isometric, isometric map, isometric games, unity tilemap, unity isometric tilemap, scriptable objects, unity scriptable objects, character systems, rpg characters, grid based movement, ai, enemy ai, turn based ai

Id: ci1ba7jVLFw

Length: 13min 13sec (793 seconds)

Published: Tue Jun 28 2022