Unity provides tools that allow you to build sophisticated game worlds even for tiny projects, e.g. tilemaps system. In this tutorial we are going to make, export / import and use Unity tilemaps to build our game world.
Table of contents:
- Unity Tilemaps – what are they?
- Preparing Unity tilemaps out of 16 x 16 sprites
- God Mode – creating our Game World with a brush
1. Unity Tilemaps – what are they?
To use the Unity tilemaps first we need to understand the philosophy and concepts behind them. In simple words it is a built-in system that utilizes single images containing all the appropriately sized sprite assets for building 2D game worlds. Therefore, if you are building a dungeon level then you most certainly would want to include walls, floors and possibly windows with some cell bars inside your tilemap. In this tutorial we are going to build a game world for the project we have created thorough the past two articles: on basic top-down movement mechanics and fighting mechanics. To make things a little bit more interesting, we will focus on making a tilemap consisting of organic elements that can be found in a forest. Let’s get right to it!
2. Preparing Unity tilemaps out of 16 x 16 sprites
Similarly to previous two posts, I’m going to prepare assets that will be used to build our world. Here I have to make sure that whatever I come up with fits within the boundaries of 16 x 16 sprites or a multiplication of it. For instance, if I’m making a high tree then I have to ensure that it is no bigger than 32 x 32, 32 x 64, 64 x 64 and so on.
Playing the mother nature – trees, bushes, rocks and more!
Since I’ve decided to build a forest level then obviously we are going to need some trees. I’m going to use 32 x 32 assets since I want trees in my world to appear a bit taller than our 16 x 16 character.
- I’ll start with putting a 24px black pencil dot in the top section.
- add tree trunk silhouette.
- after that paint three sections of the upper branches of a tree with different shades of green.
- go from the light tone at the top towards heavier at the bottom.
- create some leafs by using shades of green on subsequent layers.
- add more details by adding and removing individual boundary pixels to give our tree more organic look.
Play with different shades of brown and green to give our tree more depth, especially leafs and trunk. I’ve decided to use black outline but it’s perfectly fine to use different stronger colours that match the entire asset colour scheme.
I’ll follow the same strategy for a pine tree, only this time use a triangle in the beginning to capture the shape. Once you finish with shading the tree, keep on refining the final look until you arrive at organic look!
Let’s make some bushes and rocks now! Here I’m making sure that they occupy the exact 16 x 16 cell in a grid. Start with making an outline of our bushes. Use the same shades of green to give them more organic and natural look. At this point it is important to enforce the feeling as if the light comes from one side to the other. I’ve placed lighter tones on the left and stronger on the right to create a gradient transition. I’ve also made mushrooms, rocks and grass to make our forest level even more interesting!
Breath of the forest: animated water stream (optional)
We now have all the assets to create our forest level but what about creating something that looks more… alive? For instance, at the moment none of the assets we’ve created so far are animated. They will appear rather static once placed in our game world. To change that we are going to create an animated water stream that can be built out of animated sprites.
- start by creating a 16 x 16 sprite with a blue background and different shades of stream bars
- press ‘Alt + N’ to create a new frame
- select the entire frame content and shift it to the right by selecting ‘Edit -> Shift -> Right’
Repeat the process until you create a full animation. The last frame has to contain the state of the stream just before the state presented in the first. The final result should look something like this:
Exporting / importing tilemaps to Unity
Now that we have all the assets done, they need to be exported. I’m going to follow the same procedure as in my first post. Click on ‘File -> Export Sprite Sheet’ and select ‘Sheet Type’ to ‘Packed’. Specify the location where you would like to store your file in the ‘Output’ tab.
When you drag and drop our sprite sheet into Unity make sure you set up the correct settings in the ‘Inspector’ panel:
- ‘Texture Type’ to ‘Sprite(2D and UI)’
- ‘Sprite Mode’ to ‘Multiple’
- ‘Pixel Per Unit’ to ’16’
- ‘Mesh Type’ to ‘Tight’
- ‘Extrude Edges’ to ‘0’
- ‘Filter Mode’ to ‘point(no filter)’
- ‘Compression’ to ‘None’
Now all’s that left is to perform slicing inside the ‘Sprite Editor’ panel. Set ‘Type’ to ‘Grid by Cell Size’ and ’16 x 16′ as the actual size inside ‘X’ and ‘Y’ fields respectively. Hit ‘Slice’ and then ‘Apply’.
3. God Mode – creating our Game World with a brush
Before we can start creating our world, we need to download the ‘2D Tilemap Editor’ via Package Manager since it is not included in the standard Unity 2019.3 engine installation. Select ‘Window -> Package Manager’ and type in ‘2D Tilemap Editor’ while making sure that you are searching through ‘All Packages’. After selecting the package, click ‘Install’ button in the bottom right to finish the installation.
We now have everything we need to start creating our world! In the ‘Hierarchy’ panel, right-click on the empty space and select ‘2D Object -> Tilemap’. On the other hand, you can select ‘GameObject -> 2D Object -> Tilemap’ from the top menu. You will notice that our newly created tilemap will automatically become a child of a ‘Grid’ object. This construct is part of the tilemap system that allows to lay out tiles on the associated layer of a grid. Above all, think of it as a binder of all elements that will form our game world such as Tilemap Renderer and Tilemap Collider 2D.
Defining a tilemap pallete
In order to start creating our world we need to have information on tilemap components we want to place in it. Open the ‘Tile Pallete’ panel by selecting ‘Window -> 2D -> Tile Pallete’ from the top navigation menu. After that, in the panel click on ‘Create New Pallete’ and give it simple, yet meaningful name so it provides some context of our level. When you click ‘Create’ Unity will ask you where you would like to store your pallete, so to keep everything tidy I would suggest saving it in a folder named ‘Palletes’.
After you finish defining the palette, drag and drop your entire tileset into the cell-grid space of the ‘Tile Palette’ navigation panel. As before, Unity will ask you to specify the location under which you wish to store your tilemaps. This time, I suggest creating a folder simply named ‘Tilemaps’ and point it as the default destination.
Now comes the fun part! Pick up your brush from the range of available tool set, select the tiles you wish to paint with and start creating your forest level! Just don’t forget to specify the layer at which you wish to paint! I have renamed my default ‘Tilemap’ to ‘tm_forest_base’ and that is the layer our character will be able to walk at. However, what about preventing our character to walk over tiles he is not supposed to walk over, such as trees? Let’s look into that next!
You shall not pass! Creating the world’s boundaries with tilemaps in Unity
We have created grass fields and pathways through our forest now. However, how to place our trees, bushes and rocks so that they prevent our character to go through them? We have to create a new layer which is going to contain all non-walkable assets. Right-click on the ‘Grid’ assets in ‘Hierarchy’ panel and create another tilemap (‘2D Object -> Tilemap’). Rename it to ‘tm_forest_mid’ to indicate that it will contain all assets from middle height level flora. In the ‘Inspector’ panel under ‘Tilemap Renderer -> Additional Settings’ create a new sorting layer by selecting correct option from the drop-down menu. You can name it however you like but I’ll go simply with ‘mid’.
After that, while still in the ‘Inspector’ panel we have to add new component called ‘Tilemap Collider 2D’. By doing so we are going to make sure that a character won’t be able to go over any tile placed in this layer. When you start drawing the assets on this layer you will notice the green outline. This is an indicator of physical bounding volume.
There’s more! Animated water streams tilemaps in Unity (optional)
If you have followed the optional section earlier on water stream sprite then now we are going to make a river out of it! Unity team created extra tools that can be integrated into your project to enhance the visuals. First, go to their repository and clone it to your ‘Packages’ folder inside your project. Unpack it so that the folder’s name is ‘com.unity.2d.tilemap.extras’. Now we have to include it in our project by adding the following line to ‘Packages/manifest.json’ file under ‘dependencies’:
Back in Unity editor when you now right-click on empty space in your ‘Assets’ panel you will be able to see additional tiles options. Select ‘Create -> Tiles -> Animated Tile’ option and set the number of frames that corresponds to number of frames you’ve made back in aserprite. Now drag and drop each frame to their corresponding boxes.
Once you finish setting up all frames, create a new pallete and name it ‘Water’. Now simply drag and drop the asset file we have just created into the ‘Tile Pallete’ panel and start making a stream using a brush! When you click ‘Play’ button you’ll see that the tiles are animating and the river is flowing! However, if you’d like to make it faster or slower then simply select the tilemap (e.g. ‘tm_forest_base’ in my case) layer at which you were placing the stream tiles and increase the ‘Animation Frame Rate’ value.
From this point onward you are free to just follow your imagination and paint your levels accordingly! In this tutorial we have explored one way of creating game worlds using tilemaps system built-in into Unity. Firstly, we have made pixel-art assets in Aseprite. Secondly, we have imported them to the engine. Lastly, we have created a simple forest level using a ‘Tile Pallete’ feature. There are many different directions that you can folow from here on but I hope that this post gave you an overview of the tilemap system.