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:
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.
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),
);