docs: Added rotate effect example and fixed multi-line (flame-engine#…

…2024)

Added rotate effect and tested working. Effect resets.

doc/flame/effects.md

@@ -153,8 +153,19 @@ Rotates the target clockwise by the specified angle relative to its current orie
 is in radians. For example, the following effect will rotate the target 90º (=[tau]/4 in radians)
 clockwise:
 
+```{flutter-app}
+:sources: ../flame/examples
+:page: rotate_by_effect
+:show: widget code infobox
+:width: 180
+:height: 160
+```
+
 ```dart
-final effect = RotateEffect.by(tau/4, EffectController(duration: 2));
+final effect = RotateEffect.by(
+  tau/4, 
+  EffectController(duration: 2),
+);
 ```
 
 
@@ -163,8 +174,19 @@ final effect = RotateEffect.by(tau/4, EffectController(duration: 2));
 Rotates the target clockwise to the specified angle. For example, the following will rotate the
 target to look east (0º is north, 90º=[tau]/4 east, 180º=tau/2 south, and 270º=tau*3/4 west):
 
+```{flutter-app}
+:sources: ../flame/examples
+:page: rotate_to_effect
+:show: widget code infobox
+:width: 180
+:height: 160
+```
+
 ```dart
-final effect = RotateEffect.to(tau/4, EffectController(duration: 2));
+final effect = RotateEffect.to(
+  tau/4, 
+  EffectController(duration: 2),
+);
 ```
 
 

doc/flame/examples/lib/main.dart

@@ -9,6 +9,8 @@ import 'package:doc_flame_examples/decorator_rotate3d.dart';
 import 'package:doc_flame_examples/decorator_shadow3d.dart';
 import 'package:doc_flame_examples/decorator_tint.dart';
 import 'package:doc_flame_examples/drag_events.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';
 import 'package:doc_flame_examples/scale_by_effect.dart';
 import 'package:doc_flame_examples/scale_to_effect.dart';
@@ -33,6 +35,8 @@ void main() {
     'decorator_shadow3d': DecoratorShadowGame.new,
     'decorator_tint': DecoratorTintGame.new,
     'drag_events': DragEventsGame.new,
+    'rotate_by_effect': RotateByEffectGame.new,
+    'rotate_to_effect': RotateToEffectGame.new,
     'router': RouterGame.new,
     'scale_by_effect': ScaleByEffectGame.new,
     'scale_to_effect': ScaleToEffectGame.new,

doc/flame/examples/lib/rotate_by_effect.dart

@@ -0,0 +1,33 @@
+import 'package:doc_flame_examples/flower.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/experimental.dart';
+import 'package:flame/game.dart';
+
+class RotateByEffectGame extends FlameGame with HasTappableComponents {
+  bool reset = false;
+  @override
+  Future<void> onLoad() async {
+    final flower = Flower(
+      size: 60,
+      position: canvasSize / 2,
+      onTap: (flower) {
+        if (reset = !reset) {
+          flower.add(
+            RotateEffect.by(
+              tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        } else {
+          flower.add(
+            RotateEffect.by(
+              -tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        }
+      },
+    );
+    add(flower);
+  }
+}

doc/flame/examples/lib/rotate_to_effect.dart

@@ -0,0 +1,33 @@
+import 'package:doc_flame_examples/flower.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/experimental.dart';
+import 'package:flame/game.dart';
+
+class RotateToEffectGame extends FlameGame with HasTappableComponents {
+  bool reset = false;
+  @override
+  Future<void> onLoad() async {
+    final flower = Flower(
+      size: 60,
+      position: canvasSize / 2,
+      onTap: (flower) {
+        if (reset = !reset) {
+          flower.add(
+            RotateEffect.to(
+              tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        } else {
+          flower.add(
+            RotateEffect.to(
+              -tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        }
+      },
+    );
+    add(flower);
+  }
+}