Flame flutter interpolate between multiple vector2

Question

I've just started the flame, and I'd like to move a component from this position to a list of positions progressively over 7 seconds.

What I've managed to do so far has a latency of between the different points, I'd like something fluid.

void animate({
required PositionComponent component,
required List<Vector2> newPositions,
required double duration,
void Function()? onComplete,
}) async {
    int index = 0;

    while (index < newPositions.length) {
      Vector2 newPosition = newPositions.elementAt(index);
      double progress = 0.0;

      while (progress <= 1.0) {
        component.position.lerp(newPosition, progress);

        await Future.delayed(const Duration(milliseconds: 100));

        progress += (1.0 / duration);
      }

      index++;
    }

    onComplete?.call();
  }

Flame version (1.10.0).

Thanks in advance!

Answer 1

You can use a MoveAlongPathEffect for that:

// Starts at the components position, you can also use `absolute: false`
// in the `EffectController` if you want to define the points relative
// to the component.
final path = Path.moveTo(position.x, position.y);
for (final point in newPositions) {
  path.lineTo(point.x, point.y);
}

final moveEffect = MoveAlongPathEffect(
  path,
  EffectController(duration: 7),
  absolute: true,
);
add(moveEffect);

Or if you don't want to use an effect you can use the moveToTarget (or lerp) method which is in the Flame extension of Vector2:

  /// Smoothly moves this [Vector2] in the direction [target] by a displacement
  /// given by a distance [ds] in that direction.
  ///
  /// It does not goes beyond target, regardless of [ds], so the final value
  /// is always [target].
  ///
  /// Note: [ds] is the displacement vector in units of the vector space. It is
  /// **not** a percentage (relative value).
  void moveToTarget(
    Vector2 target,
    double ds,
  )