feat: Adding support for additional layer rendering options (#1794)

This PR expands the functionality of RenderableTileMap to include support for more than just simple TileLayer layers. Adding support for:

    ImageLayer rendering (note that tiled.dart was loading non-tile layers in the incorrect order until 0.8.4)
    layer parallaxX / parallaxY
    layer opacity
    map backgroundColor

tiled dependency

This PR relies on changes and bug fixes in tiled.dart 0.8.4

doc/other_modules/tiled.md

@@ -9,9 +9,11 @@ the tiles, objects and everything in there.
 Flame also provides a simple `Tiled` class and its component wrapper `TiledComponent`, for the map
 rendering, which renders the tiles on the screen and supports rotations and flips.
 
+## Layers
+
 At its simplest, layers can be retrieved from a Tilemap by invoking:
 
-```
+```dart
 getLayer<ObjectGroup>("myObjectGroupLayer");
 getLayer<ImageLayer>("myImageLayer");
 getLayer<TileLayer>("myTileLayer");
@@ -20,9 +22,30 @@ getLayer<Group>("myGroupLayer");
 
 These methods will either return the requested layer type or null if it does not exist.
 
+### Layer properties
+
+| Property              | Supported?  |
+| -----------           | ----------- |
+| Visible               | ✅          |
+| Opacity               | ✅          |
+| Tint color            | ❌          |
+| Horizontal offset     | ✅          |
+| Horizontal offset     | ✅          |
+| Parallax Factor       | ✅          |
+| Custom properties     | ✅          |
+
+## Tiles properties
+
+- Tiles can have custom properties accessible at `tile.properties`.
+- Tiles can have a custom `type` (or `class` starting in Tiled v1.9) accessible at `tile.type`.
+
+## Other features
+
 Other advanced features are not yet supported, but you can easily read the objects and other
 features of the tmx and add custom behaviour (eg regions for triggers and walking areas, custom
 animated objects).
 
+## Full Example
+
 You can check a working example
 [here](https://github.com/flame-engine/flame_tiled/tree/main/example).

packages/flame_tiled/README.md

@@ -7,7 +7,7 @@
 Package to bridge the `tiled` library into easy-to-use Flame components.
 
 <p align="center">
-    <img alt="flame_tiled example" width="200px" src="/packages/flame_tiled/screenshot.png">
+    <img alt="flame_tiled example" width="200px" src="/packages/flame_tiled/example/screenshot.png">
 </p>
 
 More [here](https://docs.flame-engine.org/main/tiled.html).

packages/flame_tiled/example/README.md

@@ -1,3 +1,12 @@
 # flame_tiled example
 
 Simple project to showcase the usage of flame_tiled by rendering a tile map.
+
+<p align="center">
+    <img alt="flame_tiled example" width="200px" src="/packages/flame_tiled/example/screenshot.png">
+</p>
+
+### Credits
+
+- Level tilesets: [erayzesen.itch.io/pixel-platformer](https://erayzesen.itch.io/pixel-platformer)
+  created by [@erayzesen](https://twitter.com/erayzesen)

packages/flame_tiled/example/lib/main.dart

@@ -10,15 +10,24 @@ void main() {
 }
 
 class TiledGame extends FlameGame {
+  late TiledComponent mapComponent;
+
+  double time = 0;
+  Vector2 cameraTarget = Vector2.zero();
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    final tiledMap = await TiledComponent.load('map.tmx', Vector2.all(16));
-    add(tiledMap);
+    mapComponent = await TiledComponent.load('map.tmx', Vector2.all(16));
+    add(mapComponent);
 
-    final objGroup = tiledMap.tileMap.getLayer<ObjectGroup>('AnimatedCoins');
+    final objGroup =
+        mapComponent.tileMap.getLayer<ObjectGroup>('AnimatedCoins');
     final coins = await Flame.images.load('coins.png');
 
+    camera.zoom = 0.5;
+    camera.viewport = FixedResolutionViewport(Vector2(16 * 28, 16 * 14));
+
     // We are 100% sure that an object layer named `AnimatedCoins`
     // exists in the example `map.tmx`.
     for (final obj in objGroup!.objects) {
@@ -38,4 +47,20 @@ class TiledGame extends FlameGame {
       );
     }
   }
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+    time += dt;
+    final tiledMap = mapComponent.tileMap.map;
+    // Pan the camera down and right for 10 seconds, then reverse
+    if (time % 20 < 10) {
+      cameraTarget.x = tiledMap.width * tiledMap.tileWidth.toDouble() -
+          camera.viewport.effectiveSize.x;
+      cameraTarget.y = camera.viewport.effectiveSize.y;
+    } else {
+      cameraTarget.setZero();
+    }
+    camera.moveTo(cameraTarget);
+  }
 }

packages/flame_tiled/example/pubspec.yaml

@@ -18,6 +18,7 @@ flutter:
   uses-material-design: true
   assets:
     - assets/tiles/map.tmx
-    - assets/images/map-level1.png
-    - assets/images/map-level2.png
+    - assets/images/level_ice_tileset.png
+    - assets/images/level_standard_tileset.png
+    - assets/images/repeatable_background.png
     - assets/images/coins.png