feat: Added glow effect using maskFilter

examples/lib/stories/effects/glow_effect_example.dart

@@ -0,0 +1,39 @@
+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';
+
+void main() {
+ runApp(GameWidget(game: GlowEffectExample()));
+}
+
+class GlowEffectExample extends FlameGame with TapDetector {
+ static const String description = '''
+ In this example we show how the `GlowEffect` can be used.
+ ''';
+
+ @override
+ Future<void> onLoad() async {
+ final paint = Paint()
+ ..color = const Color(0xff39FF14)
+ ..style = PaintingStyle.stroke;
+
+ add(
+ CircleComponent(
+ radius: 50,
+ position: Vector2(300, 400),
+ paint: paint,
+ )..add(
+ GlowEffect(
+ 10.0,
+ EffectController(
+ duration: 3,
+ // reverseDuration: 1.5,
+ infinite: true,
+ ),
+ ),
+ ),
+ );
+ }
+}

packages/flame/lib/effects.dart

@@ -21,6 +21,7 @@ export 'src/effects/controllers/speed_effect_controller.dart';
 export 'src/effects/controllers/zigzag_effect_controller.dart';
 export 'src/effects/effect.dart';
 export 'src/effects/effect_target.dart';
+export 'src/effects/glow_effect.dart';
 export 'src/effects/move_along_path_effect.dart';
 export 'src/effects/move_by_effect.dart';
 export 'src/effects/move_effect.dart';

packages/flame/lib/src/components/mixins/has_paint.dart

@@ -3,6 +3,7 @@ import 'dart:ui';
 
 import 'package:flame/components.dart';
 import 'package:flame/effects.dart';
+import 'package:flame/src/effects/provider_interfaces.dart';
 import 'package:flame/src/palette.dart';
 import 'package:meta/meta.dart';
 
@@ -14,9 +15,10 @@ import 'package:meta/meta.dart';
 /// [T], that can be omitted if the component only has one paint.
 /// [paintLayers] paints should be drawn in list order during the render. The
 /// main Paint is the first element.
-mixin HasPaint<T extends Object> on Component implements OpacityProvider {
+mixin HasPaint<T extends Object> on Component
+ implements OpacityProvider, PaintProvider {
  late final Map<T, Paint> _paints = {};
- Paint paint = BasicPalette.white.paint();
+ Paint _paint = BasicPalette.white.paint();
 
  @internal
  List<Paint>? paintLayersInternal;
@@ -124,6 +126,14 @@ mixin HasPaint<T extends Object> on Component implements OpacityProvider {
  }
  }
 
+ @override
+ Paint get paint => _paint;
+
+ @override
+ set paint(Paint value) {
+ _paint = value;
+ }
+
  /// Creates an [OpacityProvider] for given [paintId] and can be used as
  /// `target` for [OpacityEffect].
  OpacityProvider opacityProviderOf(T paintId) {

packages/flame/lib/src/effects/glow_effect.dart

@@ -0,0 +1,30 @@
+import 'dart:ui';
+
+import 'package:flame/effects.dart';
+import 'package:flame/src/effects/provider_interfaces.dart';
+
+/// Change the MaskFilter on Paint of a component over time.
+///
+/// This effect applies incremental changes to the MaskFilter on Paint of a
+/// component and
+/// requires that any other effect or update logic applied to the same component
+/// also used incremental updates.
+class GlowEffect extends Effect with EffectTarget<PaintProvider> {
+ GlowEffect(this.strength, super.controller, {this.style = BlurStyle.outer});
+
+ final BlurStyle style;
+ final double strength;
+
+ @override
+ void apply(double progress) {
+ final _value = strength * progress;
+
+ target.paint.maskFilter = MaskFilter.blur(style, _value);
+ }
+
+ @override
+ void reset() {
+ super.reset();
+ target.paint.maskFilter = null;
+ }
+}

packages/flame/lib/src/effects/provider_interfaces.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flame/components.dart';
 
 /// Interface for a component that can be affected by move effects.
@@ -64,3 +66,11 @@ abstract class OpacityProvider {
  double get opacity;
  set opacity(double value);
 }
+
+/// Interface for a component that can be affected by Paint effects.
+///
+/// See [HasPaint] for an example implementation.
+abstract class PaintProvider {
+ Paint get paint;
+ set paint(Paint value);
+}