flame_rive

flame_rive is a bridge library for using rive animations in your Flame game. Rive is a real-time interactive design and animation tool and you use it to create animations.

To use a file created by Rive in your game you need to add flame_rive to your pubspec.yaml, as can be seen in the Flame Rive example and in the pub.dev installation instructions.

How to use it

First, start with adding the animation.riv file to the assets folder. Then load the artboard of the animation to the game using the loadArtboard method. After that, create the StateMachineController from the artboard and add a controller to it. Then you can create a RiveComponent using that artboard.

rive_example.dart
 1import 'dart:async';
 2
 3import 'package:flame/events.dart';
 4import 'package:flame/game.dart';
 5import 'package:flame_rive/flame_rive.dart';
 6
 7class RiveExampleGame extends FlameGame with TapDetector {
 8  late SMIInput<double>? levelInput;
 9
10  @override
11  Future<void> onLoad() async {
12    final skillsArtboard =
13        await loadArtboard(RiveFile.asset('assets/skills.riv'));
14
15    final controller = StateMachineController.fromArtboard(
16      skillsArtboard,
17      "Designer's Test",
18    );
19
20    skillsArtboard.addController(controller!);
21
22    levelInput = controller.findInput<double>('Level');
23
24    add(RiveComponent(artboard: skillsArtboard, size: canvasSize));
25  }
26
27  @override
28  void onTap() {
29    super.onTap();
30    if (levelInput != null) {
31      levelInput!.value = (levelInput!.value + 1) % 3;
32    }
33  }
34}

class RiveExampleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    final skillsArtboard =
    await loadArtboard(RiveFile.asset('assets/skills.riv'));

    final controller = StateMachineController.fromArtboard(
      skillsArtboard,
      "Designer's Test",
    );

    skillsArtboard.addController(controller!);

    add(RiveComponent(artboard: skillsArtboard, size: Vector2.all(550)));
  }
}

You can use the controller to manage the state of animation. Check out the example for more information.

Full Example

You can check an example here.