diff --git a/examples/assets/svgs/checkboard.svg b/examples/assets/svgs/checkboard.svg
new file mode 100644
index 000000000..774f6b280
--- /dev/null
+++ b/examples/assets/svgs/checkboard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/assets/svgs/green_ballons.svg b/examples/assets/svgs/green_ballons.svg
new file mode 100644
index 000000000..c337bbe28
--- /dev/null
+++ b/examples/assets/svgs/green_ballons.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/assets/svgs/happy_player.svg b/examples/assets/svgs/happy_player.svg
new file mode 100644
index 000000000..afd64fc88
--- /dev/null
+++ b/examples/assets/svgs/happy_player.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/assets/svgs/red_ballons.svg b/examples/assets/svgs/red_ballons.svg
new file mode 100644
index 000000000..9fb5ee344
--- /dev/null
+++ b/examples/assets/svgs/red_ballons.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/lib/main.dart b/examples/lib/main.dart
index 3528ffd5b..8ecc9b422 100644
--- a/examples/lib/main.dart
+++ b/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);
diff --git a/examples/lib/stories/svg/svg.dart b/examples/lib/stories/svg/svg.dart
new file mode 100644
index 000000000..8724fe0ba
--- /dev/null
+++ b/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,
+ );
+}
diff --git a/examples/lib/stories/svg/svg_component.dart b/examples/lib/stories/svg/svg_component.dart
new file mode 100644
index 000000000..d2012b6d0
--- /dev/null
+++ b/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 {
+ Player() : super(priority: 3, size: Vector2(106, 146), anchor: Anchor.center);
+
+ Vector2? destination;
+
+ @override
+ Future? 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 {
+ Background()
+ : super(
+ priority: 1,
+ size: Vector2(745, 415),
+ anchor: Anchor.center,
+ );
+
+ @override
+ Future? onLoad() async {
+ await super.onLoad();
+
+ svg = await gameRef.loadSvg('svgs/checkboard.svg');
+ }
+}
+
+class Ballons extends SvgComponent with HasGameRef {
+ Ballons()
+ : super(
+ priority: 2,
+ size: Vector2(75, 125),
+ anchor: Anchor.center,
+ );
+
+ @override
+ Future? 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? 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);
+ }
+}
diff --git a/examples/pubspec.yaml b/examples/pubspec.yaml
index eff13d58e..b055f2f82 100644
--- a/examples/pubspec.yaml
+++ b/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/