feat: Adding filterQuality arguments to Parallax load methods (#2596)

The Parallax already supported filter quality, but the loader methods were missing parameters for it to be passed to the loaded instances, making it impossible (unless manually loading) to set a filter quality in a parallax.

By setting a filter quality to none (which on flutter means that the next neighbour algorithm will be user) on pixel art sprites we can keep the crisp look that that style of art demands.

examples/lib/stories/parallax/advanced_parallax_example.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
@@ -21,6 +23,7 @@ class AdvancedParallaxExample extends FlameGame {
       (e) => loadParallaxLayer(
         ParallaxImageData(e.key),
         velocityMultiplier: Vector2(e.value, 1.0),
+        filterQuality: FilterQuality.none,
       ),
     );
     final parallax = ParallaxComponent(

examples/lib/stories/parallax/animation_parallax_example.dart

@@ -12,6 +12,7 @@ class AnimationParallaxExample extends FlameGame {
   Future<void> onLoad() async {
     final cityLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/city.png'),
+      filterQuality: FilterQuality.none,
     );
 
     final rainLayer = await loadParallaxLayer(
@@ -24,6 +25,7 @@ class AnimationParallaxExample extends FlameGame {
         ),
       ),
       velocityMultiplier: Vector2(2, 0),
+      filterQuality: FilterQuality.none,
     );
 
     final cloudsLayer = await loadParallaxLayer(
@@ -31,6 +33,7 @@ class AnimationParallaxExample extends FlameGame {
       velocityMultiplier: Vector2(4, 0),
       fill: LayerFill.none,
       alignment: Alignment.topLeft,
+      filterQuality: FilterQuality.none,
     );
 
     final parallax = Parallax(

examples/lib/stories/parallax/basic_parallax_example.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
@@ -21,6 +23,7 @@ class BasicParallaxExample extends FlameGame {
       _imageNames,
       baseVelocity: Vector2(20, 0),
       velocityMultiplierDelta: Vector2(1.8, 1.0),
+      filterQuality: FilterQuality.none,
     );
     add(parallax);
   }

examples/lib/stories/parallax/component_parallax_example.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
@@ -27,6 +29,7 @@ class MyParallaxComponent extends ParallaxComponent<ComponentParallaxExample> {
       ],
       baseVelocity: Vector2(20, 0),
       velocityMultiplierDelta: Vector2(1.8, 1.0),
+      filterQuality: FilterQuality.none,
     );
   }
 }

examples/lib/stories/parallax/no_fcs_parallax_example.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flame/extensions.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
@@ -26,6 +28,7 @@ class NoFCSParallaxExample extends Game {
       size: size,
       baseVelocity: Vector2(20, 0),
       velocityMultiplierDelta: Vector2(1.8, 1.0),
+      filterQuality: FilterQuality.none,
     );
   }
 

examples/lib/stories/parallax/sandbox_layer_parallax_example.dart

@@ -26,22 +26,27 @@ class SandboxLayerParallaxExample extends FlameGame {
   Future<void> onLoad() async {
     final bgLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/bg.png'),
+      filterQuality: FilterQuality.none,
     );
     final mountainFarLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/mountain-far.png'),
       velocityMultiplier: Vector2(1.8, 0),
+      filterQuality: FilterQuality.none,
     );
     final mountainLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/mountains.png'),
       velocityMultiplier: Vector2(2.8, 0),
+      filterQuality: FilterQuality.none,
     );
     final treeLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/trees.png'),
       velocityMultiplier: Vector2(3.8, 0),
+      filterQuality: FilterQuality.none,
     );
     final foregroundTreesLayer = await loadParallaxLayer(
       ParallaxImageData('parallax/foreground-trees.png'),
       velocityMultiplier: Vector2(4.8, 0),
+      filterQuality: FilterQuality.none,
     );
     final airplaneLayer = await loadParallaxLayer(
       ParallaxAnimationData(
@@ -56,6 +61,7 @@ class SandboxLayerParallaxExample extends FlameGame {
       velocityMultiplier: planeSpeed,
       fill: planeFill,
       alignment: planeAlignment,
+      filterQuality: FilterQuality.none,
     );
 
     final parallax = Parallax(

packages/flame/lib/src/components/parallax_component.dart

@@ -22,6 +22,7 @@ extension ParallaxComponentExtension on FlameGame {
     double? angle,
     Anchor? anchor,
     int? priority,
+    FilterQuality? filterQuality,
     ComponentKey? key,
   }) async {
     return ParallaxComponent.load(
@@ -38,6 +39,7 @@ extension ParallaxComponentExtension on FlameGame {
       angle: angle,
       anchor: anchor,
       priority: priority,
+      filterQuality: filterQuality,
       key: key,
     );
   }
@@ -144,6 +146,7 @@ class ParallaxComponent<T extends FlameGame> extends PositionComponent
     double? angle,
     Anchor? anchor,
     int? priority,
+    FilterQuality? filterQuality,
     ComponentKey? key,
   }) async {
     return ParallaxComponent(
@@ -156,6 +159,7 @@ class ParallaxComponent<T extends FlameGame> extends PositionComponent
         alignment: alignment,
         fill: fill,
         images: images,
+        filterQuality: filterQuality,
       ),
       position: position,
       size: size,

packages/flame/lib/src/parallax.dart

@@ -19,6 +19,7 @@ extension ParallaxExtension on Game {
     ImageRepeat repeat = ImageRepeat.repeatX,
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
+    FilterQuality? filterQuality,
   }) {
     return Parallax.load(
       dataList,
@@ -29,6 +30,7 @@ extension ParallaxExtension on Game {
       alignment: alignment,
       fill: fill,
       images: images,
+      filterQuality: filterQuality,
     );
   }
 
@@ -55,6 +57,7 @@ extension ParallaxExtension on Game {
     ImageRepeat repeat = ImageRepeat.repeatX,
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
+    FilterQuality? filterQuality,
   }) {
     return ParallaxAnimation.load(
       path,
@@ -63,6 +66,7 @@ extension ParallaxExtension on Game {
       alignment: alignment,
       fill: fill,
       images: images,
+      filterQuality: filterQuality,
     );
   }
 
@@ -72,6 +76,7 @@ extension ParallaxExtension on Game {
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
     Vector2? velocityMultiplier,
+    FilterQuality? filterQuality,
   }) {
     return ParallaxLayer.load(
       data,
@@ -80,6 +85,7 @@ extension ParallaxExtension on Game {
       alignment: alignment,
       fill: fill,
       images: images,
+      filterQuality: filterQuality,
     );
   }
 }
@@ -172,6 +178,7 @@ class ParallaxAnimation extends ParallaxRenderer {
     super.repeat,
     super.alignment,
     super.fill,
+    super.filterQuality,
   }) : _animationTicker = animation.createTicker();
 
   /// Takes a path of an image, a SpriteAnimationData, and optionally arguments
@@ -192,6 +199,7 @@ class ParallaxAnimation extends ParallaxRenderer {
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
     Images? images,
+    FilterQuality? filterQuality,
   }) async {
     images ??= Flame.images;
 
@@ -206,6 +214,7 @@ class ParallaxAnimation extends ParallaxRenderer {
       repeat: repeat,
       alignment: alignment,
       fill: fill,
+      filterQuality: filterQuality,
     );
   }
 
@@ -336,6 +345,7 @@ class ParallaxLayer {
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
     Images? images,
+    FilterQuality? filterQuality,
   }) async {
     return ParallaxLayer(
       await data.load(
@@ -343,6 +353,7 @@ class ParallaxLayer {
         alignment,
         fill,
         images,
+        filterQuality,
       ),
       velocityMultiplier: velocityMultiplier,
     );
@@ -358,6 +369,7 @@ abstract class ParallaxData {
     Alignment alignment,
     LayerFill fill,
     Images? images,
+    FilterQuality? filterQuality,
   );
 }
 
@@ -373,6 +385,7 @@ class ParallaxImageData extends ParallaxData {
     Alignment alignment,
     LayerFill fill,
     Images? images,
+    FilterQuality? filterQuality,
   ) {
     return ParallaxImage.load(
       path,
@@ -380,6 +393,7 @@ class ParallaxImageData extends ParallaxData {
       alignment: alignment,
       fill: fill,
       images: images,
+      filterQuality: filterQuality,
     );
   }
 }
@@ -397,6 +411,7 @@ class ParallaxAnimationData extends ParallaxData {
     Alignment alignment,
     LayerFill fill,
     Images? images,
+    FilterQuality? filterQuality,
   ) {
     return ParallaxAnimation.load(
       path,
@@ -405,6 +420,7 @@ class ParallaxAnimationData extends ParallaxData {
       alignment: alignment,
       fill: fill,
       images: images,
+      filterQuality: filterQuality,
     );
   }
 }
@@ -496,6 +512,7 @@ class Parallax {
     Alignment alignment = Alignment.bottomLeft,
     LayerFill fill = LayerFill.height,
     Images? images,
+    FilterQuality? filterQuality,
   }) async {
     final velocityDelta = velocityMultiplierDelta ?? Vector2.all(1.0);
     final layers = await Future.wait<ParallaxLayer>(
@@ -510,6 +527,7 @@ class Parallax {
           alignment,
           fill,
           images,
+          filterQuality,
         );
         return ParallaxLayer(
           renderer,