TILEMAPS in Unity

making your game art in tiles can be beneficial in a lot of ways because tiles are so modular talipes make it easy to create new levels and modify existing ones some good examples of games that utilize star maps really well of course classics like Mario and Pokemon but also a lot of newer indie games like spelunky and stardew valley take advantage of this art style so in this video we'll have a look at how to use unity spilled in town map system also special thanks to Judy Minh passio infinity PBR yo Rio myrrh and hence Huff tuned for their support on patreon and with that let's get started so just open up unity and currently we have nothing in here but in order to start creating tile maps we need to have a tile set I went online and found this pretty cool tile set by Leonard Papen as you can see there are a bunch of different elements like rocks dirt grass and water and if we have a look at the ground tiles only this is what we see of course if you want to learn how to create your own tile sets I have a tutorial on how to do that in Photoshop but there are really a bunch of towels in here and there are even multiple tile sets for the different elements in the scene so just to keep things simple for this tutorial I've gone ahead and created a simpler version of the tile set and I'll of course have a download link for that in the description let's take this file and import it into unity let's click on it and you can see here I've just selected the most basic ones now first we want to make sure the texture type is set to sprite 2d and you I will then change the sprite mode from single to multiple because we have multiple sprites in here we'll also change the pixels per unit to 32 the reason why is that the size of each tile in my tile map is 32 and I want one tile to be one unit big then because we're dealing with pixel art we want to set the filter mode to point so it doesn't get blurred out and we can also go down here and disable compression now if we apply these settings we can open up the sprite editor and here we want to define each individual tile luckily we don't have to do all this by hand we can simply use the slice option up here change from automatic to grid by cell size because we know the size of each tile that's of course 32 by 32 units with no offset and no padding and we can just go ahead and hit slice and you can see it actually automatically registers all of our tasks I definitely recommend you go through and see if everything is here it certainly looks like it with that we can simply hit apply and if we now close down our sprite editor we can drop down this menu on our object and here we have each individual tile as a sprite so next what we want to do is create a tile map to do that we go to the hierarchy right click go to the object and select tile map and you can see it automatically creates this object called a grid that's because all-time maps in unity are rendered using a grid so if we go to the scene view we can see all of the grid lines and of course in each of these grid cells we can now play styles if you've ever used the UI system think of the grid just like a UI canvas we can of course configure stuff like cell size and gap here but in most cases you probably just want to leave those be then we can expand this object and under here we have our tile map now you can consider a tile map in unity kind of like a layer if we want multiple tiles on top of each other we simply want to create multiple tile map that we can draw onto so this here is our first tile map layer and so we can call it something like tile map on the score base just to those soaps know what we want to paint onto here and our Tama has two components a tile map which has configurations for the layer an atomic renderer where you can configure stuff like what material to use but we just want to leave all that by default and instead we want to go window and bring up our tile palette and this window is where we find all of our tile painting tools we can go ahead and dock this to the right of our scene view and maybe also give it a bit more space now as you can see we have a bunch of different tools at the top I'm gonna show you what each of these do in a second first we want to create a palette and a palette is basically just a collection of tiles that you can choose from at any given time so we want to go ahead and create a new palette and we'll call this palette something like ground Taos we just wanted to be a rectangular grid and we'll set the cell size to automatic and now we can hit create now each palette is stored as an object in your project so we could go and create a new folder here for all of our palettes so I'm gonna call this pal it's and we can go into the folder and hit select and there we go we now have an object in here called ground Taos and you can also see it's selected right here and in fact it already tells you what to do drag tile sprite or sprite text your assets here in order to add them so we can go to our tile set example and select each one of our sprites and then simply drag them into a tarpaulin a unit is going to generate a tile asset for each sprite and since we have quite a few sprites this means quite a few assets so you probably want to go ahead and create a subfolder for this we can call it Taos and just to stay very organized inside of this will create another folder called ground Taos let's hit select and unity will go through and generate all the appropriate tile assets and as soon as it's done we should see all of them in our tile palette you can also see on the left hand side here that if we go under our tiles folder and underground tiles all of our tile assets are here and if we select one of them we can either change the sprite that the tile asset uses we can tinted a certain color or miss with the Collider type but again for now we'll just leave all those as is and this is where we get to the most annoying part of using tiles using the current Tao system because you'll notice that our tiles are laid out in a very chaotic way so now we're actually ready to start painting using our tasks to do this I want to switch to the brush mode the shortcut for this is of course B and now we can start selecting tiles inside of our tile map so say we want to select the corner right here and then simply move our mouse into the scene view in order to start placing these you can also select multiple tasks if you want to paint more at a time so I'm going to start painting away on a tiny level you'll notice if I switch to the game view now I have these weird ugly lines the reason why is we need to go to edit project settings and then quality and in here we'll make sure to disable anti-aliasing anti-aliasing is meant to play out edges in three-dimensional graphics but since we want very hard edges here in order to not see between the top apps we definitely want to have this disabled so I've laid the foundation of my tile map here and I want to move it kind of into the vicinity of my camera so I'll take the selection tool select the entire tile map select the move tool and then move it over some of the tools that are handy is if you're using the brush tool and want to erase we can simply hold down shift in order to do that we can also select the box tool using this we can fill a rectangular part of the map you can also select a tile by using the mark tool I normally just use this by holding down control and picking the tile that I would like to paint with and finally we can use the bucket tool the one on the far right by hitting G and this will fill out holes using the selected tile so think I'm gonna paint some water into my scene here I'll see you in a second I'm also going to surround it with some grass [Music] so now I'm satisfied with the based of my tile map but I definitely want to overlay some objects on top of this especially they want to add some rocky parts to my level and you'll notice if I just select this and start painting on top of what I've already made it looks really weird and the reason why is that parts of these time-lapse here aren't transparent so we need the base layer to still be underneath luckily we know that each tile map act as a layer so all we need to do is go into a grid right click go into 2d and create another tile map and we can now rename it to tile map underscore rock we also want to make sure to set the ordering layer for this to be greater so that all of the tiles that we paint appear on top I'm just gonna set it to 1 you can of course also put it on a separate sorting layer now we'll switch to our tile palette we still want to paint using our ground tiles but we want to change the active tile map from tile map base to tile map Rock and now if we switch to the brush tool you can see that we can easily start painting away with these rock sprites there we go so finally I'll just take my camera here and zoom it out a tiny bit so we can see more of the level and we've now created our first level using tile Maps in unity of course there's still so much you can add to this but as a base that looks awesome so other than the stuff that unity has currently built into the editor they've also created a bunch of tile map features which aren't yet integrated you can actually find these on the unity github on the 2d extras I'll of course have a link for this in the description if you want to use these yourself simply hit clone or download and you can download it as a zip file and open it right up in unity in fact they also have another repository called to detect demos I'll have a link for this as well and this includes all the extra features along with example scenes so if there's something you want to learn how to do you can check out how unity recommend to you to do it so that's really cool and let me just go ahead and show you what some of this stuff is so I've opened up the to detect demos and I've created an in T palette here and if I now go to the project and right click I can go into create and I still have an option called tile here but at the very bottom I also options for animated tiles pipeline tiles random tiles and a bunch of others let's just try out the animated tile we'll call this one waterfall base and this of course allows us to create tiles with animation so in here we can define the number of animated sprites that you want to have in your animation let's set this to 5 and now we get 5 sprite let's take the first one here let's search for waterfall let's select the first one here let's go through and do that until we've selected all of them all 0 through 4 here and the rest of the things we could leave as is if we now drag this into the tile palette you can see that nothing really happens but if we then take our paintbrush and make sure to create a tile map over here in the hierarchy so right click to the object tile map we can select our waterfall and paint it into our scene and if we now hit play you can see our waterfall animating of course it's currently doing so really slowly to change that we can go under grid under the tile map and change the animation frame rate let's bump this up to something like 15 and now when we hit play we have an animating waterfall I'm gonna go ahead and duplicate this one and rename it to waterfall foam and I'm going to go through each sprite here and change it to the bottom of the waterfall so there we go we now drag this into a town map as well select our brush tool selected inside of our tile palette and suddenly we can paint with it if we now hit play we can see that we've added a waterfall to our game and this is just one example of the extra features another one is the ability to set up rule-based tiles if we go into the scene view and erase what we have we can instead change our palette to one of the included ones here I'm gonna go under terrain tiles I'm gonna select one of the tiles in our terrain here and I'm simply going to start painting and you can see automatically unity recognizes what tiles are nearby and inserts the appropriate one of course we could do all of this by hand but having a simple system like this just makes everything much much quicker and if we go inside of our tile map folder under tiles and terrain tile we can open up the example scene for this to see how unity has laid this out and we can also go under tile assets and select one of the assets and here you can see all the different sprites that make up this asset so the left here our rules in other words how the tile should be designed and to the right here we specify a sprite that is - signed in this way so we have a filled one we have one with three sides we have one with two sides on the corner we have one with just two adjacent sides two opposite sides and so on if you want to set this up yourself you of course need to create all the appropriate sprites in that case I would definitely recommend basing it off of the sprites that you need to have created for this example so that should definitely be enough to get you started and if you're hungry for more features just check out the unity github repos there's some nice hidden gems there that's pretty much it for this video if you want to learn how to create your own tile sets I have a tutorial on how to do that in Photoshop that you can check out also if you like these videos and want to support them you can do so over at patreon with patreon you can make a recurring donation to help us keep making videos you can go to patreon.com/scishow lawn mower on that thanks for watching and I will see you guys in the next video thanks to have the awesome feature and supporters who donated in January and a special thanks to Dan guy and Diego guy kudamon Amanda rue see URI Omer Vecchio infinity PBR hence of tune Sybok mommy pay me double tab 45 murder Dean Coker Braille John forgot Superman the great games P Thomas volley tis nate'd Oh Derek Eames Kirk faced murphy beyond food hub suniye Hobson Erasmus Rob found James Rogers Alex Akatsuki and Robert pony you guys Rock

Channel: Brackeys

Views: 1,264,582

Rating: 4.9480662 out of 5

Keywords: brackeys, unity, unity3d, games, how, to, tile, map, tiles, tilemaps, tileset, set, animated, extra, rule, rules, terrain, automatically, assign, sprite, sprites, sheet, tilesheet, atlas, tile atlas, draw, import, set up, 2D, photoshop

Id: ryISV_nH8qw

Length: 13min 45sec (825 seconds)

Published: Wed Jan 31 2018

Reddit Comments

[u/[deleted]]

I'm still learning the ins and outs of Unity--can you paste an image over the tilemap to use as the "ground" layer? Like use a world map, for example?

[u/ztikkyz]

I started using this system yesterday for fun, and it's amazingly easy

[u/jgonzosan]

This looks awesome. I have no intention of creating any tile based games, but it's great that Unity has added support for this.