Using Tilemaps in MakeCode Arcade

This image shows the tilemap editor in the context of the Monster Racer skillmap

One of the trickiest projects for new users of MakeCode Arcade can be the creation of tilemaps.

What are tilemaps?

Tilemaps are game scenes that are made of small, square, repeatable tiles.

This is a tilemap. It’s a game scene made of square tiles. The tilemap can also be square, but it doesn’t have to be.

This is a single tile. Tiles repeat (alone or with other patterns) to form a tilemap.

Tilemaps are similar to backgrounds in that you can use them to set a scene for your game, but they’re also quite different in many ways.

A background won’t move with your character (unless you use a special extension) and the character can’t interact with the background. More importantly, the background can’t prevent your character from moving through areas of the world like a tilemap can.

In the tilemap editor, you can add “walls” to your scene that allow you to stop sprites from moving through a space. This can be useful when creating a platformer where you don’t want a character falling through the ground, or when creating a top-down adventure game with separate rooms and locked doors. Normal backgrounds don’t do that.

This is an example of a top-down dungeon with the brick tiles set to “walls”.

How do I use a tilemap?

Unlike backgrounds, our default gallery doesn’t provide default tilemaps, so you’ll need to make one yourself.

You can add your tilemap to your game using
the set tilemap to tilemap [ ] block.

The tilemap will appear to be one layer above the normal background (which appears to be one layer above the background color.) You can use any combination of background color, background image, and tilemap when creating your game.

How do I make a tilemap?

Creating a tilemap requires the understanding of a couple of different tools that work together at different times and for different reasons.

You’ll start in the tilemap editor, which looks a lot like the image editor (if it used tiles instead of colors.)

At some point, you’ll likely want to create your own tiles. This will pop you into the tile editor, which is almost exactly like the image editor, except that the gallery is full of tiles.

Starting in in the tilemap editor, then moving to the tile editor, before returning to the tilemap editor.

Once you’ve made your tiles, you can flip over to the My Tiles label at the mid-left of the screen and select one of the tiles you’ve created to complete your map.

Will you tell me more about the walls?

Very similar to the way you added tiles to your map, you can add walls. Walls can go on top of tiles or they can go above empty space. The design is up to you.

Walls are indicated using a semi-transparent red color. This means that (while editing) your map will appear to have a red tint in any space where you add a wall.

Adding walls by selecting the wall icon, then the pencil, and clicking on the tiles that we want the wall to cover. Removing walls using the eraser tool.

And what to those icons do?

The bottom-left area shows the gallery of tiles you have to choose from.

• Premade tiles are under Gallery
• Tiles you create are under My Tiles
• Use the dropdown to select a new group of tiles
• Use the dots at the bottom to navigate through the pages

Above that, you have the Tile/Wall selector.

• When the left square is selected with the white border, you will be placing tiles
• When the right square is selected with the white border, you will be placing walls

Above that are your tools of creation.

• Pencil — adds one tile at a time wherever you click
• Eraser — removes one tile at a time wherever you click
• Rectangle — creates a rectangle of tiles
• Bucket — replaces entire areas of similar fill with a new tile
• Circle — creates a circle of tiles
• Line — creates a line of tiles
• Selection — selects an area of your tilemap (to be moved, copied, or deleted)
• Hand — pans the screen so you can move the entire workspace around

Next, is the preview. This lets you see your whole tilemap when you’re zoomed in.

And, finally, the special tools…

The left half allows you to choose the number of tiles your pencil covers with each click (1, 4, or 9), and the right allows you to rotate or flip a selection.

Conclusion

That’s it! That should be all you need to start making and using your own tilemaps in Microsoft MakeCode Arcade.

If you make something of your own, be sure to come back and leave a comment so we can give you a shout out.