fix: Compute scale in TileLayers based on native map tile size rather…

… than image sizes to support oversized/undersized tiles. (#2634) Compute isometric tile scale based on the map's tile size rather than the tile image's default size. This fixes an issue where scale was incorrect when those two sizes differed.
flame-engine · Aug 7, 2023 · 1c4d6cd · 1c4d6cd
1 parent a35d3a1
commit 1c4d6cd
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 4 deletions.
diff --git a/packages/flame_tiled/lib/src/renderable_layers/tile_layers/hexagonal_tile_layer.dart b/packages/flame_tiled/lib/src/renderable_layers/tile_layers/hexagonal_tile_layer.dart
@@ -96,7 +96,7 @@ class HexagonalTileLayer extends FlameTileLayer {
         }
 
         final flips = SimpleFlips.fromFlips(tileGid.flips);
-        final scale = size.x / src.width;
+        final scale = size.x / map.tileWidth;
         final anchorX = src.width - halfMapTile.x;
         final anchorY = src.height - halfMapTile.y;
 

diff --git a/packages/flame_tiled/lib/src/renderable_layers/tile_layers/isometric_tile_layer.dart b/packages/flame_tiled/lib/src/renderable_layers/tile_layers/isometric_tile_layer.dart
@@ -61,7 +61,7 @@ class IsometricTileLayer extends FlameTileLayer {
               .translate(spriteOffset.dx, spriteOffset.dy),
         );
         final flips = SimpleFlips.fromFlips(tileGid.flips);
-        final scale = size.x / src.width;
+        final scale = size.x / map.tileWidth;
         final anchorX = src.width - halfMapTile.x;
         final anchorY = src.height - halfMapTile.y;
 

diff --git a/packages/flame_tiled/lib/src/renderable_layers/tile_layers/orthogonal_tile_layer.dart b/packages/flame_tiled/lib/src/renderable_layers/tile_layers/orthogonal_tile_layer.dart
@@ -60,7 +60,7 @@ class OrthogonalTileLayer extends FlameTileLayer {
         );
 
         final flips = SimpleFlips.fromFlips(tileGid.flips);
-        final scale = size.x / src.width;
+        final scale = size.x / map.tileWidth;
         final anchorX = src.width - halfMapTile.x;
         final anchorY = src.height - halfMapTile.y;
 

diff --git a/packages/flame_tiled/lib/src/renderable_layers/tile_layers/staggered_tile_layer.dart b/packages/flame_tiled/lib/src/renderable_layers/tile_layers/staggered_tile_layer.dart
@@ -96,7 +96,7 @@ class StaggeredTileLayer extends FlameTileLayer {
         }
 
         final flips = SimpleFlips.fromFlips(tileGid.flips);
-        final scale = size.x / src.width;
+        final scale = size.x / map.tileWidth;
         final anchorX = src.width - halfMapTile.x;
         final anchorY = src.height - halfMapTile.y;
 

diff --git a/packages/flame_tiled/test/assets/oversized_tiles_hexagonal.tmx b/packages/flame_tiled/test/assets/oversized_tiles_hexagonal.tmx
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.1" orientation="hexagonal" renderorder="right-down" width="4" height="4" tilewidth="16" tileheight="16" infinite="0" hexsidelength="8" staggeraxis="y" staggerindex="odd" nextlayerid="2" nextobjectid="1">
+ <tileset firstgid="1" name="0x72_DungeonTilesetII_v1.4" tilewidth="32" tileheight="32" tilecount="256" columns="16">
+  <image source="0x72_DungeonTilesetII_v1.4.png" width="512" height="512"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="4" height="4">
+  <data encoding="base64" compression="zlib">
+   eJxjYEAFrlA6lQE7KIbSJUC8AIgBKkgCMg==
+  </data>
+ </layer>
+</map>
diff --git a/packages/flame_tiled/test/assets/oversized_tiles_isometric.tmx b/packages/flame_tiled/test/assets/oversized_tiles_isometric.tmx
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.1" orientation="isometric" renderorder="right-down" width="4" height="4" tilewidth="16" tileheight="16" infinite="0" nextlayerid="2" nextobjectid="1">
+ <tileset firstgid="1" name="0x72_DungeonTilesetII_v1.4" tilewidth="32" tileheight="32" tilecount="256" columns="16">
+  <image source="0x72_DungeonTilesetII_v1.4.png" width="512" height="512"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="4" height="4">
+  <data encoding="base64" compression="zlib">
+   eJxjYMAOiqB0EpQOhtKFaOoALSgBmQ==
+  </data>
+ </layer>
+</map>
diff --git a/packages/flame_tiled/test/assets/oversized_tiles_orthogonal.tmx b/packages/flame_tiled/test/assets/oversized_tiles_orthogonal.tmx
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.1" orientation="orthogonal" renderorder="right-down" width="4" height="4" tilewidth="16" tileheight="16" infinite="0" nextlayerid="2" nextobjectid="1">
+ <tileset firstgid="1" name="0x72_DungeonTilesetII_v1.4" tilewidth="32" tileheight="32" tilecount="256" columns="16">
+  <image source="0x72_DungeonTilesetII_v1.4.png" width="512" height="512"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="4" height="4">
+  <data encoding="base64" compression="zlib">
+   eJxjYEAFxVC6hAE7KITSRVAaADKQAcs=
+  </data>
+ </layer>
+</map>
diff --git a/packages/flame_tiled/test/assets/oversized_tiles_staggered.tmx b/packages/flame_tiled/test/assets/oversized_tiles_staggered.tmx
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.1" orientation="staggered" renderorder="right-down" width="4" height="4" tilewidth="16" tileheight="16" infinite="0" staggeraxis="y" staggerindex="odd" nextlayerid="2" nextobjectid="1">
+ <tileset firstgid="1" name="0x72_DungeonTilesetII_v1.4" tilewidth="32" tileheight="32" tilecount="256" columns="16">
+  <image source="0x72_DungeonTilesetII_v1.4.png" width="512" height="512"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="4" height="4">
+  <data encoding="base64" compression="zlib">
+   eJxjYMANDgBxEppYMZQuAeI+IAYANIgCmA==
+  </data>
+ </layer>
+</map>
diff --git a/packages/flame_tiled/test/goldens/oversized_tiles_hexagonal.png b/packages/flame_tiled/test/goldens/oversized_tiles_hexagonal.png
diff --git a/packages/flame_tiled/test/goldens/oversized_tiles_isometric.png b/packages/flame_tiled/test/goldens/oversized_tiles_isometric.png
diff --git a/packages/flame_tiled/test/goldens/oversized_tiles_orthogonal.png b/packages/flame_tiled/test/goldens/oversized_tiles_orthogonal.png
diff --git a/packages/flame_tiled/test/goldens/oversized_tiles_staggered.png b/packages/flame_tiled/test/goldens/oversized_tiles_staggered.png
diff --git a/packages/flame_tiled/test/tiled_test.dart b/packages/flame_tiled/test/tiled_test.dart
@@ -866,4 +866,39 @@ void main() {
       });
     }
   });
+
+  group('oversized tiles', () {
+    late TiledComponent component;
+    final size = Vector2(16, 16);
+
+    for (final mapType in [
+      'orthogonal',
+      'isometric',
+      'hexagonal',
+      'staggered'
+    ]) {
+      group(mapType, () {
+        setUp(() async {
+          Flame.bundle = TestAssetBundle(
+            imageNames: [
+              '0x72_DungeonTilesetII_v1.4.png',
+            ],
+            stringNames: ['oversized_tiles_$mapType.tmx'],
+          );
+          component = await TiledComponent.load(
+            'oversized_tiles_$mapType.tmx',
+            size,
+          );
+        });
+
+        test('renders ($mapType)', () async {
+          final pngData = await renderMapToPng(component);
+          await expectLater(
+            pngData,
+            matchesGoldenFile('goldens/oversized_tiles_$mapType.png'),
+          );
+        });
+      });
+    }
+  });
 }