feat: adding svg example (#1352)

examples/assets/svgs/green_ballons.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 141 256.835" width="141pt" height="256.835pt"><g><mask id="_mask_9otmf0caPG09uzTrvlHPgvdQU53TU48l"><circle vector-effect="non-scaling-stroke" cx="42" cy="44.00000000000001" r="31.000000000000004" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="42" cy="44.00000000000001" r="31.000000000000004" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="42" cy="44.00000000000001" r="31.000000000000004" fill="rgb(0,150,136)" mask="url(#_mask_9otmf0caPG09uzTrvlHPgvdQU53TU48l)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_wIuonO8KQb3YthOeQnM8IHCUyaQx9Cpp"><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="rgb(0,150,136)" mask="url(#_mask_wIuonO8KQb3YthOeQnM8IHCUyaQx9Cpp)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_8EAkZ5VzUGcIcDALBasS3u2CZ87YyiOD"><circle vector-effect="non-scaling-stroke" cx="110" cy="52.00000000000002" r="31" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="110" cy="52.00000000000002" r="31" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="110" cy="52.00000000000002" r="31" fill="rgb(0,150,136)" mask="url(#_mask_8EAkZ5VzUGcIcDALBasS3u2CZ87YyiOD)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_eOIGBePiasfWsi6YOA6P52VkJBH9N4kl"><circle vector-effect="non-scaling-stroke" cx="31" cy="87" r="31.000000000000007" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="31" cy="87" r="31.000000000000007" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="31" cy="87" r="31.000000000000007" fill="rgb(0,150,136)" mask="url(#_mask_eOIGBePiasfWsi6YOA6P52VkJBH9N4kl)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_U5EwkNoSZW9o45kUnTDWCOQoS3VuA4ie"><circle vector-effect="non-scaling-stroke" cx="69" cy="74.00000000000003" r="31.000000000000004" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="69" cy="74.00000000000003" r="31.000000000000004" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="69" cy="74.00000000000003" r="31.000000000000004" fill="rgb(0,150,136)" mask="url(#_mask_U5EwkNoSZW9o45kUnTDWCOQoS3VuA4ie)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_nbwG8kaqh0WkCTaIMUoir1aAFAsf4saZ"><circle vector-effect="non-scaling-stroke" cx="99" cy="95" r="31" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="99" cy="95" r="31" fill="rgb(0,150,136)"/><circle vector-effect="non-scaling-stroke" cx="99" cy="95" r="31" fill="rgb(0,150,136)" mask="url(#_mask_nbwG8kaqh0WkCTaIMUoir1aAFAsf4saZ)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="67" y1="255" x2="30" y2="116" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="67" y1="255" x2="63" y2="105" fill="none"/><line x1="67" y1="255" x2="63" y2="105"/><g style="isolation: isolate;"><line x1="67" y1="255" x2="63" y2="105" fill="none" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_vYjonDMQC3YKPdNLPZvlBenA7AIIZWB1"><line x1="67" y1="255" x2="63" y2="105" fill="white" stroke="none"/></mask><line x1="67" y1="255" x2="63" y2="105" fill="none" mask="url(#_mask_vYjonDMQC3YKPdNLPZvlBenA7AIIZWB1)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g><line x1="67" y1="255" x2="94" y2="123" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

examples/assets/svgs/happy_player.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 211.667 294.785" width="211.667pt" height="294.785pt"><g><circle vector-effect="non-scaling-stroke" cx="107.83333333333361" cy="204.28462742265577" r="90.5" fill="rgb(232,232,0)"/><circle vector-effect="non-scaling-stroke" cx="161.3333333333335" cy="181.78462742265575" r="14" fill="rgb(0,0,0)"/><circle vector-effect="non-scaling-stroke" cx="111.33333333333354" cy="181.78462742265575" r="14" fill="rgb(0,0,0)"/><g><rect x="0" y="107.324" width="211.667" height="39.62" transform="matrix(1,0,0,1,0,0)" fill="rgb(0,0,0)"/><rect x="54.407" y="0" width="96.89" height="110.305" transform="matrix(1,0,0,1,0,0)" fill="rgb(0,0,0)"/><rect x="54.407" y="83.428" width="96.89" height="23.85" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></g></g></svg>

examples/assets/svgs/red_ballons.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 141 256.835" width="141pt" height="256.835pt"><g><mask id="_mask_dPghdWkbMgsuF2qUgPzmyGQdrEWRWJbQ"><circle vector-effect="non-scaling-stroke" cx="42.00000000000001" cy="44.00000000000001" r="31.000000000000007" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="42.00000000000001" cy="44.00000000000001" r="31.000000000000007" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="42.00000000000001" cy="44.00000000000001" r="31.000000000000007" fill="rgb(191,100,100)" mask="url(#_mask_dPghdWkbMgsuF2qUgPzmyGQdrEWRWJbQ)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_efssj5TwzQbF2WLC3E6br5PagIv8rVHb"><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="80" cy="31.000000000000007" r="31.000000000000004" fill="rgb(191,100,100)" mask="url(#_mask_efssj5TwzQbF2WLC3E6br5PagIv8rVHb)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_qTtAiznvw9pTN9CnvkiqoA3lMFtib8LC"><circle vector-effect="non-scaling-stroke" cx="110.00000000000003" cy="52.00000000000001" r="31" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="110.00000000000003" cy="52.00000000000001" r="31" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="110.00000000000003" cy="52.00000000000001" r="31" fill="rgb(191,100,100)" mask="url(#_mask_qTtAiznvw9pTN9CnvkiqoA3lMFtib8LC)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_eqpfRfuhIsbS3WC5hcN4mciUkMAhsowZ"><circle vector-effect="non-scaling-stroke" cx="31.000000000000007" cy="87" r="31.000000000000007" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="31.000000000000007" cy="87" r="31.000000000000007" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="31.000000000000007" cy="87" r="31.000000000000007" fill="rgb(191,100,100)" mask="url(#_mask_eqpfRfuhIsbS3WC5hcN4mciUkMAhsowZ)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_K3XG132TkALxpbnV29TYqc5u662UzWEY"><circle vector-effect="non-scaling-stroke" cx="69.00000000000001" cy="74" r="31.00000000000001" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="69.00000000000001" cy="74" r="31.00000000000001" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="69.00000000000001" cy="74" r="31.00000000000001" fill="rgb(191,100,100)" mask="url(#_mask_K3XG132TkALxpbnV29TYqc5u662UzWEY)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><mask id="_mask_0rh18L4sYEGA5JQ5leaA9LqqLoZ4KT10"><circle vector-effect="non-scaling-stroke" cx="99.00000000000004" cy="95.00000000000003" r="31.000000000000014" fill="white" stroke="none"/></mask><circle vector-effect="non-scaling-stroke" cx="99.00000000000004" cy="95.00000000000003" r="31.000000000000014" fill="rgb(191,100,100)"/><circle vector-effect="non-scaling-stroke" cx="99.00000000000004" cy="95.00000000000003" r="31.000000000000014" fill="rgb(191,100,100)" mask="url(#_mask_0rh18L4sYEGA5JQ5leaA9LqqLoZ4KT10)" stroke-width="2" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="67" y1="255" x2="30" y2="116" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="67" y1="255" x2="63" y2="105" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/><line x1="67" y1="255" x2="94" y2="123" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/></g></svg>

examples/lib/main.dart

@@ -10,6 +10,7 @@ import 'stories/input/input.dart';
 import 'stories/parallax/parallax.dart';
 import 'stories/rendering/rendering.dart';
 import 'stories/sprites/sprites.dart';
+import 'stories/svg/svg.dart';
 import 'stories/system/system.dart';
 import 'stories/utils/utils.dart';
 import 'stories/widgets/widgets.dart';
@@ -29,6 +30,7 @@ void main() async {
   addParallaxStories(dashbook);
   addRenderingStories(dashbook);
   addSpritesStories(dashbook);
+  addSvgStories(dashbook);
   addSystemStories(dashbook);
   addUtilsStories(dashbook);
   addWidgetsStories(dashbook);

examples/lib/stories/svg/svg.dart

@@ -0,0 +1,14 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:flame/game.dart';
+
+import '../../commons/commons.dart';
+import 'svg_component.dart';
+
+void addSvgStories(Dashbook dashbook) {
+  dashbook.storiesOf('Svg').add(
+        'Svg Component',
+        (_) => GameWidget(game: SvgComponentExample()),
+        codeLink: baseLink('svg/svg_component.dart'),
+        info: SvgComponentExample.description,
+      );
+}

examples/lib/stories/svg/svg_component.dart

@@ -0,0 +1,128 @@
+import 'dart:math';
+
+import 'package:flame/components.dart';
+import 'package:flame/game.dart';
+import 'package:flame/input.dart';
+import 'package:flame_svg/flame_svg.dart';
+
+class Player extends SvgComponent with HasGameRef<SvgComponentExample> {
+  Player() : super(priority: 3, size: Vector2(106, 146), anchor: Anchor.center);
+
+  Vector2? destination;
+
+  @override
+  Future<void>? onLoad() async {
+    await super.onLoad();
+
+    svg = await gameRef.loadSvg('svgs/happy_player.svg');
+  }
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+
+    if (destination != null) {
+      final difference = destination! - position;
+      if (difference.length < 2) {
+        destination = null;
+      } else {
+        final direction = difference.normalized();
+        position += direction * 200 * dt;
+      }
+    }
+  }
+}
+
+class Background extends SvgComponent with HasGameRef<SvgComponentExample> {
+  Background()
+      : super(
+          priority: 1,
+          size: Vector2(745, 415),
+          anchor: Anchor.center,
+        );
+
+  @override
+  Future<void>? onLoad() async {
+    await super.onLoad();
+
+    svg = await gameRef.loadSvg('svgs/checkboard.svg');
+  }
+}
+
+class Ballons extends SvgComponent with HasGameRef<SvgComponentExample> {
+  Ballons()
+      : super(
+          priority: 2,
+          size: Vector2(75, 125),
+          anchor: Anchor.center,
+        );
+
+  @override
+  Future<void>? onLoad() async {
+    await super.onLoad();
+
+    final color = Random().nextBool() ? 'red' : 'green';
+
+    svg = await gameRef.loadSvg('svgs/${color}_ballons.svg');
+  }
+}
+
+class SvgComponentExample extends FlameGame
+    with TapDetector, DoubleTapDetector {
+  static const description = '''
+      Simple game showcasing how to use SVGs inside a flame game. This game uses several svgs
+      for its graphics. Click or touch the screen to make the player move, and double click/tap
+      to add a new set of ballons on the clicked position.
+''';
+
+  late Player player;
+
+  @override
+  Future<void>? onLoad() async {
+    await super.onLoad();
+    camera.followVector2(Vector2.zero());
+
+    add(player = Player());
+    add(Background());
+
+    add(
+      Ballons()
+        ..x = -10
+        ..y = -20,
+    );
+
+    add(
+      Ballons()
+        ..x = -100
+        ..y = -150,
+    );
+
+    add(
+      Ballons()
+        ..x = -200
+        ..y = -140,
+    );
+
+    add(
+      Ballons()
+        ..x = 100
+        ..y = 130,
+    );
+
+    add(
+      Ballons()
+        ..x = 50
+        ..y = -130,
+    );
+  }
+
+  @override
+  void onTapUp(TapUpInfo info) {
+    player.destination = info.eventPosition.game;
+  }
+
+  @override
+  void onDoubleTapDown(TapDownInfo info) {
+    add(Ballons()..position = info.eventPosition.game);
+  }
+}

examples/pubspec.yaml

@@ -11,6 +11,8 @@ environment:
 
 dependencies:
   flame: ^1.0.0
+  flame_svg:
+    path: ../packages/flame_svg
   dashbook: 0.1.5
   flutter:
     sdk: flutter
@@ -27,3 +29,4 @@ flutter:
     - assets/images/tile_maps/
     - assets/images/layers/
     - assets/images/parallax/
+    - assets/svgs/