[SOLVED] how to launch a Sprite/CircleComponent in flame engine using flutter based on angle of an arrow?

how to launch a Sprite/CircleComponent in flame engine using flutter based on angle of an arrow?

enter image description here i try to make a simulator of bubble shooter game in flutter using flame engine. and i added an arrow(SpriteComponent) to my game based on an image. i try to make a bubble(CircleComponent) to launch from the arrow poisiotn to the angle i aim the arrow to.

i've tried to mess around with math and diffrent numbers. even asked chat gpt but it wasnt helpfull. the closest i got is that the launch was un the exact oppiste direction from the arrow angle.

class Arrow extends SpriteComponent {
  @override
  FutureOr<void> onLoad() async {
    sprite = await Sprite.load('arrow.png');
    size = Vector2(gameWidth * 0.15, gameHeight * 0.20);
    anchor = Anchor.bottomCenter;
    position = Vector2(0, gameHeight / 2);
  }

  void aimAt(double dt) {
    double rotationSpeed = 0.02;
    angle += rotationSpeed * dt;
    angle %= 2 * math.pi;
  }
}

and the usage in the launch function -

void launchBubble(double angle, double speed, Arrow arrow) {
    isMoving = true;
    double launchAngle = arrow.angle + math.pi / 2; 
    double dx = math.cos(launchAngle) * speed;
    double dy = math.sin(launchAngle) * speed;
    velocity = Vector2(dx, dy);
  }

Solution

The closest i got is that the launch was un the exact oppiste direction from the arrow angle.

This is due to that the coordinate system in Flame is flipped, it's a screen coordinate system, where Y grows the further down you go.

To swap so that you're launching in the correct direction, change your last line to this (negate dy):

  velocity = Vector2(dx, -dy);

For the rotation you can use the RotateToEffect combined with the angleTo if you want a smooth rotation, or lookAt if you want it to directly but it in the correct angle, see these examples: https://examples.flame-engine.org/#/Components_Look_At (press the < > to get to the code).