docs: flame_rive docs added (#2116)

doc/bridge_packages/flame_rive/flame_rive.md

@@ -1,6 +1,6 @@
 # flame_rive
 
 ```{toctree}
-:hidden:
+Overview    <rive.md>
 
 ```

doc/bridge_packages/flame_rive/rive.md

@@ -0,0 +1,54 @@
+# flame_rive
+
+`flame_rive` is a bridge library for using [rive](https://rive.app/) 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](https://github.com/flame-engine/flame/tree/main/packages/flame_rive/example)
+and in the pub.dev [installation instructions](https://pub.dev/packages/flame_rive).
+
+
+## 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.
+
+```{flutter-app}
+:sources: ../flame/examples
+:page: rive_example
+:show: widget code infobox
+:width: 200
+:height: 200
+```
+
+```dart
+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](https://github.com/flame-engine/flame/tree/main/packages/flame_rive/example).
+

doc/flame/examples/lib/main.dart

@@ -19,6 +19,7 @@ import 'package:doc_flame_examples/opacity_to_effect.dart';
 import 'package:doc_flame_examples/ray_cast.dart';
 import 'package:doc_flame_examples/ray_trace.dart';
 import 'package:doc_flame_examples/remove_effect.dart';
+import 'package:doc_flame_examples/rive_example.dart';
 import 'package:doc_flame_examples/rotate_by_effect.dart';
 import 'package:doc_flame_examples/rotate_to_effect.dart';
 import 'package:doc_flame_examples/router.dart';
@@ -63,6 +64,7 @@ void main() {
     'sequence_effect': SequenceEffectGame.new,
     'tap_events': TapEventsGame.new,
     'value_route': ValueRouteExample.new,
+    'rive_example': RiveExampleGame.new,
     'ray_cast': RayCastExample.new,
     'ray_trace': RayTraceExample.new,
     'remove_effect': RemoveEffectGame.new,

doc/flame/examples/lib/rive_example.dart

@@ -0,0 +1,34 @@
+import 'dart:async';
+
+import 'package:flame/events.dart';
+import 'package:flame/game.dart';
+import 'package:flame_rive/flame_rive.dart';
+
+class RiveExampleGame extends FlameGame with TapDetector {
+  late SMIInput<double>? levelInput;
+
+  @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!);
+
+    levelInput = controller.findInput<double>('Level');
+
+    add(RiveComponent(artboard: skillsArtboard, size: canvasSize));
+  }
+
+  @override
+  void onTap() {
+    super.onTap();
+    if (levelInput != null) {
+      levelInput!.value = (levelInput!.value + 1) % 3;
+    }
+  }
+}

doc/flame/examples/pubspec.yaml

@@ -9,6 +9,7 @@ environment:
 
 dependencies:
   flame: ^1.4.0
+  flame_rive: ^1.5.2
   flutter:
     sdk: flutter
 
@@ -17,4 +18,5 @@ dev_dependencies:
 
 flutter:
   assets:
+    - assets/
     - assets/images/