The matrix required to render an isometric tile map using the IsometricTileMapComponent in Flame, Flutter's frame game engine. This plugin generates the

The Flame 1.6.0 version of IsometricTileMapComponent does not provide an interface to easily import tile maps generated by the Tiled Map Editor, but rather generates them using tilesetImage and matrix. The interface is generated by tilesetImage and matrix.

So, using 'package:tiled/tiled.dart' and 'package:flame/sprite.dart', we analyze the tmx data with TileMapParser and create a matrix, The matrix is then adjusted to match the SpriteSheet index, and the tileset is generated by the SpriteSheet component. By passing the matrix and tileset to IsometricTileMapComponent, an IsometricMap is rendered.

They are handled by the FlameIsometric class, which can be generated by passing the tileMap image path and the tmx file path.

final flameIsometric = await FlameIsometric.create(tileMap: 'tile_map.png', tmx: 'tiles/tile_map.tmx');

The matrix is generated layer by layer, and the matrices for all layers are stored in the matrixList of the flameIsometric instance.

Rendering is performed in layer order using for statements, etc.

for (var i = 0; i < flameIsometric.layerLength; i++) {
  add(
    IsometricTileMapComponent(
      flameIsometric.tileset,
      flameIsometric.renderMatrixList[i],
      destTileSize: flameIsometric.srcTileSize,
      position: Vector2(gameSize.x / 2, flameIsometric.tileHeight.toDouble()),
    ),
  );
}

Multiple tilesets are also supported.

Specify a tileMap with a List as the argument, and tsxList also specifies a List as the argument.

Please note that tsxList is required in this case.

final flameIsometric = await FlameIsometric.create(
    tileMap: ['tile_map.png', 'tile_map2.png'],
    tsxList: ['tiles/tile_map.tsx', 'tiles/tile_map2.tsx'],
    tmx: 'tiles/tile_map2.tmx'
);

One is a tileset of size 64x64.

The other is to use a tileset of size 128x128 and tilesets of different sizes.

When combined, the tiled map looks like this. You can use this map to adapt the game engine to use the Flame game engine.

The exact layer containing multiple tile chips is stored in renderLayerList and can be retrieved by specifying it with a for statement.

A custom version of IsometricTileMapComponent, called CustomIsometricTileMapComponent, can be used for easy rendering.

for (var renderLayer in flameIsometric.renderLayerList) {
  add(
    CustomIsometricTileMapComponent(
      renderLayer.spriteSheet,
      renderLayer.matrix,
      destTileSize: flameIsometric.srcTileSize,
      position:
      Vector2(gameSize.x / 2, flameIsometric.tileHeight.toDouble()),
    ),
  );
}

:::note warn Tile sets of different sizes can be displayed, but the position of the tileset to be drawn is misaligned and still needs to be adjusted. :::

These sample sources can be found here.

Use the Tiled Map Editor to create an Isometric tile map.

In this case, Flame 1.6.0 does not seem to support rectangular maps, so "Isometric" (not Isometric (Staggered)) must be selected for Orientation.

Select a map of the following shape.

As for tile sets, they are mapped in squares.

This time, we are using materials created by Seth Galbraith from OpenGameArt.org, a website that provides free materials.

As for layers, they are placed in three separate layers: "bottom," "middle," and "top.

Mainly, the floor is placed in the "bottom" layer. The "middle" layer is for walls, etc. The "top" layer is mainly used for roofs, and the map is created as shown below.

isometric-64x64-medieval-building-tileset : Seth Galbraith

basic isometric tiles 128x128 : ToxSickProductions.com

I appreciate it very much.

Daisuke Takayama

• @webcyou
• @panicdragon
• https://github.com/webcyou
• https://github.com/webcyou-org
• https://github.com/panicdragon
• https://www.webcyou.com/