feat: [flame_tiled] Components added to Layers draw in order. Parallax is now WYSIWYG.

packages/flame/lib/src/game/transform2d.dart

@@ -54,9 +54,21 @@ class Transform2D extends ChangeNotifier {
     ..scale = other.scale
     ..offset = other.offset;
 
+  factory Transform2D.fromInverse(Transform2D other) {
+    final t = other.clone();
+    t.angle = -t.angle;
+    t.position = -t.position;
+    t.scale = Vector2(1.0 / t.scale.x, 1.0 / t.scale.y);
+    t.offset = -t.offset;
+    return t;
+  }
+
   /// Clone of this.
   Transform2D clone() => Transform2D.copy(this);
 
+  /// Inverse of this.
+  Transform2D inverse() => Transform2D.fromInverse(this);
+
   /// Set this to the values of the [other] [Transform2D].
   void setFrom(Transform2D other) {
     angle = other.angle;

packages/flame_tiled/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 3.0.8
+
+- **FEAT**: Enable Tiled layers to respect component ordering for overlays and underlays. e.g. Foreground tiles obscure sprites. 
+- `RenderableLayer` is now a part of the public API.
+- `RenderableLayer` is now a `Component` with `HasPaint` and `Position` traits. All render and update methods modified to integrate naturally into the Flame lifecycle.
+- `RenderableTiledMap` has method `RenderableLayer? getRenderableLayer(String name)` to return the Flame component by name. 
+  - e.g. `mapComponent.tileMap.getRenderableLayer('Ground')`
+- Expanded the example map to be larger and placed coins beneath one of the layers to demonstrate this effect.
+- Adjusted the camera move effect to better show-case this example map as the previous one poorly scrolled too far away.
+
 ## 3.0.7
 
  - **REFACTOR**: Move MutableRSTransform out of flame_tiled package and into flame package ([#3695](https://github.com/flame-engine/flame/issues/3695)). ([7d644dd8](https://github.com/flame-engine/flame/commit/7d644dd84ce27e292b53f7310967393cf4c60618))

packages/flame_tiled/example/lib/main.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flame/components.dart';
 import 'package:flame/effects.dart';
 import 'package:flame/flame.dart';
@@ -9,6 +11,25 @@ void main() {
   runApp(GameWidget(game: TiledGame()));
 }
 
+class ScrollSnowComponent extends Component {
+  ScrollSnowComponent();
+  double _elapsed = 0;
+
+  @override
+  void update(double dt) {
+    if (parent is! RenderableLayer || parent == null) {
+      return;
+    }
+
+    final p = parent! as RenderableLayer;
+    _elapsed += dt;
+
+    p
+      ..offsetX -= sin(_elapsed * 0.5) * 3.0
+      ..offsetY += 1 + sin(_elapsed).abs();
+  }
+}
+
 class TiledGame extends FlameGame {
   late TiledComponent mapComponent;
 
@@ -27,29 +48,51 @@ class TiledGame extends FlameGame {
       ..anchor = Anchor.topLeft
       ..add(
         MoveToEffect(
-          Vector2(1000, 0),
+          Vector2(180, 90),
           EffectController(
-            duration: 10,
+            duration: 5,
             alternate: true,
             infinite: true,
           ),
         ),
       );
 
-    mapComponent = await TiledComponent.load('map.tmx', Vector2.all(16));
-    world.add(mapComponent);
+    mapComponent = await TiledComponent.load(
+      'map.tmx',
+      Vector2.all(16),
+    );
+    await world.add(mapComponent);
+
+    final snowLayer = mapComponent.tileMap.getRenderableLayer(
+      'Snow',
+    );
+
+    // This layer is toggled to scroll infinitely across both
+    // the x and y axis. Add a component to apply real-time
+    // scrolling behavior to make the snow fall!
+    if (snowLayer != null) {
+      await snowLayer.add(ScrollSnowComponent());
+    }
 
     final objectGroup = mapComponent.tileMap.getLayer<ObjectGroup>(
       'AnimatedCoins',
     );
+
+    // No coins to add. No work to be done.
+    if (objectGroup == null) {
+      return;
+    }
+
     final coins = await Flame.images.load('coins.png');
 
-    // We are 100% sure that an object layer named `AnimatedCoins`
-    // exists in the example `map.tmx`.
-    for (final object in objectGroup!.objects) {
-      world.add(
+    // Add sprites behind the ground decoration layer.
+    final groundLayer = mapComponent.tileMap.getRenderableLayer('Ground');
+
+    for (final object in objectGroup.objects) {
+      groundLayer?.add(
         SpriteAnimationComponent(
           size: Vector2.all(20.0),
+          anchor: Anchor.center,
           position: Vector2(object.x, object.y),
           animation: SpriteAnimation.fromFrameData(
             coins,

packages/flame_tiled/example/pubspec.yaml

@@ -23,3 +23,4 @@ flutter:
     - assets/images/level_standard_tileset.png
     - assets/images/repeatable_background.png
     - assets/images/coins.png
+    - assets/images/snow.png

packages/flame_tiled/lib/flame_tiled.dart

@@ -4,6 +4,7 @@ export 'package:tiled/tiled.dart';
 
 export 'src/extensions.dart';
 export 'src/flame_tsx_provider.dart';
+export 'src/renderable_layers/renderable_layer.dart';
 export 'src/renderable_tile_map.dart';
 export 'src/simple_flips.dart';
 export 'src/tile_atlas.dart';

packages/flame_tiled/lib/src/renderable_layers/group_layer.dart

@@ -1,50 +1,24 @@
-import 'package:flame/components.dart';
-import 'package:flame/extensions.dart';
 import 'package:flame_tiled/src/renderable_layers/renderable_layer.dart';
 import 'package:meta/meta.dart';
 import 'package:tiled/tiled.dart';
 
 @internal
 class GroupLayer extends RenderableLayer<Group> {
-  /// The child layers of this [Group] to be rendered recursively.
-  ///
-  /// NOTE: This is set externally instead of via constructor params because
-  ///       there are cyclic dependencies when loading the renderable layers.
-  late final List<RenderableLayer> children;
-
   GroupLayer({
     required super.layer,
     required super.parent,
+    required super.camera,
     required super.map,
     required super.destTileSize,
+    required super.layerPaintFactory,
     super.filterQuality,
   });
 
   @override
   void refreshCache() {
-    for (final child in children) {
+    final childLayers = children.whereType<RenderableLayer>();
+    for (final child in childLayers) {
       child.refreshCache();
     }
   }
-
-  @override
-  void handleResize(Vector2 canvasSize) {
-    for (final child in children) {
-      child.handleResize(canvasSize);
-    }
-  }
-
-  @override
-  void render(Canvas canvas, CameraComponent? camera) {
-    for (final child in children) {
-      child.render(canvas, camera);
-    }
-  }
-
-  @override
-  void update(double dt) {
-    for (final child in children) {
-      child.update(dt);
-    }
-  }
 }