Loading a tile map

In the Technical requirements section, we added our tile map files and the flame_tiled library, which is used for loading and displaying tile maps.

Each tile is 32 x 32 pixels, and the map is 50 tiles wide by 50 tiles high, so our total map size in pixels will be 1,600 x 1,600 pixels, which is 50 * 32 for width and height.

You can open the tiles.tmx file in Tiled if you want to see how the tile map looks there, but here is a screenshot of how our tile map looks when loaded and drawn:

Figure 7.4 – The Gold Rush tile map

The map is basic with water around the edges and paths leading to the center of the map, with grass everywhere else on the map.

We will use this as our base, adding objects and enemies to the map and collision detection to the water areas to prevent George or the enemies from moving off the edges of the map.

Let's get started by loading the tile map and displaying it:

1. Open the main.dart file...