Scale Effects

Scale effects are used to change the scale of a component over time. They can be used to make a component grow, shrink, or change its scale in a specific direction. The scale is specified as a Vector2 value, where each x represents the width factor and y represents the height factor. The effects can be applied to any component that has a scale property, such as the PositionComponent. The difference between size effects and scale effects is that size only changes the size of the target component, while scale changes the “size” of all children too.

ScaleEffect.by

This effect will change the target’s scale by the specified amount. For example, this will cause the component to grow 50% larger:

scale_by_effect.dart
 1import 'package:doc_flame_examples/flower.dart';
 2import 'package:flame/effects.dart';
 3import 'package:flame/game.dart';
 4
 5class ScaleByEffectGame extends FlameGame {
 6  bool reverse = false;
 7  bool hold = false;
 8  @override
 9  Future<void> onLoad() async {
10    final flower = Flower(
11      size: 60,
12      position: canvasSize / 2,
13      onTap: (flower) {
14        if (hold) {
15          return;
16        }
17        hold = true;
18        flower.add(
19          ScaleEffect.by(
20            reverse ? Vector2.all(1 / 1.5) : Vector2.all(1.5),
21            EffectController(duration: 0.3),
22            onComplete: () => hold = false,
23          ),
24        );
25        reverse = !reverse;
26      },
27    );
28    add(flower);
29  }
30}
final effect = ScaleEffect.by(
  Vector2.all(1.5),
  EffectController(duration: 0.3),
);

ScaleEffect.to

This effect works similar to ScaleEffect.by, but sets the absolute value of the target’s scale.

scale_to_effect.dart
 1import 'package:doc_flame_examples/flower.dart';
 2import 'package:flame/effects.dart';
 3import 'package:flame/game.dart';
 4
 5class ScaleToEffectGame extends FlameGame {
 6  bool reverse = false;
 7  bool hold = false;
 8  @override
 9  Future<void> onLoad() async {
10    final flower = Flower(
11      size: 60,
12      position: canvasSize / 2,
13      onTap: (flower) {
14        if (hold) {
15          return;
16        }
17        hold = true;
18        flower.add(
19          ScaleEffect.to(
20            reverse ? Vector2.all(1) : Vector2.all(0.5),
21            EffectController(duration: 0.5),
22            onComplete: () => hold = false,
23          ),
24        );
25        reverse = !reverse;
26      },
27    );
28    add(flower);
29  }
30}
final effect = ScaleEffect.to(
  Vector2.all(0.5),
  EffectController(duration: 0.5),
);