fix!: Update IsometricTileMapComponent to have better defined positio…

…n and size

examples/lib/stories/rendering/isometric_tile_map_example.dart

@@ -19,17 +19,17 @@ class IsometricTileMapExample extends FlameGame with MouseMovementDetector {
   static const srcTileSize = 32.0;
   static const destTileSize = scale * srcTileSize;
 
-  static const halfSize = true;
-  static const tileHeight = scale * (halfSize ? 8.0 : 16.0);
-  static const suffix = halfSize ? '-short' : '';
-
   final originColor = Paint()..color = const Color(0xFFFF00FF);
   final originColor2 = Paint()..color = const Color(0xFFAA55FF);
 
+  final bool halfSize;
+  late final tileHeight = scale * (halfSize ? 8.0 : 16.0);
+  late final suffix = halfSize ? '-short' : '';
+
   late IsometricTileMapComponent base;
   late Selector selector;
 
-  IsometricTileMapExample();
+  IsometricTileMapExample({required this.halfSize});
 
   @override
   Future<void> onLoad() async {
@@ -65,7 +65,7 @@ class IsometricTileMapExample extends FlameGame with MouseMovementDetector {
     super.render(canvas);
     canvas.renderPoint(topLeft, size: 5, paint: originColor);
     canvas.renderPoint(
-      topLeft.clone()..y -= tileHeight,
+      base.position + base.getBlockCenterPosition(const Block(0, 0)),
       size: 5,
       paint: originColor2,
     );

examples/lib/stories/rendering/rendering.dart

@@ -21,7 +21,11 @@ void addRenderingStories(Dashbook dashbook) {
     )
     ..add(
       'Isometric Tile Map',
-      (_) => GameWidget(game: IsometricTileMapExample()),
+      (context) => GameWidget(
+        game: IsometricTileMapExample(
+          halfSize: context.boolProperty('Half size', true),
+        ),
+      ),
       codeLink: baseLink('rendering/isometric_tile_map_example.dart'),
       info: IsometricTileMapExample.description,
     )

packages/flame/lib/src/components/isometric_tile_map_component.dart

@@ -1,3 +1,4 @@
+import 'dart:math';
 import 'dart:ui';
 
 import 'package:flame/components.dart';
@@ -57,6 +58,10 @@ class IsometricTileMapComponent extends PositionComponent {
   /// Where the tileset's image is stored.
   Sprite _renderSprite;
 
+  /// Displacement applied so that the origin of the component
+  /// matches the origin of the AABB.
+  final Vector2 _ds = Vector2.zero();
+
   IsometricTileMapComponent(
     this.tileset,
     this.matrix, {
@@ -70,7 +75,9 @@ class IsometricTileMapComponent extends PositionComponent {
     super.children,
     super.priority,
     super.key,
-  }) : _renderSprite = Sprite(tileset.image);
+  }) : _renderSprite = Sprite(tileset.image) {
+    _recomputeSize();
+  }
 
   /// This is the size the tiles will be drawn (either original or overwritten).
   Vector2 get effectiveTileSize => destTileSize ?? tileset.srcSize;
@@ -101,6 +108,11 @@ class IsometricTileMapComponent extends PositionComponent {
     }
   }
 
+  @override
+  void update(double dt) {
+    _recomputeSize();
+  }
+
   /// Get the position in which a block is rendered in, in the isometric space.
   ///
   /// This does not include the (x,y) PositionComponent offset!
@@ -124,7 +136,8 @@ class IsometricTileMapComponent extends PositionComponent {
     final cartesianPosition = _cartesianPositionCache
       ..setValues(i.toDouble(), j.toDouble())
       ..multiply(halfTile);
-    return cartToIso(cartesianPosition)..sub(halfTile);
+    return _ds + cartToIso(cartesianPosition)
+      ..sub(halfTile);
   }
 
   /// Get the position of the center of the surface of the isometric tile in
@@ -168,6 +181,7 @@ class IsometricTileMapComponent extends PositionComponent {
     final multiplier = 1 - halfTile.y / (2 * effectiveTileHeight * scale.x);
     final iso = _getBlockIsoCache
       ..setFrom(p)
+      ..sub(_ds)
       ..sub(position)
       ..translate(halfTile.x, halfTile.y * multiplier);
     final cart = isoToCart(iso);
@@ -210,4 +224,18 @@ class IsometricTileMapComponent extends PositionComponent {
         block.x >= 0 &&
         block.x < matrix[block.y].length;
   }
+
+  void _recomputeSize() {
+    final width = matrix.fold<int>(
+      0,
+      (previousValue, element) => max(previousValue, element.length),
+    );
+    final height = matrix.length;
+
+    size.x = effectiveTileSize.x * width;
+    size.y = effectiveTileSize.y * height / 2 + effectiveTileHeight;
+
+    _ds.x = size.x / 2;
+    _ds.y = effectiveTileHeight;
+  }
 }

packages/flame/test/components/isometric_tile_map_component_test.dart

@@ -65,7 +65,7 @@ void main() {
 
       expect(
         c.getBlockCenterPosition(const Block(0, 0)),
-        closeToVector(Vector2.zero()),
+        closeToVector(Vector2(32, 8)),
       );
     });
 
@@ -77,9 +77,10 @@ void main() {
         destTileSize: tileSize,
       );
       //expect the block to be directly below
+      final blockAbove = c.getBlockRenderPositionInts(0, 0);
       expect(
         c.getBlockRenderPositionInts(1, 1),
-        closeToVector(Vector2(-156 / 2, 12.5), 1e-13),
+        closeToVector(blockAbove + Vector2(0, 181 / 2), 1e-13),
       );
     });
   });