Getting Started with Tilemap in Unity!

I recently began work on a 2D mobile game project for the GameDevHQ course, and started out by working with Unity’s 2D Tilemap Editor. I believe this comes as a default package in Unity, but if not you may need to add the package via the Package Manager to get started 😉

Essentially, Tilemap offers us a quick and uniform way of creating 2D environments by letting us ‘paint’ tiles onto a grid in Unity. This often lends itself well to creating more retro-looking games (e.g. Spelunky), and we can even layer these in such a way so that we get a parallax effect (generally where layers further from the camera move slower than layers nearer to the camera).

Creating Tilemaps

From my experience with Tilemap so far, organisation really does seem to be key. Generally speaking it’s good practice to paint onto separate tilemaps so that, for instance, foreground, mid-ground, and background are kept separate. To create and layer these Tilemaps, right click in your Hierarchy and select 2D Object > Tilemap. If you haven’t got one already, this’ll create a Grid GameObject in your scene as well as child Tilemap.

Whichever Tilemap we select is the one we’ll be painting on. To layer these, click on your Tilemaps and take a look at the Tilemap Renderer component in the Inspector. You can either create and/or assign a Sorting Layer (and order those accordingly) or you can use the ‘Order in Layer’ variable to decide how each layer gets prioritised (the higher the number, the more layers it’ll be superimposed on).

Creating Tile Palettes

In addition to creating Tilemaps, we’ll also need to create a variety of different Tile Palettes to work off (and keep things organised in the process). These palettes are where we’ll be storing the sprites we want to use when painting onto the grid, and it’ll most likely make our lives easier to keep, say, our background sprites separate from our items/collectible sprites. To start working with these, you’ll need to head to Window > Tile Palette in order to open up the editor for these.

By clicking on the Palettes dropdown, we can create new palettes (and most likely store these in a ‘Palettes’ folder within our project for organsiation). We can select the Tilemap we wish to paint onto either by selecting the desired Active Tilemap from the dropdown, or by selecting the Tilemap we want in the Hierarchy.

Adding Sprites

Once your have your Tilemap ready for some sprites, you’ll then need to select a sprite sheet you want to use in your project. With this sprite sheet selected in you project, ensure Texture Type is set to “Sprite 2D” and that Sprite Mode is set to “Multiple”. You can then click on the “Sprite Editor” button (also in the Inspector) to open the sheet up in order to slice it.

Towards the left, click on “Slice” then Grid by Cell Size the Pixel Size specified by the artist. In my case, it’s 256 by 256 for a lot of these sprite sheets. Once you can see your sprite sheet has been appropriately divided up, click “Slice” then “Apply” before closing the Sprite Editor. Now that we’ve done this, you should now be able to expand a dropdown on your original sprite/spritesheet, showing us all of the individual sprites we’ve created using this process.

(Admittedly this particular slicing example is for creating a 2D animation rather than some tiles)

All we need to do now is drag the original sprite/spritesheet over into the palette window, save it in an appropriately-named “Tiles” folder, and you should see the palette populate with those individual sprites. You can repeat this process to add more sprites to a palette if you so choose 😉

Once you’re ready, you can now click on the paint brush icon in the Tile Palette window, select (or drag and select for multiple) a tile from the desired palette, and finally head over into our Scene view and start painting onto our scene:

Hopefully that should get us started with Tilemaps! 😄 (Do make sure to always select the right Tilemap and Palette before painting!)