Remove old effects system (#1157)

* Remove old effects system

* Add changelog entry
This commit is contained in:
Lukas Klingsbo
2021-12-03 15:02:25 +01:00
committed by GitHub
parent fe162c6d90
commit 790b8f73dd
61 changed files with 892 additions and 3588 deletions

View File

@ -1,18 +0,0 @@
import 'dart:ui';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
class SquareComponent extends RectangleComponent with EffectsHelper {
SquareComponent({
Vector2? position,
double size = 100.0,
Paint? paint,
int priority = 0,
}) : super(
position: position,
size: Vector2.all(size),
paint: paint,
priority: priority,
);
}

View File

@ -185,7 +185,12 @@ class Rock extends SpriteComponent
@override
bool onTapDown(_) {
add(ColorEffect(color: Colors.green, duration: 0.5, isAlternating: true));
add(
ScaleEffect.by(
Vector2.all(10),
StandardEffectController(duration: 0.3),
),
);
return true;
}
}

View File

@ -63,19 +63,23 @@ class SimpleShapesExample extends FlameGame with HasTappables {
final component = randomShape(tapPosition);
add(component);
component.add(
MoveEffect(
path: [size / 2],
speed: 30,
isAlternating: true,
isInfinite: true,
MoveEffect.to(
size / 2,
StandardEffectController(
duration: 5,
reverseDuration: 5,
infinite: true,
),
),
);
component.add(
RotateEffect(
angle: 3,
speed: 0.4,
isAlternating: true,
isInfinite: true,
RotateEffect.to(
3,
StandardEffectController(
duration: 1,
reverseDuration: 1,
infinite: true,
),
),
);
}

View File

@ -1,35 +0,0 @@
import 'dart:ui';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
class ColorEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example you can see the color of the sprite (the Flame logo) pulse
towards a more green color and then back again. This is a non-interactive
example.
''';
@override
Future<void> onLoad() async {
await super.onLoad();
final flameSprite = await loadSprite('flame.png');
add(
SpriteComponent(
sprite: flameSprite,
position: Vector2(300, 100),
size: Vector2(149, 211),
)..add(
ColorEffect(
color: const Color(0xFF00FF00),
duration: 0.5,
isInfinite: true,
isAlternating: true,
),
),
);
}
}

View File

@ -1,70 +0,0 @@
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
final green = Paint()..color = const Color(0xAA338833);
final red = Paint()..color = const Color(0xAA883333);
class CombinedEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example we show how multiple effects can be combined into one effect
with the `CombinedEffect`. Click anywhere on the screen to run the effect.
''';
late SquareComponent greenSquare, redSquare;
@override
Future<void> onLoad() async {
await super.onLoad();
greenSquare = SquareComponent(position: Vector2.all(100), paint: green);
redSquare = SquareComponent(position: Vector2.all(100), paint: red);
add(greenSquare);
add(redSquare);
}
@override
void onTapUp(TapUpInfo info) {
greenSquare.clearEffects();
final currentTap = info.eventPosition.game;
final move = MoveEffect(
path: [
currentTap,
currentTap + Vector2(-20, 50),
currentTap + Vector2(-50, -50),
currentTap + Vector2(50, 0),
],
isAlternating: true,
duration: 4.0,
curve: Curves.bounceInOut,
initialDelay: 0.6,
);
final scale = SizeEffect(
size: currentTap,
speed: 200.0,
curve: Curves.linear,
isAlternating: true,
peakDelay: 1.0,
);
final rotate = RotateEffect(
angle: currentTap.angleTo(Vector2.all(100)),
duration: 3,
curve: Curves.decelerate,
isAlternating: true,
initialDelay: 1.0,
peakDelay: 1.0,
);
final combination = CombinedEffect(
effects: [move, rotate, scale],
);
greenSquare.add(combination);
}
}

View File

@ -2,103 +2,41 @@ import 'package:dashbook/dashbook.dart';
import 'package:flame/game.dart';
import '../../commons/commons.dart';
import 'color_effect_example.dart';
import 'combined_effect_example.dart';
import 'infinite_effect_example.dart';
import 'move_effect_example.dart';
import 'old_move_effect_example.dart';
import 'old_opacity_effect_example.dart';
import 'old_rotate_effect_example.dart';
import 'old_scale_effect_example.dart';
import 'old_size_effect_example.dart';
import 'opacity_effect_example.dart';
import 'remove_effect_example.dart';
import 'rotate_effect_example.dart';
import 'scale_effect_example.dart';
import 'sequence_effect_example.dart';
import 'size_effect_example.dart';
void addEffectsStories(Dashbook dashbook) {
dashbook.storiesOf('Effects')
..add(
'Size Effect',
(_) => GameWidget(game: OldSizeEffectExample()),
codeLink: baseLink('effects/size_effect_example.dart'),
info: OldSizeEffectExample.description,
)
..add(
'Scale Effect',
(_) => GameWidget(game: OldScaleEffectExample()),
codeLink: baseLink('effects/old_scale_effect_example.dart'),
info: OldScaleEffectExample.description,
)
..add(
'Move Effect',
(_) => GameWidget(game: OldMoveEffectExample()),
codeLink: baseLink('effects/old_move_effect_example.dart'),
info: OldMoveEffectExample.description,
)
..add(
'Rotate Effect',
(_) => GameWidget(game: OldRotateEffectExample()),
codeLink: baseLink('effects/old_rotate_effect_example.dart'),
info: OldRotateEffectExample.description,
)
..add(
'Sequence Effect',
(_) => GameWidget(game: SequenceEffectExample()),
codeLink: baseLink('effects/sequence_effect_example.dart'),
info: SequenceEffectExample.description,
)
..add(
'Combined Effect',
(_) => GameWidget(game: CombinedEffectExample()),
codeLink: baseLink('effects/combined_effect_example.dart'),
info: CombinedEffectExample.description,
)
..add(
'Infinite Effect',
(_) => GameWidget(game: InfiniteEffectExample()),
codeLink: baseLink('effects/infinite_effect_example.dart'),
info: InfiniteEffectExample.description,
)
..add(
'Opacity Effect',
(_) => GameWidget(game: OldOpacityEffectExample()),
codeLink: baseLink('effects/old_opacity_effect_example.dart'),
info: OldOpacityEffectExample.description,
)
..add(
'Color Effect',
(_) => GameWidget(game: ColorEffectExample()),
codeLink: baseLink('effects/color_effect_example.dart'),
)
..add(
'Move Effect (v2)',
(_) => GameWidget(game: MoveEffectExample()),
codeLink: baseLink('effects/move_effect_example.dart'),
info: MoveEffectExample.description,
)
..add(
'Rotate Effect (v2)',
'Rotate Effect',
(_) => GameWidget(game: RotateEffectExample()),
codeLink: baseLink('effects/rotate_effect_example.dart'),
info: RotateEffectExample.description,
)
..add(
'Size Effect (v2)',
'Size Effect',
(_) => GameWidget(game: SizeEffectExample()),
codeLink: baseLink('effects/size_effect_example.dart'),
info: SizeEffectExample.description,
)
..add(
'Scale Effect (v2)',
'Scale Effect',
(_) => GameWidget(game: ScaleEffectExample()),
codeLink: baseLink('effects/scale_effect_example.dart'),
info: ScaleEffectExample.description,
)
..add(
'Opacity Effect (v2)',
'Opacity Effect',
(_) => GameWidget(game: OpacityEffectExample()),
codeLink: baseLink('effects/opacity_effect_example.dart'),
info: OpacityEffectExample.description,

View File

@ -1,76 +0,0 @@
import 'dart:math';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
final green = Paint()..color = const Color(0xAA338833);
final red = Paint()..color = const Color(0xAA883333);
final orange = Paint()..color = const Color(0xAABB6633);
class InfiniteEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example we show how effects can run in infinity with the
`isInfinite: true` argument. Click on the screen to start the effects.
''';
late SquareComponent greenSquare;
late SquareComponent redSquare;
late SquareComponent orangeSquare;
@override
Future<void> onLoad() async {
await super.onLoad();
SquareComponent makeSquare(Paint paint) {
return SquareComponent(position: Vector2.all(100), paint: paint);
}
add(greenSquare = makeSquare(green));
add(redSquare = makeSquare(red));
add(orangeSquare = makeSquare(orange));
}
@override
void onTapUp(TapUpInfo info) {
final p = info.eventPosition.game;
greenSquare.clearEffects();
redSquare.clearEffects();
orangeSquare.clearEffects();
greenSquare.add(
MoveEffect(
path: [p],
speed: 250.0,
curve: Curves.bounceInOut,
isInfinite: true,
isAlternating: true,
),
);
redSquare.add(
SizeEffect(
size: p,
speed: 250.0,
curve: Curves.easeInCubic,
isInfinite: true,
isAlternating: true,
),
);
orangeSquare.add(
RotateEffect(
angle: (p.x + p.y) % (2 * pi),
speed: 1.0, // Radians per second
curve: Curves.easeInOut,
isInfinite: true,
isAlternating: true,
),
);
}
}

View File

@ -1,13 +1,10 @@
import 'dart:math';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/src/effects2/move_effect.dart'; // ignore: implementation_imports
import 'package:flame/src/effects2/standard_effect_controller.dart'; // ignore: implementation_imports
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class MoveEffectExample extends FlameGame {
static const description = '''
Top square has `MoveEffect.to` effect that makes the component move along a
@ -36,8 +33,11 @@ class MoveEffectExample extends FlameGame {
..color = Colors.greenAccent;
add(
SquareComponent(position: Vector2(20, 50), size: 20, paint: paint1)
..add(
RectangleComponent.square(
position: Vector2(20, 50),
size: 20,
paint: paint1,
)..add(
MoveEffect.to(
Vector2(380, 50),
StandardEffectController(
@ -50,7 +50,11 @@ class MoveEffectExample extends FlameGame {
),
);
add(
SquareComponent(position: Vector2(20, 150), size: 20, paint: paint2)
RectangleComponent.square(
position: Vector2(20, 150),
size: 20,
paint: paint2,
)
..add(
MoveEffect.to(
Vector2(380, 150),
@ -101,7 +105,7 @@ class MoveEffectExample extends FlameGame {
final path2 = Path()..addOval(const Rect.fromLTRB(80, 230, 320, 470));
for (var i = 0; i < 20; i++) {
add(
SquareComponent(size: 10)
RectangleComponent.square(size: 10)
..paint = (Paint()..color = Colors.tealAccent)
..add(
MoveEffect.along(

View File

@ -1,48 +0,0 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import '../../commons/square_component.dart';
class OldMoveEffectExample extends FlameGame with TapDetector {
static const String description = '''
This example showcases the `MoveEffect`. Click somewhere on the screen and
the white square will go there and then it will follow the path that is
laid out by the white circular markers. After it has finished the path it
waits for a bit and then returns to its original position.
''';
late SquareComponent square;
final List<Vector2> path = [
Vector2(100, 100),
Vector2(50, 120),
Vector2(200, 400),
Vector2(150, 150),
Vector2(100, 300),
];
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent(size: 50, position: Vector2(200, 150));
add(square);
final pathMarkers =
path.map((p) => CircleComponent(radius: 3, position: p));
addAll(pathMarkers);
}
@override
void onTapUp(TapUpInfo info) {
square.add(
MoveEffect(
path: [info.eventPosition.game] + path,
speed: 250.0,
isAlternating: true,
peakDelay: 2.0,
),
);
}
}

View File

@ -1,52 +0,0 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
class OldOpacityEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example we show how the `OpacityEffect` can be used in two ways.
The right flame will constantly pulse in and out of opacity and the left
flame will change opacity when you click the screen.
''';
late final SpriteComponent sprite;
@override
Future<void> onLoad() async {
await super.onLoad();
final flameSprite = await loadSprite('flame.png');
add(
sprite = SpriteComponent(
sprite: flameSprite,
position: Vector2.all(100),
size: Vector2(149, 211),
),
);
add(
SpriteComponent(
sprite: flameSprite,
position: Vector2(300, 100),
size: Vector2(149, 211),
)..add(
OpacityEffect(
opacity: 0,
duration: 1.5,
isInfinite: true,
isAlternating: true,
),
),
);
}
@override
void onTap() {
final opacity = sprite.paint.color.opacity;
if (opacity == 1) {
sprite.add(OpacityEffect.fadeOut());
} else if (opacity == 0) {
sprite.add(OpacityEffect.fadeIn());
}
}
}

View File

@ -1,37 +0,0 @@
import 'dart:math';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class OldRotateEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example we simply rotate the square around it's anchor (which is in
the top left corner) when the screen is clicked.
''';
late SquareComponent square;
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent(position: Vector2.all(200));
add(square);
}
@override
void onTap() {
square.add(
RotateEffect(
angle: 2 * pi,
isRelative: true,
duration: 5.0,
curve: Curves.bounceInOut,
),
);
}
}

View File

@ -1,48 +0,0 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class OldScaleEffectExample extends FlameGame with TapDetector {
static const String description = '''
The `ScaleEffect` scales up the canvas before drawing the components and its
children.
In this example you can tap the screen and the component will scale up or down,
depending on its current state.
''';
late SquareComponent square;
bool grow = true;
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent()
..position.setValues(200, 200)
..anchor = Anchor.center;
square.paint = BasicPalette.white.paint()..style = PaintingStyle.stroke;
final childSquare = SquareComponent(position: Vector2.all(70), size: 20);
square.add(childSquare);
add(square);
}
@override
void onTap() {
final s = grow ? 3.0 : 1.0;
grow = !grow;
square.add(
ScaleEffect(
scale: Vector2.all(s),
speed: 2.0,
curve: Curves.linear,
),
);
}
}

View File

@ -1,47 +0,0 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class OldSizeEffectExample extends FlameGame with TapDetector {
static const String description = '''
The `SizeEffect` changes the size of the component, but the sizes of its
children will stay the same.
In this example, you can tap the screen and the component will size up or
down, depending on its current state.
''';
late SquareComponent square;
bool grow = true;
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent(
position: Vector2.all(200),
paint: BasicPalette.white.paint()..style = PaintingStyle.stroke,
);
final childSquare = SquareComponent(position: Vector2.all(70), size: 20);
square.add(childSquare);
add(square);
}
@override
void onTap() {
final s = grow ? 300.0 : 100.0;
grow = !grow;
square.add(
SizeEffect(
size: Vector2.all(s),
speed: 250.0,
curve: Curves.bounceInOut,
),
);
}
}

View File

@ -1,8 +1,7 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/src/effects2/opacity_effect.dart'; // ignore: implementation_imports
import 'package:flame/src/effects2/standard_effect_controller.dart'; // ignore: implementation_imports
import '../../commons/ember.dart';

View File

@ -1,9 +1,9 @@
import 'dart:math';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/src/effects2/remove_effect.dart'; // ignore: implementation_imports
import 'package:flutter/material.dart';
class RemoveEffectExample extends FlameGame with HasTappables {

View File

@ -2,9 +2,8 @@ import 'dart:math';
import 'dart:ui';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/src/effects2/rotate_effect.dart'; // ignore: implementation_imports
import 'package:flame/src/effects2/standard_effect_controller.dart'; // ignore: implementation_imports
import 'package:flutter/animation.dart';
class RotateEffectExample extends FlameGame {

View File

@ -1,14 +1,11 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flame/src/effects2/scale_effect.dart'; // ignore: implementation_imports
import 'package:flame/src/effects2/standard_effect_controller.dart'; // ignore: implementation_imports
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class ScaleEffectExample extends FlameGame with TapDetector {
static const String description = '''
The `ScaleEffect` scales up the canvas before drawing the components and its
@ -17,24 +14,28 @@ class ScaleEffectExample extends FlameGame with TapDetector {
down, depending on its current state.
''';
late SquareComponent square;
late RectangleComponent square;
bool grow = true;
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent(
square = RectangleComponent.square(
size: 100,
position: Vector2.all(200),
paint: BasicPalette.white.paint()..style = PaintingStyle.stroke,
);
final childSquare = SquareComponent(position: Vector2.all(70), size: 20);
final childSquare = RectangleComponent.square(
position: Vector2.all(70),
size: 20,
);
square.add(childSquare);
add(square);
}
@override
void onTap() {
final s = grow ? 300.0 : 100.0;
final s = grow ? 3.0 : 1.0;
grow = !grow;

View File

@ -1,62 +0,0 @@
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
final green = Paint()..color = const Color(0xAA338833);
class SequenceEffectExample extends FlameGame with TapDetector {
static const String description = '''
In this example we show how different effects can be chained in the
`SequenceEffect`. Click anywhere on the screen to start the effects
sequence.
''';
late SquareComponent greenSquare;
@override
Future<void> onLoad() async {
await super.onLoad();
greenSquare = SquareComponent(position: Vector2.all(100), paint: green);
add(greenSquare);
}
@override
void onTapUp(TapUpInfo info) {
final currentTap = info.eventPosition.game;
greenSquare.clearEffects();
final move = MoveEffect(
path: [
currentTap,
currentTap + Vector2(-20, 50),
currentTap + Vector2(-50, -50),
currentTap + Vector2(50, 0),
],
speed: 150.0,
curve: Curves.easeIn,
);
final size = SizeEffect(
size: currentTap - greenSquare.position,
speed: 100.0,
curve: Curves.easeInCubic,
);
final rotate = RotateEffect(
angle: currentTap.angleTo(Vector2.all(100)),
duration: 0.8,
curve: Curves.decelerate,
);
final sequence = SequenceEffect(
effects: [size, rotate, move],
isAlternating: true,
);
sequence.onComplete = () => print('sequence complete');
greenSquare.add(sequence);
}
}

View File

@ -1,14 +1,11 @@
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flame/src/effects2/size_effect.dart'; // ignore: implementation_imports
import 'package:flame/src/effects2/standard_effect_controller.dart'; // ignore: implementation_imports
import 'package:flutter/material.dart';
import '../../commons/square_component.dart';
class SizeEffectExample extends FlameGame with TapDetector {
static const String description = '''
The `SizeEffect` changes the size of the component, the sizes of the
@ -17,17 +14,21 @@ class SizeEffectExample extends FlameGame with TapDetector {
down, depending on its current state.
''';
late SquareComponent square;
late RectangleComponent square;
bool grow = true;
@override
Future<void> onLoad() async {
await super.onLoad();
square = SquareComponent(
square = RectangleComponent.square(
size: 100,
position: Vector2.all(200),
paint: BasicPalette.white.paint()..style = PaintingStyle.stroke,
);
final childSquare = SquareComponent(position: Vector2.all(70), size: 20);
final childSquare = RectangleComponent.square(
position: Vector2.all(70),
size: 20,
);
square.add(childSquare);
add(square);
}

View File

@ -89,12 +89,6 @@ class JoystickAdvancedExample extends FlameGame
onPressed: player.flipVertically,
);
final rotateEffect = RotateEffect(
angle: 0,
curve: Curves.bounceOut,
isAlternating: true,
speed: 2,
);
final rng = Random();
// A button, created from a shape, that adds a rotation effect to the player
// when it is pressed.
@ -109,7 +103,14 @@ class JoystickAdvancedExample extends FlameGame
bottom: 150,
),
onPressed: () => player.add(
rotateEffect..angle = 8 * rng.nextDouble(),
RotateEffect.by(
8 * rng.nextDouble(),
StandardEffectController(
duration: 1,
reverseDuration: 1,
curve: Curves.bounceOut,
),
),
),
);
@ -128,10 +129,9 @@ class JoystickAdvancedExample extends FlameGame
),
position: Vector2(20, size.y - 280),
onPressed: () => player.add(
ScaleEffect(
scale: Vector2.all(1.5),
duration: 1.0,
isAlternating: true,
ScaleEffect.by(
Vector2.all(1.5),
StandardEffectController(duration: 1.0, reverseDuration: 1.0),
),
),
);
@ -152,7 +152,7 @@ class JoystickAdvancedExample extends FlameGame
size: Vector2(185, 50),
onPressed: () => player.add(
OpacityEffect.fadeOut(
isAlternating: true,
StandardEffectController(duration: 0.5, reverseDuration: 0.5),
),
),
);