fix: Avoid creation of unnecessary objects for RiveComponent (#2553)

Avoid creation of unnecessary objects for RiveComponent and simplifies
the example.

.github/workflows/cicd.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.10.0'
+          flutter-version: '3.10.2'
           channel: 'stable'
           cache: true
       - uses: bluefireteam/melos-action@main
@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.10.0'
+          flutter-version: '3.10.2'
           channel: 'stable'
       - uses: bluefireteam/melos-action@v2
       - name: "Analyze"
@@ -54,7 +54,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.10.0'
+          flutter-version: '3.10.2'
           channel: 'stable'
           cache: true
       - uses: bluefireteam/melos-action@main

packages/flame_rive/example/lib/main.dart

@@ -4,33 +4,10 @@ import 'package:flame_rive/flame_rive.dart';
 import 'package:flutter/material.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(const GameWidget.controlled(gameFactory: RiveExampleGame.new));
-}
-
-class MyApp extends StatefulWidget {
-  const MyApp({super.key});
-
-  @override
-  State<MyApp> createState() => _MyAppState();
-}
-
-class _MyAppState extends State<MyApp> {
-  late final game = RiveExampleGame();
-
-  @override
-  Widget build(BuildContext context) {
-    return GameWidget(
-      game: game,
-    );
-  }
 }
 
 class RiveExampleGame extends FlameGame {
-  @override
-  Color backgroundColor() {
-    return const Color(0xFFFFFFFF);
-  }
-
   @override
   Future<void> onLoad() async {
     final skillsArtboard =
@@ -40,14 +17,16 @@ class RiveExampleGame extends FlameGame {
 }
 
 class SkillsAnimationComponent extends RiveComponent with TapCallbacks {
-  SkillsAnimationComponent(Artboard artboard)
+  SkillsAnimationComponent(Artboard artboard) : super(artboard: artboard);
-      : super(
-          artboard: artboard,
-          size: Vector2.all(550),
-        );
 
   SMIInput<double>? _levelInput;
 
+  @override
+  void onGameResize(Vector2 size) {
+    super.onGameResize(size);
+    this.size = size;
+  }
+
   @override
   void onLoad() {
     final controller = StateMachineController.fromArtboard(
@@ -68,6 +47,5 @@ class SkillsAnimationComponent extends RiveComponent with TapCallbacks {
       return;
     }
     levelInput.value = (levelInput.value + 1) % 3;
-    event.continuePropagation = true;
   }
 }

packages/flame_rive/example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flame_rive_example
 description: A testbed for flame_rive
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+publish_to: 'none'
 version: 1.0.0+1
 
 environment:
@@ -11,7 +11,7 @@ dependencies:
   flame_rive: ^1.7.1
   flutter:
     sdk: flutter
-  rive: 0.10.4
+  rive: ^0.11.1
 
 dev_dependencies:
   flame_lint: ^0.2.0+2

packages/flame_rive/lib/src/rive_component.dart

@@ -1,6 +1,5 @@
 import 'dart:async';
 import 'dart:math';
-import 'dart:ui' as ui;
 
 import 'package:flame/components.dart';
 import 'package:flutter/rendering.dart';
@@ -10,6 +9,7 @@ import 'package:rive/rive.dart';
 class RiveComponent extends PositionComponent {
   final Artboard artboard;
   final RiveArtboardRenderer _renderer;
+  late Size _renderSize;
 
   RiveComponent({
     required this.artboard,
@@ -24,8 +24,8 @@ class RiveComponent extends PositionComponent {
     /// Default value is ArtboardSize
     Vector2? size,
     super.scale,
-    double super.angle = 0.0,
+    super.angle = 0.0,
-    Anchor super.anchor = Anchor.topLeft,
+    super.anchor = Anchor.topLeft,
     super.children,
     super.priority,
   })  : _renderer = RiveArtboardRenderer(
@@ -34,11 +34,18 @@ class RiveComponent extends PositionComponent {
           alignment: alignment,
           artboard: artboard,
         ),
-        super(size: size ?? Vector2(artboard.width, artboard.height));
+        super(size: size ?? Vector2(artboard.width, artboard.height)) {
+    void updateRenderSize() {
+      _renderSize = this.size.toSize();
+    }
+
+    this.size.addListener(updateRenderSize);
+    updateRenderSize();
+  }
 
   @override
-  void render(ui.Canvas canvas) {
+  void render(Canvas canvas) {
-    _renderer.render(canvas, size.toSize());
+    _renderer.render(canvas, _renderSize);
   }
 
   @override
@@ -66,17 +73,16 @@ class RiveArtboardRenderer {
     artboard.advance(dt, nested: true);
   }
 
-  AABB get aabb {
+  late final aabb = AABB.fromValues(0, 0, artboard.width, artboard.height);
-    final width = artboard.width;
-    final height = artboard.height;
-    return AABB.fromValues(0, 0, width, height);
-  }
 
-  void render(Canvas canvas, ui.Size size) {
+  void render(Canvas canvas, Size size) {
     _paint(canvas, aabb, size);
   }
 
-  void _paint(Canvas canvas, AABB bounds, ui.Size size) {
+  final _transform = Mat2D();
+  final _center = Mat2D();
+
+  void _paint(Canvas canvas, AABB bounds, Size size) {
     const position = Offset.zero;
 
     final contentWidth = bounds[2] - bounds[0];
@@ -99,7 +105,6 @@ class RiveArtboardRenderer {
     canvas.save();
     canvas.clipRect(position & size);
 
-    // fit
     switch (fit) {
       case BoxFit.fill:
         scaleX = size.width / contentWidth;
@@ -133,16 +138,15 @@ class RiveArtboardRenderer {
         break;
     }
 
-    final transform = Mat2D();
+    Mat2D.setIdentity(_transform);
-    transform[4] = size.width / 2.0 + (alignment.x * size.width / 2.0);
+    _transform[4] = size.width / 2.0 + (alignment.x * size.width / 2.0);
-    transform[5] = size.height / 2.0 + (alignment.y * size.height / 2.0);
+    _transform[5] = size.height / 2.0 + (alignment.y * size.height / 2.0);
-    Mat2D.scale(transform, transform, Vec2D.fromValues(scaleX, scaleY));
+    Mat2D.scale(_transform, _transform, Vec2D.fromValues(scaleX, scaleY));
-    final center = Mat2D();
+    Mat2D.setIdentity(_center);
-    center[4] = x;
+    _center[4] = x;
-    center[5] = y;
+    _center[5] = y;
-    Mat2D.multiply(transform, transform, center);
+    Mat2D.multiply(_transform, _transform, _center);
 
-    // translation
     canvas.translate(
       size.width / 2.0 + (alignment.x * size.width / 2.0),
       size.height / 2.0 + (alignment.y * size.height / 2.0),

packages/flame_rive/pubspec.yaml

@@ -15,7 +15,7 @@ dependencies:
   flame: ^1.7.3
   flutter:
     sdk: flutter
-  rive: ^0.10.4
+  rive: ^0.11.1
 
 dev_dependencies:
   dartdoc: ^6.2.2