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!
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,
)