What You’ll Learn in This Hour:
► What tilemaps are
► How to create palettes
► How to create and place tiles
► How to add physics to tilemaps
You learned to created 3D worlds using Unity’s terrain system in Hour 4, “Terrain and Environments.” Now it is time to extend that knowledge into 2D games, using Unity’s new 2D Tilemap system. Using this system, you can create worlds quickly and easily for more interesting and compelling game experiences. In this hour you’ll start by learning about tilemaps. From there you’ll examine palettes, which you use to hold your tiles. Finally, you’ll create tiles and paint them onto your tilemaps before adding collision to make your tilemaps interactable.
As the name implies, a tilemap is simply a “map” of tiles (in the same way old-school bitmaps are maps of bits). Tilemaps sit on a grid object that defines the tile sizes and spacing common to all tilemaps. Tiles are individual sprite elements used to draw a world. These tiles are placed on a palette, which is then used to draw the tiles onto the tilemap. It may seem like a lot, but it is basically a “paint, palette, brush, canvas” type of setup, and once you begin using it, it will seem very natural.
If it isn’t already painfully obvious, it should be noted that tilemaps are meant to be used for 2D games. While they could technically be used for 3D, using them that way would not be very effective. It is also a good idea to use sprite sheets in conjunction with tilemaps. You can create a sheet of the various environment parts and then easily convert them into tiles.
You can have as many tilemaps in a scene as you like, and you will often find yourself creating several of them and layering them together. This method enables you to set up background, midground, and foreground tilemaps for things like parallax effects (parallaxing is the effect where the background seems to move more slowly than the foreground when moving side to side, giving the world a 3D feel). To create a tilemap in a scene, you can select GameObject > 2D Object > Tilemap and then select the type of tilemap you want. Currently Rectangle, Hexagonal, and Isometric tilemaps are supported. Unity adds two game objects, named Grid and Tilemap, to your scene (see Figure 13.1).
Adding a tilemap.
The Tilemap game object has two components worth noting: Tilemap and Tilemap Renderer. The Tilemap component has to do with tile placement, anchor positions, and overall color tinting. The Tilemap Renderer allows you to specify sorting orders so that you can ensure that your tilemaps draw in the correct order.
As you saw earlier, when you add a tilemap to a scene, you also get a Grid game object (see Figure 13.3). The grid manages settings that are common across all similar tilemaps. Specifically, the grid manages the cell size and cell gap for your tilemaps. Therefore, if all your tilemaps need to be the same size, you need only a single grid for all of them to sit under. Otherwise, you can have multiple grids for multiple tilemap sizes. Notice that the default cell size is 1. This information will become important later, so be sure to remember that. Finally, the grid is where you specify if the children tilemaps are rectangular, hexagonal, or isometric. Try changing up that setting to see the results.
The Grid object.
In order to paint tiles onto tilemaps, you need to first assemble them on a palette. You can think of the palette as a painter’s palette, where all your painting choices take place. The palette comes with many tools that help you sculpt worlds exactly as you see fit. You access the tile palette by going to Window > 2D > Tile Palette. The Tile Palette window, shown in Figure 13.4, appears.
The Tile Palette window.
The Tile Palette window has several tools for painting and a main middle area where all your tiles are laid out. By default, a project doesn’t have any palettes to work with, but a new one can be created by clicking the Create New Palette drop-down.
So far in this hour, you have been doing a lot of prep work that will allow you to use tiles. Now it is time to dig in and make the tiles to paint with. In essence, tiles are sprites that are specially configured to be used with tilemaps. Sprites that are being used as tiles can still be used as regular sprites if you happen to need them for both. Once sprites are imported and configured, they can be turned into tiles, added to a palette, and then painted onto tilemaps.
There isn’t much you need to do to prepare sprites for use as tiles. There are two major steps:
1. Ensure that the Pixels per Unit property of your sprites is configured to be exactly the same size as the Cell Size property of your grid. (You’ll learn more about this shortly.)
2. Slice up the sprites (assuming that they are in a sprite sheet) so that there is as little extra space around them as possible. Where possible, having no extra space around a tile is preferred.
The first step in preparing a sprite for use as a tile may seem complex, but it is really rather straightforward. For example, in this hour you will be using sprite sheets that have multiple tiles in them. These tiles are 64 pixels by 64 pixels (because that’s how the artist made them). Since your grid’s Cell Size property is 1 unit by 1 unit, you will want to set the Pixels per Unit property to 64. That way, every 64 pixels in your sprite will equal 1 unit, which is the cell size.
Once your sprites are prepared correctly, it is time to make some tiles. Doing so simply requires dragging the sprites onto the correct palette in the Tile Palette window and choosing where you’d like to save the resulting tiles. The original sprites remain where they are, unchanged. New tile assets are created that reference the original sprites.
Now that you have your sprites configured and your tiles created, it is time to start painting!
To paint tiles onto a tilemap, you need to pay attention to three things: the selected tile, the active tilemap, and the selected tool (see Figure 13.10). When selecting which tile to paint, you can click a single tile, or you can drag to grab a selection of tiles. This is useful if you want to paint a section of tiles that go together (like a complex roof piece).
Preparing to paint.
When you’re ready, click in the Scene view to begin painting on the tilemap. Table 13.1 lists the tools that appear in the Tile Palette window (from left to right).
TABLE 13.1 Tile Palette Window tools
You might have noticed that the palettes aren’t exactly laid out in the most convenient manner. When you created the tiles by dragging sprites onto the palette, Unity placed them in a straightforward, but not necessarily intuitive, manner. Luckily, you can customize the palette to suit your needs. Simply click the Edit button in the Tile Palette window (see Figure 13.13) and use the palette tools to paint, move, or modify the tiles as you see fit. You can even create several copies of the same tile and rotate or flip them for convenient painting.
Editing the tile palette.
You’ve now learned to paint on tilemaps to create brand-new 2D level designs. If you actually try to play with these levels, however, you’ll find that your characters fall right through the floor. It’s time to learn about using colliders with these new tilemaps.
You could add collision to your levels by placing box colliders around your tiles manually, but who wants to work that hard? I don’t! Instead, you can use a Tilemap Collider 2D component to automatically handle collision. Besides working specifically for tilemaps, these colliders function just like any other colliders you’ve used in the previous hours. All you need to do is select the tilemap you want to have collision and select Component > Tilemap > Tilemap Collider 2D to add the collider as a component.
The colliders you now have on your tiles make the level complete and playable. One problem worth noting, however, is that placing a collider around each tile is very inefficient and can lead to performance issues. You can resolve this by using something called a Composite Collider 2D component.
A composite collider is a collider that is composed of many other colliders. In a way, it allows you to merge all the individual tile colliders into a single larger collider. The really cool thing about doing this is that whenever you add or change tiles, the collider is automatically updated for you. You can add a Composite Collider 2D component by selecting Add Component > Physics 2D > Composite Collider 2D. When you do, a Rigidbody 2D component is also added; it is required for the Composite Collider 2D component to work (see Figure 13.15). Obviously, if you don’t want all your tiles to fall due to gravity, you will want to change the Body Type property of the Rigidbody 2D component to Static.
After you add the composite collider, nothing really changes with the tilemap. Each tile still has its own individual collider. The reason is that you need to tell the collider that it should be used in the composite. To do that, simply check the Used By Composite check box. After you do this, all the colliders are merged into one large (and more efficient) collider.
The Composite Collider 2D component.
In this hour, you have learned about creating 2D worlds using Unity’s 2D Tilemap system. You began by learning about tilemaps in general. After that you created palettes and configured sprites to be added as tiles. Once your tiles were prepared, you painted a couple tilemaps to build a level. Finally, you learned how to add collision to your tilemaps to make them playable.
Q. Can tilemaps be combined with regular sprites when building 2D worlds?
A. Yes, absolutely. A tile is really just a special kind of sprite.
Q. Are there any kinds of levels that tilemaps aren’t good for?
A. Tilemaps are great for repetitive and modular levels. Scenes that involve a large number of different shapes or very unique and nonrepeating sprites would be difficult to create with tilemaps.
Take some time to work through the questions here to ensure that you have a firm grasp of the material.
1. What component defines properties (such as Cell Size) that tilemaps share?
2. Where are tiles placed prior to painting them onto a tilemap?
3. What collider type allows the combination of multiple colliders into one?
1. The Grid component
2. A palette
3. A Composite Collider 2D component
In this exercise, you are going to experiment with the tilemaps you’ve created to enhance their appearance and usability. Here are some things to try:
► Try fully painting and modifying both of your tilemaps until you are satisfied with them.
► Try adding a Foreground tilemap to add more plant or rock elements to your scene.
► Try testing your full level by adding a 2D character and getting the camera to follow the character. The book files include a script called CameraFollow.cs to help get the camera to follow your player around.
► Try pushing your background tilemap away from the camera on the z axis. In this way, you can create a natural parallax effect. Remember that you will be able to see the effect only if you have a perspective camera.
► Try modifying the color property of the background’s Tilemap component to make the background images look faded and distant.