Search code examples
flutterflame

Rotate position component around parent component


I am new to flame engine and its capabilities.

I have two components:

  1. player component
  2. gun component

The idea is for the gun component to follow the player when the player moves. In terms of aim gun, how would I go about rotating the gun component around the player component?

Similar to the game Nuclear Throne, see reference below:

enter image description here


Solution

  • So it seems you don't want to really rotate the gun component around it's own axis at all, if you want it like in the gif. So you want to rotate the gun position around the local center of the player.

    If you have your gun component as a child of the player all positions are relative to the player and 0,0 is in the upper left corner of the player, and you want to rotate it around the center of the player.

    To get that point you would do (calculate this in for example onLoad so that you don't create unnecessary Vector2 objects in the update-loop:

    final localCenter = player.size / 2;
    

    And then to get the position of the gun you first have to decide the length that you want it to be from the player, this can of course be changed dynamically like in your example.

    final length = 100;
    final gun.position.setValues(length, 0); // This means that the zero angle is straight up
    gun.position.rotate(yourAngle, center: localCenter);