Improve 'move effect' example (#1030)

* Improve 'move effect' example

* Update examples/lib/commons/circle_component.dart

* Changelog entry

Co-authored-by: Erick <erickzanardoo@gmail.com>

examples/lib/commons/circle_component.dart

@@ -0,0 +1,21 @@
+import 'dart:ui';
+
+import 'package:flame/components.dart';
+
+class CircleComponent extends PositionComponent {
+  CircleComponent({this.radius = 10.0})
+      : paint = Paint()..color = const Color(0xFF60CB35),
+        super(
+          size: Vector2.all(2 * radius),
+          anchor: Anchor.center,
+        );
+
+  Paint paint;
+  double radius;
+
+  @override
+  void render(Canvas canvas) {
+    super.render(canvas);
+    canvas.drawCircle(Offset(radius, radius), radius, paint);
+  }
+}

examples/lib/commons/square_component.dart

@@ -7,10 +7,11 @@ import 'package:flame/palette.dart';
 class SquareComponent extends PositionComponent with EffectsHelper {
   Paint paint = BasicPalette.white.paint();
 
-  SquareComponent({int priority = 0})
+  SquareComponent({int priority = 0, double size = 100.0})
       : super(
-          size: Vector2.all(100.0),
+          size: Vector2.all(size),
           priority: priority,
+          anchor: Anchor.center,
         );
 
   @override

examples/lib/stories/effects/move_effect.dart

@@ -1,35 +1,40 @@
+import 'package:flame/components.dart';
 import 'package:flame/effects.dart';
 import 'package:flame/extensions.dart';
 import 'package:flame/game.dart';
 import 'package:flame/input.dart';
-import 'package:flutter/material.dart';
 
+import '../../commons/circle_component.dart';
 import '../../commons/square_component.dart';
 
 class MoveEffectGame extends FlameGame with TapDetector {
   late SquareComponent square;
 
+  final List<Vector2> path = [
+    Vector2(100, 100),
+    Vector2(50, 120),
+    Vector2(200, 400),
+    Vector2(150, 150),
+    Vector2(100, 300),
+  ];
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    square = SquareComponent()..position.setValues(100, 100);
+    square = SquareComponent(size: 50)..position.setValues(200, 150);
     add(square);
+    add(Component()
+      ..addAll([
+        for (final point in path) CircleComponent(radius: 3)..position = point
+      ]));
   }
 
   @override
   void onTapUp(TapUpInfo info) {
     square.add(
       MoveEffect(
-        path: [
-          info.eventPosition.game,
-          Vector2(100, 100),
-          Vector2(50, 120),
-          Vector2(200, 400),
-          Vector2(150, 0),
-          Vector2(100, 300),
-        ],
+        path: [info.eventPosition.game] + path,
         speed: 250.0,
-        curve: Curves.bounceInOut,
         isAlternating: true,
         peakDelay: 2.0,
       ),

packages/flame/CHANGELOG.md

@@ -9,6 +9,7 @@
  - Use the full delta in `JoystickComponent` so that it can't go to the wrong direction on the wrong side
  - Improved the menu for documentation version selection
  - Introduce `onDoubleTapDown` with info and `onDoubleTapCancel`
+ - Improved "move effect" example in the Dashbook
 
 ## [1.0.0-releasecandidate.15]
  - Fix issue with `Draggable`s not being removed from `draggables` list