tiled_support.md

Tiled support

Tested in Tiled version 1.9.0

Video example

Support for maps built with Tiled using the extension .json.

• Multi TileLayer
• Multi ObjectLayer
• TileSet
• Tile Animated
• Load Map from URL
• Text
• Image Layer

Collision

• MultiCollision
• Retangle Collision
• Circle Collision
• Polygon Collision
• Point Collision

Using

Add the files generated by Tiled to the project by following the base: assets/images/

flutter:
  assets:
    - assets/images/tiled/map.json
    - assets/images/tiled/tile_set.json
    - assets/images/tiled/img_tile_set.png

For maps built with Tiled we must use the Widget BonfireWidget (example here):

WorldMapByTiled map = WorldMapByTiled(
    'tiled/mapa.json', // main file path or url (example: http://rafaelbarbosatec.github.io/tiled/my_map.json)
    forceTileSize: DungeonMap.tileSize, // if you want to force the size of the Tile to be larger or smaller than the original
    objectsBuilder: {
        'goblin': (TiledObjectProperties properties) => Goblin(properties.position),
        'torch': (TiledObjectProperties properties) => Torch(properties.position),
        'barrel': (TiledObjectProperties properties) => BarrelDraggable(properties.position,),
    },
  );

return BonfireWidget(
      joystick: Joystick(
        directional: JoystickDirectional(
          size: 100,
          isFixed: false,
        ),
      map: map,
      lightingColorGame: Colors.black.withOpacity(0.5),
    );

Tiled map example

If you want the Tile to be drawn above the player add type: above in your tileSet.

Result:

Useful

You can set type in your tile to above to render this tile above all components in your game. If you need that the all tiles of layer render above all components you can create a Custom Property in your layer and create one named type with value above.

You can set type in your tile to dynamicAbove to render this tile dynamic by Y axis.

You can set type in your Object to collision. This object will be add in the game with transparency and collision.