Flutter Flame_Tiled是否支持从关联TSX文件的关卡中加载碰撞体？

Yes, you absolutely can! The flame_tiled library fully supports parsing colliders defined in linked TSX tileset files when loading your TMX level. Here's a breakdown of how it works and how to implement it:

How it works under the hood #

When you call TiledComponent.load() (like your example code), the library doesn't just load the TMX file—it also resolves and parses any linked TSX tilesets. For tiles in the TSX that have <objectgroup> elements (such as your tile IDs 20 and 21 with rectangular objects), those objects are automatically converted into collision shapes that integrate with Flame's collision system.

Step-by-step implementation #

1. Enable collision detection in your game #

First, ensure your main game class uses the HasCollisionDetection mixin to activate Flame's collision handling:

class MyFlameGame extends FlameGame with HasCollisionDetection {
  // Your game logic here
}

2. Load the level (your existing code works!) #

Your current loading code is perfectly valid—just add the loaded component to your game:

final level = await TiledComponent.load('intro.tmx', Vector2.all(32));
add(level);

The library will automatically pull in colliders from the linked TSX tileset.

3. Use the colliders with your game objects #

To interact with these colliders (e.g., prevent your player from walking through walls), make sure your player (or other interactive components) use the Collidable mixin and have a hitbox:

class Player extends SpriteComponent with Collidable {
  Player() : super(size: Vector2(32, 32)) {
    // Add a hitbox that matches your player's size
    add(HitboxRectangle());
  }
}

Flame's collision system will automatically handle collisions between your player and the tiles with colliders from the TSX.

4. Inspect colliders (for debugging) #

If you want to verify that colliders are being loaded correctly, you can loop through the tiles in the TiledComponent and check their collision shapes:

level.tileMap.layers.forEach((layer) {
  if (layer is TileLayer) {
    for (final tile in layer.tiles) {
      if (tile != null && tile.collisionShapes.isNotEmpty) {
        print('Tile ID ${tile.id} has ${tile.collisionShapes.length} collider(s)');
      }
    }
  }
});

Key notes #

• Double-check that your TMX file correctly references the TSX (the <tileset> tag's source attribute should point to the right path relative to the TMX file).
• The library supports all common collider shapes from Tiled: rectangles, polygons, and ellipses are converted to their corresponding Flame hitbox types.

内容的提问来源于stack exchange，提问作者Ozemand