Making an Isometric Tilemap with Elevations and Colliders in UNITY

today I'm going to be showing you how to make an isometric level using unity style map and the end result will be something like this of course you can design it to however you like you probably have better designing skills than me but and then in the next video we're gonna be actually moving the player by clicking on a tile or clicking in somewhere around the tile map and then the character will be moving to that position and so now we have our 2d game and then we can go to the asset store and actually get some isometric tiles to use in our game so then let's search for isometric tiles and then I will be using a free version of an asset called isometric blocks it's very cool asset and it's for free so just click import to import all of these assets if you have your own isometric tiles you can use those too and then once this pops up we click import to import the whole package and once it's finally done downloading let's go back to our scene and we have our assets down here in our assets devil's workshop strange name and then we go to our low poly pixel folder and then textures and then we have a bunch of different kind of tile sets so if we click the first folder we have the normal isometric tiles and if you click the other folder you have different kind of tiles and you can just kind of see which ones fit your game best but for now I'm just gonna use the ones in the first folder and so I'm going to be making a tile palette so if we go to window 2d and tile palette this will allow us to draw the tiles to our scene or game and so we actually have to create a new palette so let's create a new palette and let's call it isometric for now and then we have our grid we don't want it rectangle since that's just a normal 2d game without an isometric view we want it to be isometric or isometric X as Y and so I'm gonna be using the isometric X as Y and that basically means that if we change the Z position as our tile it looks as if it's going up or down so we can make it look like we have elevated surfaces just by moving our Z position of each tile so let's select that and then let's just select automatic so it will be an automatic cell size if you want to do it manually you can put in the x and y values for your tiles but I'm just gonna be putting it automatic for this tutorial and then we just click create and I'm going to go to back to my assets folder and I'm going to create a new folder and I'm just gonna call it palettes so we can just save all of our palettes in that folder now we actually have to put tiles in the palette so you can select any tiles you want I'm just going to select this one and I'm gonna select a crate with control and clicking so I can select multiple tiles at a time and then I will select this tile over here as well and so we want to change a couple of settings on the texture import settings on the right first we have to make sure it's in sprite mode and then we have a single sprite so one sprite and then the pixels per unit is very important so this is how many pixels per unit or pixels per meter there is and usually for isometric tiles you want to set this to the width of your tile so in the case of these tiles our width is 1024 so we put one zero to four here for these tiles specifically I'm going to be putting max size to 64 and this basically compresses the tiles so it's lower quality and I'm doing that because if you don't do that these tiles specifically look very jarring when they're not compressed they look too good that it kind of hurts your eyes so I compressed it to 64 and then I just clicked apply and then once we have all those tiles we can select them they're already selected and we can drag them and drop them into the tile palette and then in this folder we want to right click create new folder and let's call it bitmap and so unity will convert these tiles into a bitmap format and that's what it uses for the tiles and so see the rest it looks a little blurry but I'm just gonna increase the size so you can see if I put the size at 2048 and I click apply it looks really nice but it looks too when you put them together it's just a personal preference you can change around the values I'm just gonna be putting it 264 I kind of like that like that blurry look and we actually have to have a grid to draw on so on our hierarchy on the Left we can right click create 2d objects and we can create a tile map and let's actually choose down here the isometric X as Y tile map and so it makes that tile map for us let's actually put the game scene let's drag it to the side so we can see how it looks in the game and I'm gonna change the free aspect to sixteen by nine which is what most games run on and so now we're in our grid and we have a tile map you can add multiple tile maps to a grid so now we can just select any tile we want I'm going to select this one we can select the paintbrush you can also press B and now you can paint on your tile wherever you want so there's a couple issues that I'm seeing right off the bat the first one is that the tiles are looking separated and you can ask you actually change that in the grid itself so if you click on the grid object there's a cell gap so you can actually change the the distance between the cells and we can actually close the X distance by putting it to point 1 negative 0.1 and now it looks much tighter together and once again this may vary for per your tile so you have to kind of figure out what works best for you and then another thing is that the tiles are not in the center of the square they're kind of at the top and so we can change that in the actual tile map game object so if you click on the tile map game object there's a tile anchor and it's saying it's at 0.5 and 0.5 of x + y so we change the X to 0 and we change the Y to 0 it'll orient those tiles right where they're supposed to go in the middle so I'm going to select this paint bucket tool and select a big area that I want to draw and now I want to create some sort of border around this I'm going to be choosing this cobblestone tile I'm not sure what it is exactly but for this we want it to be elevated on top of this one so we're gonna make a new tile map just for the different elevation so we can click on the grid we can right click to the object tile map and we can actually rename this tile map elevation so if you have multiple levels of elevation you're gonna want to make a tile map for each level so then you can actually change the properties of this tile map without affecting your ground or the other elevation so this is the second floor if you'd call it that we can select our cobblestone and start drawing on on the map so we can just put it at the border and right now it looks really funky so one thing is that the sprite so this is how it's supposed to look like but if you take that away it's being cut off by the one next to it and that's because it's not accurately determining which order to render them in and that's because we actually have to set that in our settings so we go to edit project settings then we go to graphics there's a transparency sort access so this is the access that it will be sorted on so right now we're not even using the z-axis since this is a 2-d game we're using the x and y so this is not we're not using the z-axis at all we're just using the x and y and so we want to sort it based on the y axis so the closer it is to the bottom it will appear more in front of the other tiles that are to the back of it so we want to sort by the y axis so we just select the y axis down here and we enter in a 1 and then another thing that we want to do is check the transparency sort mode we want to put that to custom access and then we can close that setting but you see we we still have that problem and it's because in currently in the tile map render we have the mode set to chunk and so unity uses chung to basically reduce the performance cost of a tile map and so it basically takes all the tiles and renders them in one go it batches them up as one large block however that means that it does not sort the tiles correctly sometimes but there's actually a pretty easy fix for that so one way to do it is that in our elevation in our mode we just check the individual and so now you see that once we changed the mode to individual it does not cut off the other blocks but then this is not very good performance wise but unity recommends we put individual mode while we're editing the tiles and the game but when we're actually going to build the game they recommend switching it back to chunk and then putting the the tiles in a sprite atlas which basically unifies several textures into one combined texture and so unity calls this single texture and only does one draw call instead of having to check each texture and doing multiple draw calls but I'm just going to be using individual for now and so you can see that we're gonna we're having this problem again where it's not central in the in the box itself so we can just go to the tile anchor for the elevation and put it to zero zero and now it aligns perfectly with the box and then you see we're still having a weird issue here this one just suddenly cuts off out of nowhere and that's because unities having difficulty determining which one to render since they're in the same place it doesn't know which one to render first so we can actually change these Z access for our tile map so if we actually move our Z upwards it will appear elevated which is really cool that's the isometric X as Y that we chose and now it looks like it is a wall another thing that we can do is that if we control Z we can actually change the sorting layer so we can change it to another layer that we want that's higher on the list so on a sorting layer you would add in a new layer called maybe test and that since test is above the default layer which is what the other tile map uses then we can just use test and it will render above the other layer we can also just use the default layer and choose a higher order so maybe we can choose one and since it's higher on the list it will be rendered first so now we have kind of a wall and so this is cool and all but what if we want to add in colliders so it's actually really simple unity has a tile map Collider that they provide so we want to add in colliders to both the ground and the walls so on the ground on a tile map we can go to add a component and then tile map Collider 2d and you can see we have a bunch of colliders now in place for our ground but this doesn't look very efficient so unity also has a composite Collider 2d and it takes all those colliders and puts them into one and to do that we have to go to our tile map Collider 2d and we just press used by composite and so now it'll put all those colliders into one so we can save performance and now we want to do the same thing for the walls so for the elevation I'm going at in a composite Collider 2d and also a tilemap Collider 2d and then for the tile map Collider just press used by composite and it'll put them all together and so now let's say we want to add in some non walkable area like water so I actually have to find a water tile here so right here we have a water tile it's the zero zero six for PNG and we can change the pixels per unit to 1 0 to 4 and then I'm going to change the max size to 64 and then apply and then we can open up back our tile palette so window 2d tile palette and then let's just drag and drop that water into there and then it's gonna ask you where to save it so you just click the bitmap folder we made and click Save and then we have our water we want it to be on the same elevation as the ground so we can just click the ground so then we can just start to draw wherever we want our lake to be so I'm just gonna make this weird kind of Lake and then it's kind of it looks like it's on top of the grass which is weird and that's because we have the tile map the mode set chunk so let's just set that to individual and then it will appear normal again alright so now that we have that we can still walk on the water which is something we don't want so let's add in a Collider tile map so let's right-click on our grid and let's do to the object and isometric X as Y tile map and we are going to call this our collision tile map and you can have a tile map just for collision so you can limit off where you don't want your player to be going so for our collision we can just select a random tile that we want and we can use that to define our Collider so let's say we don't want our player walking over here so we put the Collider here and right now I'm just gonna set the chunk mode to individual so I can kind of see where it is and I'm going to set the tile anchor to zero zero like we did before and this is not what we want right we don't want crates on a lake but what we can do is we can add in the tilemap collider as well as the composite Collider then we press used by composite in the tilemap Collider and then we can actually change the offset of the tilemap Collider 2d so we can change the offset on the y-axis to point five and we can actually go to a wireframe mode so now you can see we have our collision detection there working so now we can go back to shaded and we don't want the crates to appear obviously so it's very simple everything's in an order right everything's rendered in an order the grass is rendered last the the elevations rendered first and so we can actually make the crates be rendered as one of the first ones so then it can get overridden by the water so we can do that by setting the order in the layer to a lower one so we can set it to negative one or any number lower than that and it'll actually not render it since our grass is in a higher rendering order and so that's adjust a bit you can then go into your elevation you can add some crates in and those will also have colliders already attached to them since we have a tile map Collider object attached to our tile map and so you can just play around however you like so that's the end of this video in the next video I'll be going over a clicking movement so you click on the map and then your character will move to the position where you clicked and this will be using the new input system I also have some announcements before I go I recently opened up a patreon where I'll be offering services such as source code and early access to videos there's other benefits as well listed on there and I really appreciate the support it not only helps me make more videos it also helps me get more hardware and software that I may need and I'd really like to thank my two new patrons the highest here I'd like to thank mikaël Taylor and I'd also like to thank Robert Carlson for the support I really appreciate it and all of the feedback I've been getting has been really positive and I'm excited to continued making more videos into the future I also have a discord channel that I'll put a link to in the description if you have any questions you can ask them there as well so thanks for watching I hope you enjoyed and see you next video [Music] you

Channel: samyam

Views: 27,600

Keywords: samyam, unity, tutorial, unity beginner tutorials, unity tilemap, unity tilemap 2019, tilemap 2020, unity how to make isometric game, isometric camera, isometric 2d, unity isometric tilemaps, unity isometric, unity isometric tilemap system, unity isometric tiles, unity making an isometric game, isometric tilemap with colliders, isometric tilemap with elevation, isometric elevation, unity 2019, unity2d isometric tilemap, unity2d isometric, z as y, isometric z as y

Id: _TY0F7Zm6Lc

Length: 16min 45sec (1005 seconds)

Published: Sun Jun 28 2020

Reddit Comments

[u/AutoModerator]

This post appears to be a direct link to a video.

As a reminder, please note that posting footage of a game in a standalone thread to request feedback or show off your work is against the rules of /r/gamedev. That content would be more appropriate as a comment in the next Screenshot Saturday (or a more fitting weekly thread), where you'll have the opportunity to share 2-way feedback with others.

/r/gamedev puts an emphasis on knowledge sharing. If you want to make a standalone post about your game, make sure it's informative and geared specifically towards other developers.

Please check out the following resources for more information:

Weekly Threads 101: Making Good Use of /r/gamedev

Posting about your projects on /r/gamedev (Guide)

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.