How to Save Tilemaps in Makecode Arcade (javascript)

(Mods if this doesn’t belong in the Help section, I’m allowing you to change it to any other tags.)


Saving and Loading Tilemaps in MakeCode Arcade

In MakeCode Arcade, tilemaps are the foundation of your game world. They define the layout of each level by arranging tiles—such as grass, walls, or water—into a grid. Sometimes you’ll want to save the current state of a tilemap so it can be restored later. This is especially useful for features like checkpoints, saving progress, or resetting a level after changes.


Step 1: Saving a Tilemap

To save a tilemap, you need to capture the arrangement of tiles and store it in a two‑dimensional array. This array acts like a blueprint of the map.

game.onUpdateInterval(5000, function () {
    let tilemap = tilemap`level1`
    let tilemapData: number[][] = []
    for (let y = 0; y < tilemap.height; y++) {
        tilemapData.push([])
        for (let x = 0; x < tilemap.width; x++) {
            tilemapData[y].push(tilemap.getTile(x, y))
        }
    }
    console.log(tilemapData) // prints the saved data
})

Here, the game checks the tilemap every five seconds. It creates a new array called tilemapData and loops through each row (y) and column (x) to record the tile’s ID. The result is a complete snapshot of the map stored in memory.


Step 2: Loading a Tilemap

Once you’ve saved the data, you can rebuild the map later by restoring each tile to its original position.

function tilemapFromData(data: number[][]) {
    let tilemap = tilemap`level1`
    for (let y = 0; y < tilemap.height; y++) {
        for (let x = 0; x < tilemap.width; x++) {
            tilemap.setTile(x, y, data[y][x])
        }
    }
    return tilemap
}

This function takes the saved data and loops through the map, setting each tile back to what it was. The result is a restored tilemap that matches the original layout.


Step 3: Why This Matters

  • Save progress: Players can return to the same map after quitting.
  • Dynamic maps: If tiles change during gameplay (like breaking blocks), you can restore them.
  • Debugging: Printing the tilemap data helps you understand how the map is structured.

You can also connect this system to a scene (game.currentScene().tileMap.data.layers[0]) if you want to manage multiple levels at once.


Conclusion

Saving and loading tilemaps in MakeCode Arcade gives you more control over your game’s state. By storing the layout in an array and restoring it when needed, you can create richer gameplay experiences with checkpoints, level resets, or even permanent save systems. It’s a simple but powerful technique that makes your games feel more polished and professional.

3 Likes

It’s like… this is really creepy, it’s like you knew what i needed, right in this exact moment. You don’t know just how useful this is for my heist jam game.

2 Likes

Glad to hear it helps, @ChimbroDaPro! Let me know if you need more info on tilemaps and more.

There is definitely a better way to get and save that data! You can actually access it directly! Here is a demo:

Press A to randomize the tilemap, and press reset to see that the tilemap has been saved!
I have written some comments to explain some stuff.
That “[``]” thing lets you access non-public members of an object without the compiler complaining and giving you an error.

4 Likes

How do you add notes to your project (in the blocks)?

1 Like

You can add them by right clicking on a block (tab and hold on touch screen) and clicking the Add Comment button.

2 Likes

right click

1 Like