Taking Things 2D Next Level: Learning the 2D Tilemap Editor

The Unity Engine can such a powerful and versatile tool for VR, XR, 3D, and cinematography, that often times it can be easy to forget that it was also made to create the deceptively simple world of 2D games.

Throwback games such as the Secret of Mana or platforming games like the Mario franchise of the Super Nintendo days may come to mind when hearing the word 2D, and Unity can most definitely create and build out these worlds.

Which brings us to a package available in Unity: The 2D Tilemap Editor.

Available under Window → Package Manger → 2D Tilemap Editor

No outside sources or downloads are needed to access this, as the package should be available on Unity available to install under the file path outlined on the image above.

The current project I’m working on has given me the pleasure of working with this fun and powerful tool, and I wanted to highlight what I’ve learned about the package after a couple of days creating with it!

So the first thing you’ll want to do, after downloading the 2D asset package of your choice, (or creating one, definitely want to look into how to do this later) is to open the Tile Palette Window, which is located under Window → 2D → Tile Palette.

2D Tile Pallete assets!

If you’re creating a scene from scratch, you’ll want to create a Tilemap next, which will be as simple as creating a new item in your hierarchy which should be listed, with the package installed, under 2D Objects → Tilemap. This should create a Grid Game Object with a Grid component on it, with the Tilemaps as a child to it. On your Scene view a grid should form when the tilemap or grid objects are selected which will serve as your blank canvas for you to paint on your 2D world.

Anyone else get excited at the potential of a blank canvas?!

Now, you’ll notice I said — paint. And paint, I meant. Because the main tool you’ll be working with to create your world is the Brush Tool under the Tile Palette window.

Tile Palette toolbar.

Your asset package may have multiple pages of tile palettes available which should be accessible under a drop down menu located right under this toolbar to the left of the Edit option above. Take a moment to look around at all the assets you have at your fingertips! Often times there are multiple assets that may look the same at first glance, but there may be tiny differences in the details, and as they say, the devil is in the details. From personal experience, these little details can and really do make all the difference, especially in a 2D type game with a lot of repeating graphics.

Next, you’ll take your brush tool and highlight either one square in the palette or multiple squares highlighted through a click and drag mechanic. From there, you can paint your assets directly onto the Tilemap.

BUT STOP HERE!

Before going too far into creating and painting your 2D vision fully, there are some things we need to discuss!

LAYERS.

This was the bane of my existence at first, as I painted everything on one Tilemap at first, which caused me transparency issues as I started adding more assets to my Scene. Creating a new layer is as easy as creating a new 2D object → Tilemap under your parent Grid, then adjusting the additional setting to either have its own layer in sorting, or changing the order in your Tilemap layer, shown below as default.

Under Additional Settings Sorting Layer and Order in Layer are very important! Remember: Order in layer is higher numbers are closer to the screen or in front of lower numbers in the order.

At this STARTING point (please, please, please, do this at the start of your project!) it is HIGHLY suggested that you take a step back to plan out exactly what you will want and need for your vision. A general, basic setup a tilemap “background” layer, with an additional couple of layers for details. If an object has transparency and is on the SAME layer (and order in layer) it will show transparency to the layer below it, and if nothing is below it, it will show the blank (or solid color depending on your settings) of the void behind it.

The bottom two tiles are layered properly, while the top is on the same layer as the background, showing transparency to the blank background.

You may need more or less layers depending on how complicated you want your game to be. Remember, you can also do cool things like allow some of these 2D assets to actually show in FRONT of your player, to appear as if they go into a building in your scene or a tent for instance. The possibilities are vast, and only limited by what you want, your imagination, and the amount of layers you make.

With these tools, I was able to create a basic, yet beautiful scene relatively quickly, and I was quite happy with the results! The next aspect of the 2D package I’d like to tackle and learn is the Tilemap Collider 2D component. This component allows for certain Tilemaps to have colliders, allowing collider-type behavior, such as not allowing the player to walk through it, or interactions. While the state of my project did not really require me to do this, I did do a little research on it, and learned that it actually can be a very dynamic tool, allowing for automatic editing of colliders as certain assets may be destroyed or manipulated during game play!

But that will be a topic for the future! And I can’t wait to learn it!

— Ryan

2D or not 2D, that is the question. A flat-tering question.