生成等轴测图的示例

这是使用 Tiled Map Editor 创建的等轴测瓦片地图的渲染示例，使用 Flutter 的游戏引擎 Flame，配合 IsometricTileMapComponent。以下是使用 IsometricTileMapComponent 和 Tiled Map Editor 创建的等轴测瓦片地图的渲染示例。

用法

flutter run

创建参考

使用 Tiled Map Editor 创建等轴测瓦片地图。

在这种情况下，Flame 1.6.0 似乎不支持矩形地图，因此必须选择“Isometric”（而不是 Isometric (Staggered)）作为方向。

选择以下形状的地图。

至于瓦片集，它们是以方形映射的。

本次我们使用的是来自 OpenGameArt.org 的 Seth Galbraith 创作的素材，这是一个提供免费素材的网站。

层

至于图层，它们被放置在三个独立的图层中：“bottom”、“middle”和“top”。

主要地板放置在“bottom”层。 “middle”层用于墙壁等。 “top”层主要用于屋顶，地图的创建如下所示。

FlameIsometric

Flame 1.6.0 版本的 IsometricTileMapComponent 没有提供一个简单的接口来导入 Tiled Map Editor 生成的瓦片地图，而是使用 tilesetImage 和 matrix 来生成。接口通过 tilesetImage 和 matrix 生成。

因此，我们使用 ‘package:tiled/tiled.dart’ 和 ‘package:flame/sprite.dart’，通过 TileMapParser 分析 tmx 数据并创建矩阵，然后将矩阵调整为与 SpriteSheet 索引匹配，并通过 SpriteSheet 组件生成瓦片集。通过将矩阵和瓦片集传递给 IsometricTileMapComponent，可以渲染出 IsometricMap。

这些由 FlameIsometric 类 处理，可以通过传递瓦片地图图片路径和 tmx 文件路径来生成。

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

矩阵是逐层生成的，所有层的矩阵都存储在 flameIsometric 实例的 matrixList 中。

渲染通过 for 语句等按图层顺序进行。

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()),
    ),
  );
}

贡献者

版权所有者

isometric-64×64-medieval-building-tileset

Seth Galbraith

非常感谢。

作者

Daisuke Takayama

GitHub

查看 Github