Skip to content

In this sample, we try isometric map generation using Flame, Flutter's game engine.

Notifications You must be signed in to change notification settings

flame-games/isometric_map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sample to generate an isometric map

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.

Click here to see a sample of how it works on the web.

We have made this into a dart package and distributed it as flame_isometric at pub.dev.

Usage

flutter run

Create Reference

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.

Layers

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.

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-64x64-medieval-building-tileset

Seth Galbraith

I appreciate it very much.

Author

Daisuke Takayama

About

In this sample, we try isometric map generation using Flame, Flutter's game engine.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published