feat: NineTileBoxComponent with HasPaint to enable effects

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

@@ -6,7 +6,7 @@ import 'package:meta/meta.dart';
 export '../nine_tile_box.dart';
 
 /// This class is a thin wrapper on top of [NineTileBox] as a component.
-class NineTileBoxComponent extends PositionComponent {
+class NineTileBoxComponent extends PositionComponent with HasPaint {
   NineTileBox? nineTileBox;
 
   /// Takes the [NineTileBox] instance to render a box that can grow and shrink
@@ -38,6 +38,6 @@ class NineTileBoxComponent extends PositionComponent {
   @mustCallSuper
   @override
   void render(Canvas canvas) {
-    nineTileBox?.drawRect(canvas, size.toRect());
+    nineTileBox?.drawRect(canvas, size.toRect(), paint);
   }
 }

packages/flame/lib/src/nine_tile_box.dart

@@ -154,17 +154,22 @@ class NineTileBox {
   }
 
   /// Renders this nine box with the dimensions provided by [dst].
-  void drawRect(Canvas c, [Rect? dst]) {
-    c.drawImageNine(sprite.image, center, dst ?? _dst, _whitePaint);
+  void drawRect(Canvas c, [Rect? dst, Paint? overridePaint]) {
+    c.drawImageNine(
+      sprite.image,
+      center,
+      dst ?? _dst,
+      overridePaint ?? _whitePaint,
+    );
   }
 
   /// Renders this nine box as a rectangle at [position] with size [size].
-  void draw(Canvas c, Vector2 position, Vector2 size) {
+  void draw(Canvas c, Vector2 position, Vector2 size, [Paint? overridePaint]) {
     c.drawImageNine(
       sprite.image,
       center,
       Rect.fromLTWH(position.x, position.y, size.x, size.y),
-      _whitePaint,
+      overridePaint ?? _whitePaint,
     );
   }
 }