feat: Add isometric support for flame_tiled

packages/flame_tiled/lib/src/renderable_tile_map.dart

@@ -258,41 +258,59 @@ class _RenderableTileLayer extends _RenderableLayer<TileLayer> {
   void _cacheLayerTiles() {
     final tileData = layer.tileData!;
     final batchMap = _cachedSpriteBatches;
-    tileData.asMap().forEach((ty, tileRow) {
-      tileRow.asMap().forEach((tx, tileGid) {
+    final halfTile = _destTileSize / 2;
+    for (var ty = 0; ty < tileData.length; ty++) {
+      final tileRow = tileData[ty];
+      for (var tx = 0; tx < tileRow.length; tx++) {
+        final tileGid = tileRow[tx];
         if (tileGid.tile == 0) {
-          return;
+          continue;
         }
+
         final tile = _map.tileByGid(tileGid.tile);
         final tileset = _map.tilesetByTileGId(tileGid.tile);
         final img = tile.image ?? tileset.image;
-        if (img != null) {
-          final batch = batchMap[img.source];
-          final src = tileset.computeDrawRect(tile).toRect();
-          final flips = SimpleFlips.fromFlips(tileGid.flips);
-          final size = _destTileSize;
-          final scale = size.x / src.width;
-          final anchorX = src.width / 2;
-          final anchorY = src.height / 2;
-          final offsetX = ((tx + .5) * size.x) + (layer.offsetX * scale);
-          final offsetY = ((ty + .5) * size.y) + (layer.offsetY * scale);
-          final scos = flips.cos * scale;
-          final ssin = flips.sin * scale;
-          if (batch != null) {
-            batch.addTransform(
-              source: src,
-              transform: ui.RSTransform(
-                scos,
-                ssin,
-                offsetX + -scos * anchorX + ssin * anchorY,
-                offsetY + -ssin * anchorX - scos * anchorY,
-              ),
-              flip: flips.flip,
-            );
-          }
+        if (img == null) {
+          continue;
         }
-      });
-    });
+
+        final batch = batchMap[img.source];
+        if (batch == null) {
+          continue;
+        }
+
+        final src = tileset.computeDrawRect(tile).toRect();
+        final flips = SimpleFlips.fromFlips(tileGid.flips);
+        final size = _destTileSize;
+        final scale = size.x / src.width;
+        final anchorX = src.width / 2;
+        final anchorY = src.height / 2;
+
+        late double offsetX;
+        late double offsetY;
+        if (_map.orientation == MapOrientation.isometric) {
+          offsetX = halfTile.x * (tx - ty);
+          offsetY = halfTile.y * (tx + ty);
+        } else {
+          offsetX = (tx + .5) * size.x;
+          offsetY = (ty + .5) * size.y;
+        }
+
+        final scos = flips.cos * scale;
+        final ssin = flips.sin * scale;
+
+        batch.addTransform(
+          source: src,
+          transform: ui.RSTransform(
+            scos,
+            ssin,
+            offsetX + -scos * anchorX + ssin * anchorY,
+            offsetY + -ssin * anchorX - scos * anchorY,
+          ),
+          flip: flips.flip,
+        );
+      }
+    }
   }
 
   @override

packages/flame_tiled/pubspec.yaml

@@ -22,4 +22,6 @@ dependencies:
 dev_dependencies:
   dartdoc: ^6.0.1
   flame_lint: ^0.1.2
+  flutter_test:
+    sdk: flutter
   test: any

packages/flame_tiled/test/assets/test_isometric.tmx

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.9" tiledversion="1.9.1" orientation="isometric" renderorder="right-down" width="5" height="5" tilewidth="128" tileheight="64" infinite="0" nextlayerid="4" nextobjectid="1">
+ <tileset firstgid="1" name="isometric_spritesheet" tilewidth="128" tileheight="256" tilecount="4" columns="1">
+  <image source="isometric_spritesheet.png" width="128" height="1024"/>
+ </tileset>
+ <layer id="1" name="ground" width="5" height="5">
+  <data encoding="base64">
+   AgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAQAAAACAAAAAwAAAAMAAAACAAAAAwAAAAIAAAADAAAAAgAAAAIAAAAEAACAAgAAAAMAAAACAAAAAwAAAAIAAAACAAAAAgAAAA==
+  </data>
+ </layer>
+ <layer id="2" name="item" width="5" height="5">
+  <data encoding="base64">
+   AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACAAAAAAAAAAAAAAAAAAAAAAA==
+  </data>
+ </layer>
+</map>

packages/flame_tiled/test/tiled_test.dart

@@ -1,4 +1,3 @@
-import 'dart:async';
 import 'dart:io';
 import 'dart:typed_data';
 import 'dart:ui';
@@ -7,7 +6,7 @@ import 'package:flame/extensions.dart';
 import 'package:flame/flame.dart';
 import 'package:flame_tiled/flame_tiled.dart';
 import 'package:flutter/services.dart' show CachingAssetBundle;
-import 'package:test/test.dart';
+import 'package:flutter_test/flutter_test.dart';
 import 'package:tiled/tiled.dart';
 
 void main() {
@@ -264,6 +263,42 @@ void main() {
       );
     });
   });
+
+  group('isometric', () {
+    late Uint8List pngData;
+    late RenderableTiledMap overlapMap;
+
+    test('renders', () async {
+      Flame.bundle = TestAssetBundle(
+        imageNames: [
+          'isometric_spritesheet.png',
+        ],
+        mapPath: 'test/assets/test_isometric.tmx',
+      );
+      overlapMap = await RenderableTiledMap.fromFile(
+        'test_isometric.tmx',
+        Vector2(256 / 4, 128 / 4),
+      );
+
+      final canvasRecorder = PictureRecorder();
+      final canvas = Canvas(canvasRecorder);
+      // Isometric maps are centered with tile(0,0) being at the top.
+      // So translate the canvas halfway.
+      canvas.translate((256 * 5) / 4 / 2, 0);
+      overlapMap.render(canvas);
+      final picture = canvasRecorder.endRecording();
+
+      // Map size is now 320 wide, but it has 1 extra tile of height becusae
+      // its actually double-height tiles.
+      final image =
+          await picture.toImageSafe(256 * 5 ~/ 4, (128 * 5 + 128) ~/ 4);
+      pngData = (await image.toByteData(format: ImageByteFormat.png))!
+          .buffer
+          .asUint8List();
+
+      expect(pngData, matchesGoldenFile('goldens/isometric.png'));
+    });
+  });
 }
 
 class TestAssetBundle extends CachingAssetBundle {