Sample to generate an isometric map

Isometric map generation using Flame, Flutter's game engine

This is a sample of rendering an Isometric tile map created with the Tiled Map Editor using Flame, Flutter’s frame game engine, with IsometricTileMapComponent. The following is a sample of rendering an Isometric tile map created with the Tiled Map Editor using the IsometricTileMapComponent.

Usage

flutter run

Isometric map generation using Flame, Flutter's game engine

Create Reference

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

Isometric map generation using Flame, Flutter's game engine

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

Isometric map generation using Flame, Flutter's game engine

Select a map of the following shape.

Isometric map generation using Flame, Flutter's game engine

As for tile sets, they are mapped in squares.

Isometric map generation using Flame, Flutter's game engine

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

Layers

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

Isometric map generation using Flame, Flutter's game engine

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 map generation using Flame, Flutter's game engine

FlameIsometric

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.matrixList[i],
      destTileSize: flameIsometric.srcTileSize,
      position: Vector2(gameSize.x / 2, flameIsometric.tileHeight.toDouble()),
    ),
  );
}

Contributor

copyright holder

isometric-64×64-medieval-building-tileset

Seth Galbraith

I appreciate it very much.

Author

Daisuke Takayama

GitHub

View Github

Entradas similares

Deja una respuesta