Setting the Scene

{Introduction }

The maps and levels in a game are important to make the game interesting to explore. Tilemaps are used to create maps for the player to explore, which can even be set to prevent the player from moving past certain points.

{Step 1 }

Find set tilemap to in Scene. Drag it into on start.

set tilemap toon start

{Step 2 }

Click on the grey box in set tilemap to to open the tilemap editor. Pick a tile from the gallery (or create your own under My Tiles), and draw a small tilemap for the tilemap.

Run the code, and notice that the tilemap is shown as the background. Each pixel of the drawing in the image editor is shown as a 16x16 square on the screen.

Example creating a tile and inserting into tilemap

set tilemap toon start

{Step 3 }

Find set mySprite to and drag it into on start to create a Sprite. Open the image editor for the Sprite and create an image to represent it on the screen.

Playerspriteof kindsetmySpritetoset tilemap toon start

{Step 4 }

Find move mySprite with buttons and drag it into on start after set mySprite to.

This lets the player move the character around the map that is displayed on the screen. However, there is one issue; the player can move straight through the beautiful tiles we designed! This is fixed by changing all of them to be Wall tiles.

Playerspriteof kindmySpritemovewith buttonssetmySpritetoset tilemap toon start

{Step 5 }

Open the tilemap editor, and click on the wall icon above Gallery. Use it to draw walls over the parts of your tilemap that the player shouldn’t be able to move through.

Example of drawing walls in the tilemap editor

Playerspriteof kindmySpritemovewith buttonssetmySpritetoset tilemap toon start

{Complete }

Congratulations, your first tilemap is complete! Try to move the character around the screen, or create more types of tiles. If you expand the tilemap image, you can create a larger map - if you do, use camera follow sprite mySprite to make it so the camera stays centered on the character you control, so that you can explore the entire map!