fix: flame svg perfomance

examples/pubspec.yaml

@@ -11,8 +11,7 @@ environment:
 
 dependencies:
  flame: ^1.0.0
- flame_svg:
- path: ../packages/flame_svg
+ flame_svg: ^1.0.0
  dashbook: 0.1.5
  flutter:
  sdk: flutter

packages/flame/lib/src/cache/memory_cache.dart

@@ -24,4 +24,6 @@ class MemoryCache<K, V> {
  bool containsKey(K key) => _cache.containsKey(key);
 
  int get size => _cache.length;
+
+ Iterable<K> get keys => _cache.keys;
 }

packages/flame_svg/lib/svg.dart

@@ -1,4 +1,7 @@
+import 'dart:ui';
+
 import 'package:flame/assets.dart';
+import 'package:flame/cache.dart';
 import 'package:flame/extensions.dart';
 import 'package:flame/flame.dart';
 import 'package:flame/game.dart';
@@ -7,11 +10,17 @@ import 'package:flutter_svg/flutter_svg.dart';
 /// A [Svg] to be rendered on a Flame [Game].
 class Svg {
  /// The [DrawableRoot] that this [Svg] represents.
- DrawableRoot svgRoot;
+ final DrawableRoot svgRoot;
 
  /// Creates an [Svg] with the received [svgRoot].
  Svg(this.svgRoot);
 
+ final MemoryCache<Vector2, Image> _imageCache = MemoryCache();
+
+ final _paint = Paint()..filterQuality = FilterQuality.high;
+
+ final List<Vector2> _lock = [];
+
  /// Loads an [Svg] with the received [cache]. When no [cache] is provided,
  /// the global [Flame.assets] is used.
  static Future<Svg> load(String fileName, {AssetsCache? cache}) async {
@@ -22,10 +31,13 @@ class Svg {
 
  /// Renders the svg on the [canvas] using the dimensions provided by [size].
  void render(Canvas canvas, Vector2 size) {
- canvas.save();
- svgRoot.scaleCanvasToViewBox(canvas, size.toSize());
- svgRoot.draw(canvas, svgRoot.viewport.viewBoxRect);
- canvas.restore();
+ final image = _getImage(size);
+
+ if (image != null) {
+ canvas.drawImage(image, Offset.zero, _paint);
+ } else {
+ _render(canvas, size);
+ }
  }
 
  /// Renders the svg on the [canvas] on the given [position] using the
@@ -37,6 +49,41 @@ class Svg {
  ) {
  canvas.renderAt(position, (c) => render(c, size));
  }
+
+ Image? _getImage(Vector2 size) {
+ final image = _imageCache.getValue(size);
+
+ if (image == null && !_lock.contains(size)) {
+ _lock.add(size);
+ final recorder = PictureRecorder();
+
+ final canvas = Canvas(recorder);
+ _render(canvas, size);
+ final _picture = recorder.endRecording();
+
+ _picture.toImage(size.x.toInt(), size.y.toInt()).then((image) {
+ _imageCache.setValue(size, image);
+ _lock.remove(size);
+ _picture.dispose();
+ });
+ }
+
+ return image;
+ }
+
+ void _render(Canvas canvas, Vector2 size) {
+ svgRoot.scaleCanvasToViewBox(canvas, size.toSize());
+ svgRoot.draw(canvas, svgRoot.viewport.viewBoxRect);
+ }
+
+ /// Clear all the stored cache from this SVG, be sure to call
+ /// this method once the instance is no longer needed to avoid
+ /// memory leaks
+ void dispose() {
+ _imageCache.keys.forEach((key) {
+ _imageCache.getValue(key)?.dispose();
+ });
+ }
 }
 
 /// Provides a loading method for [Svg] on the [Game] class.

packages/flame_svg/lib/svg_component.dart

@@ -7,18 +7,19 @@ import './svg.dart';
 /// Wraps [Svg] in a Flame component.
 class SvgComponent extends PositionComponent {
  /// The wrapped instance of [Svg].
- Svg? svg;
+ Svg? _svg;
 
  /// Creates an [SvgComponent]
  SvgComponent({
- this.svg,
+ required Svg svg,
  Vector2? position,
  Vector2? size,
  Vector2? scale,
  double? angle,
  Anchor? anchor,
  int? priority,
- }) : super(
+ }) : _svg = svg,
+ super(
  position: position,
  size: size,
  scale: scale,
@@ -50,8 +51,27 @@ class SvgComponent extends PositionComponent {
  priority: priority,
  );
 
+ /// Sets a new [svg] instance
+ set svg(Svg? svg) {
+ if (_svg != null) {
+ _svg!.dispose();
+ }
+
+ _svg = svg;
+ }
+
+ /// Returns the current [svg] instance
+ Svg? get svg => _svg;
+
  @override
  void render(Canvas canvas) {
- svg?.render(canvas, size);
+ _svg?.render(canvas, size);
+ }
+
+ @override
+ void onRemove() {
+ super.onRemove();
+
+ _svg?.dispose();
  }
 }

packages/flame_svg/pubspec.yaml

@@ -17,3 +17,5 @@ dependencies:
 dev_dependencies:
  dartdoc: ^4.1.0
  flame_lint: ^0.0.1
+ test: ^1.17.12
+ mocktail: ^0.2.0

packages/flame_svg/test/svg_component_test.dart

@@ -0,0 +1,32 @@
+import 'package:flame_svg/flame_svg.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:test/test.dart';
+
+class MockSvg extends Mock implements Svg {}
+
+void main() {
+ group('SvgComponent', () {
+ late Svg svg;
+
+ setUp(() {
+ svg = MockSvg();
+ when(svg.dispose).thenAnswer((_) {});
+ });
+
+ test('disposes the svg instance when it is removed', () {
+ final component = SvgComponent(svg: svg);
+ component.onRemove();
+
+ verify(svg.dispose).called(1);
+ });
+
+ test('disposes the old svg instance when a new one is received', () {
+ final component = SvgComponent(svg: svg);
+
+ final newSvg = MockSvg();
+ component.svg = newSvg;
+
+ verify(svg.dispose).called(1);
+ });
+ });
+}