feat: Animated tile support! (#1930)

Tiled supports animated tiles, and now Flame does as well...

.markdownlint.yaml

@@ -57,7 +57,7 @@ MD011: true
 
 # MD012/no-multiple-blanks - Multiple consecutive blank lines
 MD012:
-# Consecutive blank lines
+ # Consecutive blank lines
  maximum: 2
 
 # MD013/line-length - Line length
@@ -235,6 +235,4 @@ MD052: true
 # MD053/link-image-reference-definitions - Link and image reference definitions should be needed
 MD053:
  # Ignored definitions
- ignored_definitions: [
- "//"
- ]
+ ignored_definitions: ["//"]

examples/assets/tiles/0x72_DungeonTilesetII_v1.4.tsx

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<tileset version="1.9" tiledversion="1.9.2" name="0x72_DungeonTilesetII_v1.4" tilewidth="16" tileheight="16" tilecount="1024" columns="32">
+ <image source="../images/0x72_DungeonTilesetII_v1.4.png" width="512" height="512"/>
+ <tile id="36">
+ <animation>
+ <frame tileid="36" duration="180"/>
+ <frame tileid="37" duration="180"/>
+ <frame tileid="38" duration="180"/>
+ </animation>
+ </tile>
+ <tile id="68">
+ <animation>
+ <frame tileid="68" duration="180"/>
+ <frame tileid="69" duration="180"/>
+ <frame tileid="70" duration="180"/>
+ </animation>
+ </tile>
+ <tile id="100">
+ <animation>
+ <frame tileid="100" duration="180"/>
+ <frame tileid="101" duration="180"/>
+ <frame tileid="102" duration="180"/>
+ </animation>
+ </tile>
+ <tile id="132">
+ <animation>
+ <frame tileid="132" duration="180"/>
+ <frame tileid="133" duration="180"/>
+ <frame tileid="134" duration="180"/>
+ </animation>
+ </tile>
+ <tile id="356">
+ <animation>
+ <frame tileid="353" duration="70"/>
+ <frame tileid="354" duration="70"/>
+ <frame tileid="355" duration="70"/>
+ <frame tileid="356" duration="70"/>
+ <frame tileid="355" duration="70"/>
+ <frame tileid="354" duration="70"/>
+ </animation>
+ </tile>
+ <tile id="368">
+ <animation>
+ <frame tileid="44" duration="130"/>
+ <frame tileid="45" duration="130"/>
+ <frame tileid="46" duration="130"/>
+ <frame tileid="47" duration="130"/>
+ <frame tileid="48" duration="130"/>
+ </animation>
+ </tile>
+ <tile id="496">
+ <animation>
+ <frame tileid="488" duration="210"/>
+ <frame tileid="489" duration="210"/>
+ <frame tileid="490" duration="210"/>
+ <frame tileid="491" duration="210"/>
+ </animation>
+ </tile>
+ <tile id="627">
+ <animation>
+ <frame tileid="627" duration="210"/>
+ <frame tileid="628" duration="210"/>
+ <frame tileid="629" duration="210"/>
+ <frame tileid="628" duration="210"/>
+ </animation>
+ </tile>
+ <tile id="659">
+ <animation>
+ <frame tileid="659" duration="210"/>
+ <frame tileid="660" duration="210"/>
+ <frame tileid="661" duration="210"/>
+ </animation>
+ </tile>
+</tileset>

examples/assets/tiles/dungeon.tmx

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.9" tiledversion="1.9.2" orientation="orthogonal" renderorder="right-down" width="10" height="10" tilewidth="16" tileheight="16" infinite="0" nextlayerid="6" nextobjectid="1">
+ <tileset firstgid="1" source="0x72_DungeonTilesetII_v1.4.tsx"/>
+ <layer id="3" name="ground" width="10" height="10" locked="1">
+ <data encoding="base64" compression="gzip">
+ H4sIAAAAAAAACmNgoAw0Y6FHMfkYAK7z31GQAQAA
+ </data>
+ </layer>
+ <layer id="1" name="walls" width="10" height="10">
+ <data encoding="base64" compression="gzip">
+ H4sIAAAAAAAACp3Q7QmDMBSF4ZuELFIVF9FNdBQXae0i4scegnYNXzDgKfSH9MJDksPh/og3My+i0Dw4s4ddiqTVjI6HTp10krkfPZ3xZu/uvn97Zeo+OV/o8XbfvQzBTgP3GQsmyaP8XYOV944PNuRkFTIcCfCt35ABAAA=
+ </data>
+ </layer>
+ <layer id="4" name="stuff" width="10" height="10">
+ <data encoding="base64" compression="gzip">
+ H4sIAAAAAAAACmNgoA0oYaKNuamMuOW2IqmBYRgwQ2JfxWHeFKCbw/CYTw8AANEJHwqQAQAA
+ </data>
+ </layer>
+</map>

examples/lib/main.dart

@@ -14,6 +14,7 @@ import 'package:examples/stories/rendering/rendering.dart';
 import 'package:examples/stories/sprites/sprites.dart';
 import 'package:examples/stories/svg/svg.dart';
 import 'package:examples/stories/system/system.dart';
+import 'package:examples/stories/tiled/tiled.dart';
 import 'package:examples/stories/utils/utils.dart';
 import 'package:examples/stories/widgets/widgets.dart';
 import 'package:flutter/material.dart';
@@ -38,6 +39,7 @@ void main() {
  addInputStories(dashbook);
  addParallaxStories(dashbook);
  addRenderingStories(dashbook);
+ addTiledStories(dashbook);
  addSpritesStories(dashbook);
  addSvgStories(dashbook);
  addSystemStories(dashbook);

examples/lib/stories/tiled/flame_tiled_animation_example.dart

@@ -0,0 +1,16 @@
+import 'package:flame/game.dart';
+import 'package:flame_tiled/flame_tiled.dart';
+
+class FlameTiledAnimationExample extends FlameGame {
+ static const String description = '''
+ Loads and displays an animated Tiled map.
+ ''';
+
+ late final TiledComponent map;
+
+ @override
+ Future<void> onLoad() async {
+ map = await TiledComponent.load('dungeon.tmx', Vector2.all(32));
+ add(map);
+ }
+}

examples/lib/stories/tiled/tiled.dart

@@ -0,0 +1,14 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:examples/commons/commons.dart';
+import 'package:examples/stories/tiled/flame_tiled_animation_example.dart';
+
+import 'package:flame/game.dart';
+
+void addTiledStories(Dashbook dashbook) {
+ dashbook.storiesOf('Tiled').add(
+ 'Flame Tiled Animation',
+ (_) => GameWidget(game: FlameTiledAnimationExample()),
+ codeLink: baseLink('effects/flame_tiled_animation_example.dart'),
+ info: FlameTiledAnimationExample.description,
+ );
+}

examples/pubspec.yaml

@@ -1,7 +1,7 @@
 name: examples
 description: A set of small examples showcasing each feature provided by the Flame Engine.
 homepage: https://github.com/flame-engine/flame/tree/main/examples
-publish_to: 'none'
+publish_to: "none"
 
 version: 0.1.0
 
@@ -15,6 +15,7 @@ dependencies:
  flame_audio: ^1.3.1
  flame_forge2d: ^0.12.2
  flame_svg: ^1.5.0
+ flame_tiled: ^1.7.2
  flutter:
  sdk: flutter
  google_fonts: ^2.3.2
@@ -35,6 +36,8 @@ flutter:
  - assets/images/tile_maps/
  - assets/images/layers/
  - assets/images/parallax/
+ - assets/images/parallax/
  - assets/svgs/
+ - assets/tiles/
  - assets/audio/music/
  - assets/audio/sfx/

packages/flame_tiled/lib/src/mutable_rect.dart

@@ -0,0 +1,39 @@
+import 'dart:ui' show Rect;
+
+/// A mutable version of [Rect] for tile map animations.
+class MutableRect extends Rect {
+ /// Construct a rectangle from its left, top, right, and bottom edges.
+ MutableRect.fromLTRB(this.left, this.top, this.right, this.bottom)
+ : super.fromLTRB(left, top, right, bottom);
+
+ /// Create a new instance from [other].
+ factory MutableRect.fromRect(Rect other) =>
+ MutableRect.fromLTRB(other.left, other.top, other.right, other.bottom);
+
+ /// The offset of the left edge of this rectangle from the x axis.
+ @override
+ double left;
+
+ /// The offset of the top edge of this rectangle from the y axis.
+ @override
+ double top;
+
+ /// The offset of the right edge of this rectangle from the x axis.
+ @override
+ double right;
+
+ /// The offset of the bottom edge of this rectangle from the y axis.
+ @override
+ double bottom;
+
+ /// Update with [other]'s dimensions.
+ void copy(Rect other) {
+ left = other.left;
+ top = other.top;
+ right = other.right;
+ bottom = other.bottom;
+ }
+
+ /// Convert to immutable rectangle.
+ Rect toRect() => Rect.fromLTRB(left, top, right, bottom);
+}

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

@@ -39,4 +39,11 @@ class GroupLayer extends RenderableLayer<Group> {
  child.render(canvas, camera);
  }
  }
+
+ @override
+ void update(double dt) {
+ for (final child in children) {
+ child.update(dt);
+ }
+ }
 }

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

@@ -80,4 +80,7 @@ class ImageLayer extends RenderableLayer<tiled.ImageLayer> {
 
  @override
  void refreshCache() {}
+
+ @override
+ void update(double dt) {}
 }

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

@@ -35,4 +35,7 @@ class ObjectLayer extends RenderableLayer<ObjectGroup> {
 
  @override
  void refreshCache() {}
+
+ @override
+ void update(double dt) {}
 }

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

@@ -28,6 +28,8 @@ abstract class RenderableLayer<T extends Layer> {
 
  void refreshCache();
 
+ void update(double dt);
+
  double get scaleX => destTileSize.x / map.tileWidth;
  double get scaleY => destTileSize.y / map.tileHeight;
 
@@ -85,4 +87,7 @@ class UnsupportedLayer extends RenderableLayer {
 
  @override
  void refreshCache() {}
+
+ @override
+ void update(double dt) {}
 }