Flutter Intermediate Lesson 116 of 135 2 min read

Tile Maps in Flame with Tiled and flame_tiled

Build levels in the free Tiled editor and load them into a Flutter Flame game with flame_tiled: tilesets, layers, spawn points and walls.

On this page

Placing every wall and platform in code gets tiring. Tiled is a free map editor where you paint levels with small square images called tiles, then save them as a .tmx file. The flame_tiled package loads that file into your game.

This lesson needs map and image files, so run it on your computer.

1. Make a map in Tiled

Download Tiled from mapeditor.org (free).
New map: orthogonal, tile size 16×16, for example 40×20 tiles.
New tileset: choose a tileset image (free ones at Kenney.nl). Tick Embed in map to keep things simple.
Paint on a tile layer called Ground.
Add an object layer called Spawns and place a point named player.
Add an object layer called Walls and draw rectangles over solid areas.
Save as assets/tiles/level1.tmx, with the tileset image in assets/images/.

2. Install and register the files

flutter pub add flame_tiled

flutter:
  assets:
    - assets/images/
    - assets/tiles/

3. Load the map

// Not standalone: needs assets/tiles/level1.tmx and its tileset image
import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame_tiled/flame_tiled.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(GameWidget(game: LevelGame()));

class LevelGame extends FlameGame with HasCollisionDetection {
  @override
  Future<void> onLoad() async {
    final map = await TiledComponent.load('level1.tmx', Vector2.all(16));
    world.add(map);

    // Spawn point from the object layer
    final spawns = map.tileMap.getLayer<ObjectGroup>('Spawns');
    final start = spawns?.objects.firstWhere((o) => o.name == 'player');
    final player = RectangleComponent(
      size: Vector2(14, 14),
      position: Vector2(start?.x ?? 0, start?.y ?? 0),
    );
    world.add(player);

    // Solid walls from rectangles drawn in Tiled
    final walls = map.tileMap.getLayer<ObjectGroup>('Walls');
    for (final obj in walls?.objects ?? <TiledObject>[]) {
      world.add(PositionComponent(
        position: Vector2(obj.x, obj.y),
        size: Vector2(obj.width, obj.height),
        children: [RectangleHitbox(collisionType: CollisionType.passive)],
      ));
    }

    camera.follow(player);
  }
}

How to use the layers

Tiled layer	Use in the game
Tile layer	What the level looks like. Drawn automatically.
Object layer (points)	Where the player, enemies and coins start
Object layer (rectangles)	Walls, platforms, water, finish line
Custom properties	Extra data: `damage = 10`, `nextLevel = level2.tmx`

Several levels

Keep each level in its own file (level1.tmx, level2.tmx…) and load the next one when the player reaches the finish:

Future<void> loadLevel(String file) async {
  world.removeAll(world.children.toList());
  world.add(await TiledComponent.load(file, Vector2.all(16)));
  // ...spawn player, walls and enemies again
}

Try it yourself

Make a small level with a start point, a few platforms and a finish rectangle. Print “Level complete!” when the player’s hitbox touches the finish.