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 StateMachine from the artboard and pass it to the RiveComponent. The component will automatically advance the state machine for you.

Interactivity should be handled via Data Binding instead of state machine inputs, as they are deprecated in Rive 0.14.x.

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 TapCallbacks {
 8  ViewModelInstanceNumber? coinInput;
 9  ViewModelInstanceNumber? gemInput;
10
11  @override
12  Future<void> onLoad() async {
13    final file = await File.asset(
14      'assets/rewards.riv',
15      riveFactory: Factory.flutter,
16    ).then((file) => file!);
17
18    final artboard = await loadArtboard(file);
19    final stateMachine = artboard.defaultStateMachine();
20
21    if (stateMachine != null) {
22      final viewModel = file.defaultArtboardViewModel(artboard);
23      if (viewModel != null) {
24        final viewModelInstance = viewModel.createDefaultInstance();
25        if (viewModelInstance != null) {
26          stateMachine.bindViewModelInstance(viewModelInstance);
27          coinInput = viewModelInstance.viewModel('Coin')?.number('Item_Value');
28          gemInput = viewModelInstance.viewModel('Gem')?.number('Item_Value');
29        }
30      }
31    }
32
33    add(
34      RiveComponent(
35        artboard: artboard,
36        stateMachine: stateMachine,
37        size: canvasSize,
38      ),
39    );
40  }
41
42  @override
43  void onTapDown(_) {
44    if (coinInput != null) {
45      coinInput!.value = (coinInput!.value + 10) % 1001;
46    }
47    if (gemInput != null) {
48      gemInput!.value = (gemInput!.value + 1) % 1001;
49    }
50  }
51}

class RiveExampleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    final file = await File.asset(
      'assets/rewards.riv', 
      riveFactory: Factory.rive,
    );

    final artboard = await loadArtboard(file!);
    final stateMachine = artboard.defaultStateMachine();

    if (stateMachine != null) {
      final viewModel = file.defaultArtboardViewModel(artboard);
      if (viewModel != null) {
        final viewModelInstance = viewModel.createDefaultInstance();
        if (viewModelInstance != null) {
          stateMachine.bindViewModelInstance(viewModelInstance);
          final coinAmount =
              viewModelInstance.viewModel('Coin')?.number('Item_Value');
          coinAmount?.value = 100;
        }
      }
    }

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

You can use the state machine to manage the state of animation via data binding. Check out the example for more information.

Full Example

You can check an example here.