[Unity] Useful tips to make the most out of TileMaps.

Before we begin.

This tutorial is a mix of technology and team workflow in my recent game. Characters who appear in this story are real cases in my career. They might sound funny, stupid or grumpy, but I don’t hate them. It’s how life works, you have to accept it and move forward. By the way, conflicts bring evolution.

The problem of a very big map and SpriteRenders.

Creating a big map with hundred of SpriteRenderers is not fun but doable. When the map expands into one thousand SpriteRenders, things get messy very fast. Here are the reasons:

The map scene is getting bigger in size and loading time. More GameObjects mean complex scene hierarchy, add over-head and memory issues. Believe me, working with big scene lags like hell and collaborating in such condition is impossible.

Complex hierarchy cause slow loading time and waste a lot of memory (Imaging you need to load one thousand identical SpriteRenderers with same material, sprite and only different in position).

More SpriteRenderes mean CPU would need a lot more resource in culling and batching drawcalls. It’s very hard to organize complex hierarchy to achieve good batching results (too much gameobjects, layers, materials and sprites ..).

If your character can interact with map (such as a platform game), one thousand gameobjects with colliders would slow your game to snail’ speed.

TileMaps comes to rescue.

What can TileMaps do?

In short, It combines 1000 SpriteRenders into one big grid. Working with TileMaps is same as painting a picture, you will use different tiles ( brush tools) to paint to the grid. Unity support 3 kinds of TileMaps: Rectangle, Isometric and Hexagon.

Here is the complete guide from Unity for beginner when work with TileMaps.

https://learn.unity.com/tutorial/introduction-to-tilemaps-2019-3#

Is TileMaps better?

Creating and Collaborating inside a map using TileMaps are very simple. Instead of editing thousand gameobjects, now you only need one Grid and some TileMaps. The map can be divided to several individual TileMaps which allows several people to participate in the level using nested-prefab and a source version control.

Fewer GameObjects means smaller scene, faster loading time and less memory demand. Your hierarchy is much more compact and well organized.

Collaborate with Artist and Game Design.

This is actually the hardest part when working with TileMaps. In order to top up performance, You have to reuse your assets as many as possible and everything must be in tile. Thus, Artist and Game Design will have less options in their hands and a big barrier above their imagination. Communicating early and often to get better understanding which can and can not do with TileMaps. By the way, talking isn’t hurt but doing things wrong cost a lot.

The Grumpy Artist.

Let’s image we have to work with “perfectionism disorder artists”, their eyes can spot the different between a flower at position (200,10) and a flower at (201,10). With them, every pixels are counted. Forcing them to work under TileMaps Assets constraints is impossible thus it causes our project to fall apart. As a grown up developer, we shall take a step back. We can use SpriteRenderer in conjunct with TileMaps to give them more freedom over important environment object. We might not have the most optimal game but everyone is happy. After that, we can negotiate on key-performance aspects and make adjust for a better game play experience.

The Newbie Game Design.

Every team has a weak link. We have a fresh game design this time. Being a fresher means you always say “yes” to the higher force, your boss will give you direct command and involve too much in the product (I mean in a bad way. Such as the other game has Dungeon, let’s implement it in ours). It’s kind of “Boss Ideas, you do it and take the blame“.

Working with a newbie Game Design has its advantages too, he/she is more adaptable to new technology and open-mind. To make the most out of them, You have to get them involving with the prototype as soon as possible. The more they participated with the project the more they know about the tech-limit thus they will have a better chance to defence their ideas before the boss comment.

Reduce impact of mistakes when working with TileMaps.

Prototype Phase.

If your team has never work with TileMaps before, using a premade tile assets speed thing up a lot. Your team can get started right away by identifying key metrics before diving into actual development.
Divide your work into smaller steps. When things break, it is easier to isolate and fix the problem. Beside that, each time it goes wrong, we learn something.
Teach GD and Artist TileMaps toolkits. They can help building the environment while you focus on core gameplay.
Aim for small victories and let your team share the success. This will prevent them from burning out on long project.

Production Phase.

Break your map into several smaller TileMaps and use “Eraser Tool” to clean up overlapped area.
Minimize the number of rendering layer, rendering order to max out dynamic batching.
Delete unused assets, re-arrange your TileMaps palette for easier modifying and maintaining the project.
Define assets rule for artists and GD such as size, naming convention, format. Use rule tiles and presets to speed up asset’s workflows.

Here is a complete tutorial from Unity which shows tilemap asset workflow from images to a playable level.

https://blog.unity.com/technology/2d-tilemap-asset-workflow-from-image-to-level

Fine-tune your TileMaps.

We nearly at the final stage of our production, it’s time to squeeze as much juice as possible from our game. Making your game faster is the key to reach out for more potential audiences.

In this section, we aim to reduce the cost of TileMap rendering by lower the set-pass call and draw call thus decreasing the CPU and GPU usage. A long the way, I will introduce some limitations of mobile devices such as overdraw, texture size, memory management which are the key points to look out for optimizations.

The impacts of Set-Pass Call and DrawCall in your game.

More set-pass calls mean Game Engine waste more time to bind a new shader which cause CPU overhead.

More draw calls cause more resource-intensive validation and transition steps in the graphics driver which put a heavy strain on both CPU and GPU especially in old devices with low IO speed.

Packing your sprites with Sprite Atlas.

Sprite Atlas combines sprites into a big texture, thus reducing set-pass calls and increasing batched drawcalls. Wise use of Sprite Atlas could boost your game performance from 30 to 50 percents. Here are some rules of thumb when pack your sprites to Sprite Atlas:

Grouping sprites base on their frequency (Sprites appear together should be place in a same Sprite Atlas) or their usage (Sprites could be cataloged based on their purpose in game such as Menu.SpriteAtlas, Level1.SpriteAltas,..).
Don’t pack all sprites into one big atlas, divide them into several smaller atlases base on your grouping strategy.
Limit your Atlas Size at 2048 for maximum compatibility with mobile devices (OpenGL 2.0) and remember to put as many sprites as possible in one atlas.
Delete un-used sprites from your atlas. They eat up your memory even though useless in the final product.

A brief introduction of “O verdraw“.

Overdraw refers to the system’s drawing a pixel on the screen multiple times in a single frame of rendering. Imaging drawing a picture with several layers. The more layers your picture has, the longer you work on it. Especially the mobile GPU which has a limited resources, reducing overdraw could decrease rendering cost significantly.

Looking for overlap areas.

Unity has a special mode inside scene view for Overdraw debug. As you can see in the image below, stronger color means these pixels are drawn more than light color one. Try to reduce the transparent layers in these areas by merge overlap tilemaps and reduce rendering layer count help a lot.