Introduction to Tilemaps in Unity
I’m on my first day in the mobile games course so let’s talk about TileMaps! Tilemaps are the foundation of many videogames and had their start on classic consoles of yesteryear. Tilemaps allowed game designers to give the appearance of much larger level areas by having reusable graphics that the artists could piece together characters and backgrounds with puzzle-like tile pieces.
classic RPGs like Secret of Mana, ChronoTrigger and PhantasyStar to name but a very few made what could be considered a consoles limitation into a classic look that is emulated to this day. Not only because of nostalgia, but tilemaps are very resource friendly. You can build entire levels and worlds with but a few building blocks! This is perfect for mobile games since a mobile device won’t be offering the same amount of graphics or memory power that a dedicated console would so it makes sense you’ll be wanting to keep things memory friendly. Fortunately, Unity offers the very same friendly background building techniques and that’s what we’ll be going over today.
To create a tilemap in Unity, you first need to create a Tilemap Grid. So create 2D Object/Tilemap/Rectangular, and left click. A canvas is created to paint tilemaps onto. You can have more than one tilemap grid and layer them on top of one another to give the illusion of depth that can be enhanced with parallax scrolling. We’ll call this tilemap Ground_Tilemap.
The next thing we want to create is a Tile Palette. This will hold all of the tile sprites we’ll be painting the grid with. Let’s create a Ground_Items palette. In the palette window, select “New Palette”, Type in Ground_Items for the name, and to keep things organized, we’ll save it under Sprites/Tilemap/Palettes.
Next, we’ll want to fill our palette with some ground tiles and we do that by importing a prepared sprite, in this case we have a tilemap called Ground which we’ll be slicing:
First we’ll select the Ground image, change it to a sprite, and for sprite mode, select Multiple. Then click apply.
Next, click on Sprite Editor, go to Slice and select by grid count. This particular map happens to be in 128x128 chunks, so we’ll put that in and finally click slice. Unity will then slice the entire map up in 128x128 squares. Click apply and these tiles will be set.
Finally, we want the sprite units to be the same size as the tiled slices so change the size from default 100 to 128.
Finally, drag the ground sprite into the tile pallete window. It will ask you where you want to save, go ahead and save it under sprites/tilemap/ and create a new folder called Tiles, and then Ground_Tiles, and save it there.
And finally, we now have a tile palette that we can paint our grid with!
It may seem to be a lot of steps, but it makes sense. After creating a few more tilemaps in Unity, it will become second nature!