Create a Tile Mapped Level in MakeCode Arcade

MakeCode Arcade

If you're not already familiar with the basics of MakeCode Arcade, check out this guide on creating a character sprite and moving it with controls. First, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade beta.

You can also take a look here to learn how to set up animation for your character.

Game Prep

We'll start off with a pre-made scene in which the basics of the character sprite, animation, and movement have been created, just so we can focus on level design.

Open this link in the Chrome browser to get going: MCA_ruby_level_0

Game Prep

We'll start off with a pre-made scene in which the basics of the character sprite, animation, and movement have been created, just so we can focus on level design.

 

Open this link in the Chrome browser to get going: MCA_ruby_level_0

 

Click the Show Code button.

 

Then, click the Edit button to open the code into the editor.

Add Background

We'll add a background image first. Click the Scene category, and then add the set backround image block to the on start block.

 

Click on the empty sprite block to open the sprite editor and then paint and draw your background image. Note that this is a 160x120 pixel sprite, which is the full screen size of the MakeCode Arcade game screen.

 

It can be tricky to paint accurately on the small canvas, but after some trial and error I came up with a background I liked.

You can get an exact copy of the code up to this point by downloading this .png file, which has the game code embedded in it! Right click the image and pick "Save image as" to save it to your computer's hard drive, then drag the saved image right onto your MakeCode Arcade page in your Chrome browser window!

Create Tile Map

Now we'll create the tile map, which is the foundation of our level.

 

From the Scene category, drag a set tile map block from the Tiles sub-heading into the on start block.

 

We'll open the sprite editor for the tile map in order to draw out the level. The first thing we'll notice is that the default canvas is the wrong size and shape for a side scrolling platformer. Currently, it reads 10x8. Click on that resolution button multiple times to get to the size we want, which is 32x8.

 

Let's create a ground running across the bottom of the level. Use the blue color index and a single pixel pencil tool to draw the two ground layers. You can hold the shift key on the keyboard to constrain the tool to straight lines, which is very helpful! If you make any errors, just use the eraser tool to correct them.

 

It's important to note that the tile map resolution is different than the screen resolution. We're using a 32x8 pixel map where each pixel represents a 16x16 pixel tile in the final game. The screen resolution is 160x120.

You can see that the tile map actually shows up in the game engine now at proper screen resolution. Before we add the tiled sprite artwork, let's add some platforms to the tile map.

Add Platforms

 

Click on the tile map to open it again into the sprite editor. Place purple tiles onto the map as shown, then click the Done button.

 

Now we can see in the simulator the purple platforms in the visible portion of the tile map.

 

Try moving the Ruby player sprite using the arrow keys to explore more of the level.

 

Uh oh, we can't! Ruby walks right off the edge of the screen!

 

This is because we haven't yet told the in-game camera to follow Ruby.

Camera Follow Sprite

From the Scene category, add a camera follow sprite block to the on start block.

 

Pick Ruby from the variable dropdown menu.

Now, when Ruby reaches the center of the screen, the camera tracks along with her and we can walk over to the previously unseen portions of the tile map.

Tile Sprite Art

Now, we'll really start to put the tile map to use by adding sprites. For all of the purple tiles, we'll add a sprite of pink blocks, and for the blue tiles, we'll add a sprite of ground blocks.

Add a set tile <index color> to <sprite> with wall block from the Scene category to the on start block.

 

Choose purple for the index color by clicking on the color swatch and selecting the purple swatch. This means that whatever sprite art we create and wall state will apply to all purple tiles in the tile map.

 

To create the block art, click on the sprite swatch and then use the pencil tool in the editor. You can get creative here, the block can look like anything you want inside of 16x16 pixels! (You can actually use other sizes, but for now we'll stick with this standard for most blocks for the best fit.)

 

Lastly, we want to indicate that our player sprite will not be able to overlap the purple tiles, but instead bump into them or jump onto them. Do so by flipping the with wall switch to on.

Ground Blocks

Let's give the ground tiles a sprite as well. You can duplicate the previous set tile block, then change the index color to the same blue you used for the ground tiles.

 

Create some artwork for these ground blocks in the sprite editor, and then click Done.

Now that we've got a ground tile in place, we can add "gravity" to the scene. This will help return Ruby to earth after she jumps. We'll do so by setting Ruby's acceleration on the y axis to 300, instead of the zero it was previously set to when the scene was prepared.

Add Gravity

Find the Function prepPlayer block in the scene.

 

In the set Ruby ay (acceleration y) block, change the value to 300.

Now, you can try jumping with the A button and you'll see Ruby jump up, then land on the ground, since it has the "wall" flag turned on.

Add Tiles

Now we can fill out the level a bit more by adding more platform blocks, a question mark block, a lava pit, a pipe, and a flagpole at the end of the level. For each distinctive type of block remember to use a unique color so you can add a tile sprite to it later.

Note, we'll used four tiles for the pipe, since we want the artwork for it to be larger than a single tile.

You'll notice that I've used two different color indices for the ground now -- there are standard ground blocks on the bottom layer and a variant that has a mossy top on the top layer.

Here's the full set of tile sprites and their indexed colors for the tile map:

Tile Sprite Sizing

Note how the single green tile is placed one tile unit above the ground and has clearance on it's right side -- this is because I created a larger, 32x32 pixel sprite for the pipe tile.

 

This means that the artwork occupies the space of four tiles and is a great way to create elements of different sizes, which can give your game level more visual interest than having every tile the same size.

This is what the full set of tile maps looks like inside of the on start block.

Tile Collisions

Another use of the tile map is to indicate when special events occur based on player sprite collisions with certain tiles. Again, the tile index color is used for this

For example, we can have a tile collision cause the player to earn points, and play an effect animation, or remove player lives, and even set the win condition for the game.

Collision Effects

 

From the Scene category, add an on sprite of kind Player hits wall block to your canvas.

 

We'll set this one up to add points when the question mark tile is hit. Going back to our tile map we can see that the question mark tile index color is yellow, so we'll change the index color of this collision block to yellow as well.

 

Next, we'll add an effect block. From the Sprites category, add a mySprite start spray effect block to the collision block as shown.

 

Change the drop down menu to Ruby for the sprite and the effect to fountain.

 

Lastly, click the + plus sign to have the effect only last for 500ms.

Add Points

Not only will we play an effect animation when Ruby hits the question mark tile, but we'll also add points!

From the Info category, add a change score by 1 block to the collision block as shown.

Game Over

The last thing we'll do is set up the red tile (lava) collision to cause a game over of type "lose" and a light blue tile (flag pole) collision to cause a game over of type "win".

Create or duplicate two more on sprite of kind player hits wall collision blocks. Set one to red tiles and the other to light blue.

From the Game category add a game over block to each of the two new collision blocks.

Set the red collision game over to type "lose" and the light blue on to type "win" by flipping the toggle as needed. (Depending on the version of MakeCode Arcade you're using you may need to first click a + plus sign to see the toggle switch in the game over blocks.)

You can now play your level! Try jumping up to the question mark for points, fall in the lava to end the game on a loss, or make it to the finish line!

You can download the .png with the code embedded here if you want to see the final version:

You can get an exact copy of the final game code by downloading this .png file, which has the game code embedded in it! Right click the image and pick "Save image as" to save it to your computer's hard drive, then drag the saved image right onto your MakeCode Arcade page in your Chrome browser window!

Next, we'll upload the game onto to the Pybadge!

This guide was first published on May 10, 2019. It was last updated on May 10, 2019. This page (Create a Tile Mapped Level in MakeCode Arcade) was last updated on Dec 05, 2019.