How to Save Tilemaps in Makecode Arcade (javascript)

Arcade Help
, , , ,
1

(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.