Rotate Effects

Rotate effects are used to change the orientation of a component over time. They can be used to make a component spin, turn towards a target, or rotate around a point. The rotation is specified in radians, and the effects can be applied to any component that has a rotation property, such as the PositionComponent.

RotateEffect.by

Rotates the target clockwise by the specified angle relative to its current orientation. The angle is in radians. For example, the following effect will rotate the target 90º (=tau/4 in radians) clockwise:

rotate_by_effect.dart

import 'package:doc_flame_examples/flower.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/geometry.dart';

class RotateByEffectGame extends FlameGame {
  bool reset = false;

  @override
  Future<void> onLoad() async {
    final flower = Flower(
      size: 60,
      position: canvasSize / 2,
      onTap: (flower) {
        flower.add(
          RotateEffect.by(
            reset ? tau / 4 : -tau / 4,
            EffectController(duration: 2),
          ),
        );
        reset = !reset;
      },
    );
    add(flower);
  }
}

Code

final effect = RotateEffect.by(
  tau/4,
  EffectController(duration: 2),
);

RotateEffect.to

Rotates the target clockwise to the specified angle. For example, the following will rotate the target to look east (0º is north, 90º=tau/4 east, 180º=tau/2 south, and 270º=tau*3/4 west):

rotate_to_effect.dart

import 'package:doc_flame_examples/flower.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/geometry.dart';

class RotateToEffectGame extends FlameGame {
  bool reset = false;

  @override
  Future<void> onLoad() async {
    final flower = Flower(
      size: 60,
      position: canvasSize / 2,
      onTap: (flower) {
        flower.add(
          RotateEffect.to(
            reset ? tau / 4 : -tau / 4,
            EffectController(duration: 2),
          ),
        );
        reset = !reset;
      },
    );
    add(flower);
  }
}

Code

final effect = RotateEffect.to(
  tau/4,
  EffectController(duration: 2),
);

RotateAroundEffect

Rotates the target clockwise by the specified angle relative to its current orientation around the specified center. The angle is in radians. For example, the following effect will rotate the target 90º (=tau/4 in radians) clockwise around (100, 100).

rotate_around_effect.dart

import 'package:doc_flame_examples/flower.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/geometry.dart';

class RotateAroundEffectGame extends FlameGame {
  bool reset = false;

  @override
  Future<void> onLoad() async {
    final flower = Flower(
      size: 60,
      position: canvasSize / 4,
      onTap: (flower) {
        flower.add(
          RotateAroundEffect(
            reset != reset ? tau : -tau,
            center: canvasSize / 2,
            EffectController(duration: 1),
          ),
        );
        reset = !reset;
      },
    );
    add(flower);
  }
}

Code

final effect = RotateAroundEffect(
  tau/4,
  center: Vector2(100, 100),
  EffectController(duration: 2),
);