Setting the Scene in MakeCode Arcade

A large, involved tilemap in Microsoft MakeCode Arcade

Getting your sprites to move around the screen is exciting, but nothing polishes a game quite the way a background scene does!

When setting the scene in Microsoft MakeCode Arcade, you have three basic options:

1. Add a Background Color
2. Add a Background Image
3. Add a Tilemap

Let’s take a deeper dive into each option!

Add a Background Color

By far, the easiest option for “setting the scene” in your game is adding a background color. The block is simple and there aren’t many steps to take. Just put the block in your program and choose a color for your background.

Add a Background Image

The next-most simple option is adding a background image. Like choosing a background color, you add the block and click the empty space — but this time you’ll open into an Image Editor where you can draw whatever background you like (160 pixels wide by 120 pixels high). If you would prefer to choose a pre-made background, toggle to the gallery and pick one of our professionally designed options.

Add a Tilemap

Finally, we have the tilemap option. Tilemaps are more complicated but they open a larger world of possibilities.

Before we go any further, let’s talk about what a tilemap is. A tilemap is a background area for your sprite that’s made up of squares called “tiles” — each tile is 16 pixels wide by 16 pixels tall. Often, the entire tilemap is larger than the screen (which is 160x120 pixels) giving the feeling that the sprite has a larger world to explore.

The default tilemap is 16 tiles wide by 16 tiles high, but you can change the dimensions to be up to 255 tiles in each direction!

The Tilemap Editor is slightly different from the Image Editor in that you paint with complete 16x16 tiles. So, instead of filling the map pixel by pixel with a color like green, you might fill it tile by tile with a section of grass.

Filling the empty tilemap line by line using the pencil tool set to “grass”

You can, of course, make your tilemap much more intricate by using extra tiles from the gallery…or by creating tiles of your own to add to the mix.

Add walls that your sprite can’t go through using the “wall” brush.

Once you’ve created your tilemap and added it into your project, you’re ready to write the code that lets your sprite interact with it!

MakeCode Arcade has several default blocks that allow you to do things like recognize when the sprite overlaps with a tile or tell when a sprite runs into a wall.

Then, if you want to get fancy, you can import the “Tilemaps” extension for lots of other options!

That just about covers it! Between setting the scene and adding a sprite, you know enough to make some incredible things in MakeCode Arcade.