refactor: migrated to zIndex

lib/game/components/android_acres.dart

@@ -1,19 +1,21 @@
 // ignore_for_file: avoid_renaming_method_parameters
 
-import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flame/components.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template android_acres}
 /// Area positioned on the left side of the board containing the
 /// [AndroidSpaceship], [SpaceshipRamp], [SpaceshipRail], and [AndroidBumper]s.
 /// {@endtemplate}
-class AndroidAcres extends Blueprint {
+class AndroidAcres extends Component {
   /// {@macro android_acres}
   AndroidAcres()
       : super(
-          components: [
+          children: [
+            SpaceshipRamp(),
+            SpaceshipRail(),
+            AndroidSpaceship(position: Vector2(-26.5, -28.5)),
             AndroidBumper.a(
               children: [
                 ScoringBehavior(points: 20000),
@@ -30,10 +32,5 @@ class AndroidAcres extends Blueprint {
               ],
             )..initialPosition = Vector2(-20.5, -13.8),
           ],
-          blueprints: [
-            SpaceshipRamp(),
-            AndroidSpaceship(position: Vector2(-26.5, -28.5)),
-            SpaceshipRail(),
-          ],
         );
 }

lib/game/components/bottom_group.dart

@@ -17,9 +17,8 @@ class BottomGroup extends Component with Rendering {
             _BottomGroupSide(side: BoardSide.right),
             _BottomGroupSide(side: BoardSide.left),
           ],
-          priority: RenderPriority.bottomGroup,
         ) {
-    zIndex = 2;
+    zIndex = RenderPriority.bottomGroup;
   }
 }
 

lib/game/components/controlled_ball.dart

@@ -20,6 +20,7 @@ class ControlledBall extends Ball with Controls<BallController> {
   }) : super(baseColor: characterTheme.ballColor) {
     controller = BallController(this);
     layer = Layer.launcher;
+    zIndex = RenderPriority.ballOnLaunchRamp;
   }
 
   /// {@template bonus_ball}
@@ -29,13 +30,13 @@ class ControlledBall extends Ball with Controls<BallController> {
     required CharacterTheme characterTheme,
   }) : super(baseColor: characterTheme.ballColor) {
     controller = BallController(this);
-    priority = RenderPriority.ballOnBoard;
+    zIndex = RenderPriority.ballOnBoard;
   }
 
   /// [Ball] used in [DebugPinballGame].
   ControlledBall.debug() : super(baseColor: const Color(0xFFFF0000)) {
     controller = BallController(this);
-    priority = RenderPriority.ballOnBoard;
+    zIndex = RenderPriority.ballOnBoard;
   }
 }
 

lib/game/components/dino_desert.dart

@@ -9,14 +9,12 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@endtemplate}
 // TODO(allisonryan0002): use a controller to initiate dino bonus when dino is
 // fully implemented.
-class DinoDesert extends Blueprint {
+class DinoDesert extends Component {
   /// {@macro dino_desert}
   DinoDesert()
       : super(
-          components: [
+          children: [
             // ChromeDino()..initialPosition = Vector2(12.3, -6.9),
-          ],
-          blueprints: [
             DinoWalls(),
           ],
         );

lib/game/components/flutter_forest/flutter_forest.dart

@@ -5,12 +5,13 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/components/flutter_forest/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template flutter_forest}
 /// Area positioned at the top right of the board where the [Ball] can bounce
 /// off [DashNestBumper]s.
 /// {@endtemplate}
-class FlutterForest extends Component {
+class FlutterForest extends Component with Rendering {
   /// {@macro flutter_forest}
   FlutterForest()
       : super(
@@ -38,7 +39,9 @@ class FlutterForest extends Component {
             DashAnimatronic()..position = Vector2(20, -66),
             FlutterForestBonusBehavior(),
           ],
-        );
+        ) {
+    zIndex = RenderPriority.flutterForest;
+  }
 
   /// Creates a [FlutterForest] without any children.
   ///

lib/game/components/google_word/google_word.dart

@@ -3,11 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/components/google_word/behaviors/behaviors.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template google_word}
 /// Loads all [GoogleLetter]s to compose a [GoogleWord].
 /// {@endtemplate}
-class GoogleWord extends Component {
+class GoogleWord extends Component with Rendering {
   /// {@macro google_word}
   GoogleWord({
     required Vector2 position,
@@ -39,7 +40,9 @@ class GoogleWord extends Component {
             )..initialPosition = position + Vector2(12.92, 1.82),
             GoogleWordBonusBehavior(),
           ],
-        );
+        ) {
+    zIndex = RenderPriority.decal;
+  }
 
   /// Creates a [GoogleWord] without any children.
   ///

lib/game/components/multipliers/multipliers.dart

@@ -3,11 +3,12 @@ import 'package:flame/components.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball/game/components/multipliers/behaviors/behaviors.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template multipliers}
 /// A group for the multipliers on the board.
 /// {@endtemplate}
-class Multipliers extends Component {
+class Multipliers extends Component with Rendering {
   /// {@macro multipliers}
   Multipliers()
       : super(
@@ -34,7 +35,9 @@ class Multipliers extends Component {
             ),
             MultipliersBehavior(),
           ],
-        );
+        ) {
+    zIndex = RenderPriority.decal;
+  }
 
   /// Creates [Multipliers] without any children.
   ///

lib/game/components/scoring_behavior.dart

@@ -24,11 +24,11 @@ class ScoringBehavior extends ContactBehavior with HasGameRef<PinballGame> {
 
     gameRef.read<GameBloc>().add(Scored(points: _points));
     gameRef.audio.score();
-    gameRef.add(
+    gameRef.firstChild<PinballCanvasComponent>()?.add(
-      ScoreText(
+          ScoreText(
-        text: _points.toString(),
+            text: _points.toString(),
-        position: other.body.position,
+            position: other.body.position,
-      ),
+          ),
-    );
+        );
   }
 }

lib/game/components/sparky_scorch.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: avoid_renaming_method_parameters
 
+import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_components/pinball_components.dart';
@@ -9,11 +10,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// Area positioned at the top left of the board containing the
 /// [SparkyComputer], [SparkyAnimatronic], and [SparkyBumper]s.
 /// {@endtemplate}
-class SparkyScorch extends Blueprint {
+class SparkyScorch extends Component {
   /// {@macro sparky_scorch}
   SparkyScorch()
       : super(
-          components: [
+          children: [
             SparkyBumper.a(
               children: [
                 ScoringBehavior(points: 20000),
@@ -31,8 +32,6 @@ class SparkyScorch extends Blueprint {
             )..initialPosition = Vector2(-3.3, -52.55),
             SparkyComputerSensor()..initialPosition = Vector2(-13, -49.8),
             SparkyAnimatronic()..position = Vector2(-13.8, -58.2),
-          ],
-          blueprints: [
             SparkyComputer(),
           ],
         );

lib/game/pinball_game.dart

@@ -62,16 +62,15 @@ class PinballGame extends Forge2DGame
               BoardDimensions.bounds.center.dy + 1.8,
             ),
           ),
+          Slingshots(),
+          Boundaries(),
+          DinoDesert(),
+          SparkyScorch(),
+          AndroidAcres(),
         ],
       ),
     );
 
-    await addFromBlueprint(Boundaries());
-    await addFromBlueprint(SparkyScorch());
-    await addFromBlueprint(AndroidAcres());
-    await addFromBlueprint(DinoDesert());
-    await addFromBlueprint(Slingshots());
-
     await super.onLoad();
   }
 
@@ -205,7 +204,9 @@ class DebugPinballGame extends PinballGame with FPSCounter {
     super.onTapUp(info);
 
     if (info.raw.kind == PointerDeviceKind.mouse) {
-      add(ControlledBall.debug()..initialPosition = info.eventPosition.game);
+      final ball = ControlledBall.debug()
+        ..initialPosition = info.eventPosition.game;
+      firstChild<PinballCanvasComponent>()?.add(ball);
     }
   }
 }

packages/pinball_components/lib/src/components/android_bumper/android_bumper.dart

@@ -12,7 +12,7 @@ export 'cubit/android_bumper_cubit.dart';
 /// {@template android_bumper}
 /// Bumper for area under the [AndroidSpaceship].
 /// {@endtemplate}
-class AndroidBumper extends BodyComponent with InitialPosition {
+class AndroidBumper extends BodyComponent with InitialPosition, Rendering {
   /// {@macro android_bumper}
   AndroidBumper._({
     required double majorRadius,
@@ -25,7 +25,6 @@ class AndroidBumper extends BodyComponent with InitialPosition {
   })  : _majorRadius = majorRadius,
         _minorRadius = minorRadius,
         super(
-          priority: RenderPriority.androidBumper,
           renderBody: false,
           children: [
             AndroidBumperBallContactBehavior(),
@@ -38,7 +37,9 @@ class AndroidBumper extends BodyComponent with InitialPosition {
             ),
             ...?children,
           ],
-        );
+        ) {
+    zIndex = RenderPriority.androidBumper;
+  }
 
   /// {@macro android_bumper}
   AndroidBumper.a({

packages/pinball_components/lib/src/components/android_spaceship.dart

@@ -9,10 +9,10 @@ import 'package:pinball_components/gen/assets.gen.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
 import 'package:pinball_flame/pinball_flame.dart';
 
-class AndroidSpaceship extends Blueprint {
+class AndroidSpaceship extends Component {
   AndroidSpaceship({required Vector2 position})
       : super(
-          components: [
+          children: [
             _SpaceshipSaucer()..initialPosition = position,
             _SpaceshipSaucerSpriteAnimationComponent()..position = position,
             _LightBeamSpriteComponent()..position = position + Vector2(2.5, 5),
@@ -65,12 +65,13 @@ class _SpaceshipSaucerShape extends ChainShape {
 }
 
 class _SpaceshipSaucerSpriteAnimationComponent extends SpriteAnimationComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
   _SpaceshipSaucerSpriteAnimationComponent()
       : super(
           anchor: Anchor.center,
-          priority: RenderPriority.spaceshipSaucer,
+        ) {
-        );
+    zIndex = RenderPriority.spaceshipSaucer;
+  }
 
   @override
   Future<void> onLoad() async {
@@ -101,12 +102,14 @@ class _SpaceshipSaucerSpriteAnimationComponent extends SpriteAnimationComponent
 }
 
 // TODO(allisonryan0002): add pulsing behavior.
-class _LightBeamSpriteComponent extends SpriteComponent with HasGameRef {
+class _LightBeamSpriteComponent extends SpriteComponent
+    with HasGameRef, Rendering {
   _LightBeamSpriteComponent()
       : super(
           anchor: Anchor.center,
-          priority: RenderPriority.spaceshipLightBeam,
+        ) {
-        );
+    zIndex = RenderPriority.spaceshipLightBeam;
+  }
 
   @override
   Future<void> onLoad() async {
@@ -121,14 +124,15 @@ class _LightBeamSpriteComponent extends SpriteComponent with HasGameRef {
   }
 }
 
-class _AndroidHead extends BodyComponent with InitialPosition, Layered {
+class _AndroidHead extends BodyComponent
+    with InitialPosition, Layered, Rendering {
   _AndroidHead()
       : super(
-          priority: RenderPriority.androidHead,
           children: [_AndroidHeadSpriteAnimationComponent()],
           renderBody: false,
         ) {
     layer = Layer.spaceship;
+    zIndex = RenderPriority.androidHead;
   }
 
   @override

packages/pinball_components/lib/src/components/ball.dart

@@ -6,12 +6,13 @@ import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/widgets.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template ball}
 /// A solid, [BodyType.dynamic] sphere that rolls and bounces around.
 /// {@endtemplate}
 class Ball<T extends Forge2DGame> extends BodyComponent<T>
-    with Layered, InitialPosition {
+    with Layered, InitialPosition, Rendering {
   /// {@macro ball}
   Ball({
     required this.baseColor,
@@ -133,13 +134,14 @@ class _BallSpriteComponent extends SpriteComponent with HasGameRef {
 }
 
 class _TurboChargeSpriteAnimationComponent extends SpriteAnimationComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
   _TurboChargeSpriteAnimationComponent()
       : super(
           anchor: const Anchor(0.53, 0.72),
-          priority: RenderPriority.turboChargeFlame,
           removeOnFinish: true,
-        );
+        ) {
+    zIndex = RenderPriority.turboChargeFlame;
+  }
 
   late final Vector2 _textureSize;
 

packages/pinball_components/lib/src/components/board_background_sprite_component.dart

@@ -9,9 +9,10 @@ class BoardBackgroundSpriteComponent extends SpriteComponent
   BoardBackgroundSpriteComponent()
       : super(
           anchor: Anchor.center,
-          priority: RenderPriority.boardBackground,
           position: Vector2(0, -1),
-        );
+        ) {
+    zIndex = RenderPriority.boardBackground;
+  }
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/lib/src/components/boundaries.dart

@@ -6,11 +6,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@template boundaries}
 /// A [Blueprint] which creates the [_BottomBoundary] and [_OuterBoundary].
 ///{@endtemplate boundaries}
-class Boundaries extends Blueprint {
+class Boundaries extends Component {
   /// {@macro boundaries}
   Boundaries()
       : super(
-          components: [
+          children: [
             _BottomBoundary(),
             _OuterBoundary(),
             _OuterBottomBoundarySpriteComponent(),
@@ -22,14 +22,15 @@ class Boundaries extends Blueprint {
 /// Curved boundary at the bottom of the board where the [Ball] exits the field
 /// of play.
 /// {@endtemplate bottom_boundary}
-class _BottomBoundary extends BodyComponent with InitialPosition {
+class _BottomBoundary extends BodyComponent with InitialPosition, Rendering {
   /// {@macro bottom_boundary}
   _BottomBoundary()
       : super(
           renderBody: false,
-          priority: RenderPriority.bottomBoundary,
           children: [_BottomBoundarySpriteComponent()],
-        );
+        ) {
+    zIndex = RenderPriority.bottomBoundary;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final bottomLeftCurve = BezierCurveShape(
@@ -87,14 +88,15 @@ class _BottomBoundarySpriteComponent extends SpriteComponent with HasGameRef {
 /// Boundary enclosing the top and left side of the board. The right side of the
 /// board is closed by the barrier the [LaunchRamp] creates.
 /// {@endtemplate outer_boundary}
-class _OuterBoundary extends BodyComponent with InitialPosition {
+class _OuterBoundary extends BodyComponent with InitialPosition, Rendering {
   /// {@macro outer_boundary}
   _OuterBoundary()
       : super(
           renderBody: false,
-          priority: RenderPriority.outerBoundary,
           children: [_OuterBoundarySpriteComponent()],
-        );
+        ) {
+    zIndex = RenderPriority.outerBoundary;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final topWall = EdgeShape()
@@ -189,13 +191,14 @@ class _OuterBoundarySpriteComponent extends SpriteComponent with HasGameRef {
 }
 
 class _OuterBottomBoundarySpriteComponent extends SpriteComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
   _OuterBottomBoundarySpriteComponent()
       : super(
-          priority: RenderPriority.outerBottomBoundary,
           anchor: Anchor.center,
           position: Vector2(0, 71),
-        );
+        ) {
+    zIndex = RenderPriority.outerBottomBoundary;
+  }
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/lib/src/components/chrome_dino.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart' hide Timer;
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template chrome_dino}
 /// Dino that swivels back and forth, opening its mouth to eat a [Ball].
@@ -10,13 +11,14 @@ import 'package:pinball_components/pinball_components.dart';
 /// Upon eating a [Ball], the dino rotates and spits the [Ball] out in a
 /// different direction.
 /// {@endtemplate}
-class ChromeDino extends BodyComponent with InitialPosition {
+class ChromeDino extends BodyComponent with InitialPosition, Rendering {
   /// {@macro chrome_dino}
   ChromeDino()
       : super(
-          priority: RenderPriority.dino,
           renderBody: false,
-        );
+        ) {
+    zIndex = RenderPriority.dino;
+  }
 
   /// The size of the dinosaur mouth.
   static final size = Vector2(5.5, 5);

packages/pinball_components/lib/src/components/dino_walls.dart

@@ -9,11 +9,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@template dinowalls}
 /// A [Blueprint] which creates walls for the [ChromeDino].
 /// {@endtemplate}
-class DinoWalls extends Blueprint {
+class DinoWalls extends Component {
   /// {@macro dinowalls}
   DinoWalls()
       : super(
-          components: [
+          children: [
             _DinoTopWall(),
             _DinoBottomWall(),
           ],
@@ -23,14 +23,15 @@ class DinoWalls extends Blueprint {
 /// {@template dino_top_wall}
 /// Wall segment located above [ChromeDino].
 /// {@endtemplate}
-class _DinoTopWall extends BodyComponent with InitialPosition {
+class _DinoTopWall extends BodyComponent with InitialPosition, Rendering {
   ///{@macro dino_top_wall}
   _DinoTopWall()
       : super(
-          priority: RenderPriority.dinoTopWall,
           children: [_DinoTopWallSpriteComponent()],
           renderBody: false,
-        );
+        ) {
+    zIndex = RenderPriority.dinoTopWall;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final topStraightShape = EdgeShape()
@@ -116,14 +117,15 @@ class _DinoTopWallSpriteComponent extends SpriteComponent with HasGameRef {
 /// {@template dino_bottom_wall}
 /// Wall segment located below [ChromeDino].
 /// {@endtemplate}
-class _DinoBottomWall extends BodyComponent with InitialPosition {
+class _DinoBottomWall extends BodyComponent with InitialPosition, Rendering {
   ///{@macro dino_top_wall}
   _DinoBottomWall()
       : super(
-          priority: RenderPriority.dinoBottomWall,
           children: [_DinoBottomWallSpriteComponent()],
           renderBody: false,
-        );
+        ) {
+    zIndex = RenderPriority.dinoBottomWall;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final topStraightShape = EdgeShape()

packages/pinball_components/lib/src/components/launch_ramp.dart

@@ -27,7 +27,7 @@ class LaunchRamp extends Component {
 /// {@template launch_ramp_base}
 /// Ramp the [Ball] is launched from at the beginning of each ball life.
 /// {@endtemplate}
-class _LaunchRampBase extends BodyComponent with Layered {
+class _LaunchRampBase extends BodyComponent with Layered, Rendering {
   /// {@macro launch_ramp_base}
   _LaunchRampBase()
       : super(
@@ -37,6 +37,7 @@ class _LaunchRampBase extends BodyComponent with Layered {
             _LaunchRampBaseSpriteComponent(),
           ],
         ) {
+    zIndex = RenderPriority.launchRamp;
     layer = Layer.launcher;
   }
 
@@ -124,11 +125,10 @@ class _LaunchRampBaseSpriteComponent extends SpriteComponent with HasGameRef {
 }
 
 class _LaunchRampBackgroundRailingSpriteComponent extends SpriteComponent
-    with HasGameRef, Rendering {
+    with HasGameRef {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
-    zIndex = 1;
 
     final sprite = await gameRef.loadSprite(
       Assets.images.launchRamp.backgroundRailing.keyName,
@@ -144,13 +144,15 @@ class _LaunchRampBackgroundRailingSpriteComponent extends SpriteComponent
 /// Foreground railing for the [_LaunchRampBase] to render in front of the
 /// [Ball].
 /// {@endtemplate}
-class _LaunchRampForegroundRailing extends BodyComponent {
+class _LaunchRampForegroundRailing extends BodyComponent with Rendering {
   /// {@macro launch_ramp_foreground_railing}
   _LaunchRampForegroundRailing()
       : super(
           children: [_LaunchRampForegroundRailingSpriteComponent()],
           renderBody: false,
-        );
+        ) {
+    zIndex = RenderPriority.launchRampForegroundRailing;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final fixturesDef = <FixtureDef>[];

packages/pinball_components/lib/src/components/layer_sensor.dart

@@ -90,14 +90,12 @@ abstract class LayerSensor extends BodyComponent
       if (isBallEnteringOpening) {
         other
           ..layer = insideLayer
-          ..priority = insidePriority
+          ..zIndex = insidePriority;
-          ..reorderChildren();
       }
     } else {
       other
         ..layer = outsideLayer
-        ..priority = outsidePriority
+        ..zIndex = outsidePriority;
-        ..reorderChildren();
     }
   }
 }

packages/pinball_components/lib/src/components/plunger.dart

@@ -1,6 +1,7 @@
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template plunger}
 /// [Plunger] serves as a spring, that shoots the ball on the right side of the
@@ -8,16 +9,12 @@ import 'package:pinball_components/pinball_components.dart';
 ///
 /// [Plunger] ignores gravity so the player controls its downward [pull].
 /// {@endtemplate}
-class Plunger extends BodyComponent with InitialPosition, Layered {
+class Plunger extends BodyComponent with InitialPosition, Layered, Rendering {
   /// {@macro plunger}
   Plunger({
     required this.compressionDistance,
-    // TODO(ruimiguel): set to priority +1 over LaunchRamp once all priorities
+  }) : super(renderBody: false) {
-    // are fixed.
+    zIndex = RenderPriority.plunger;
-  }) : super(
-          priority: RenderPriority.plunger,
-          renderBody: false,
-        ) {
     layer = Layer.launcher;
   }
 

packages/pinball_components/lib/src/components/render_priority.dart

@@ -14,106 +14,106 @@ abstract class RenderPriority {
   // Ball
 
   /// Render priority for the [Ball] while it's on the board.
-  static const int ballOnBoard = _base;
+  static const ballOnBoard = _base;
 
   /// Render priority for the [Ball] while it's on the [SpaceshipRamp].
-  static const int ballOnSpaceshipRamp =
+  static const ballOnSpaceshipRamp = _above + spaceshipRampBackgroundRailing;
-      _above + spaceshipRampBackgroundRailing;
 
   /// Render priority for the [Ball] while it's on the [AndroidSpaceship].
-  static const int ballOnSpaceship = _above + spaceshipSaucer;
+  static const ballOnSpaceship = _above + spaceshipSaucer;
 
   /// Render priority for the [Ball] while it's on the [SpaceshipRail].
-  static const int ballOnSpaceshipRail = _above + spaceshipRail;
+  static const ballOnSpaceshipRail = _above + spaceshipRail;
 
   /// Render priority for the [Ball] while it's on the [LaunchRamp].
-  static const int ballOnLaunchRamp = launchRamp;
+  static const ballOnLaunchRamp = launchRamp;
 
   // Background
 
   // TODO(allisonryan0002): fix this magic priority. Could bump all priorities
   // so there are no negatives.
-  static const int boardBackground = 3 * _below + _base;
+  static const boardBackground = 3 * _below + _base;
+
+  static const decal = _above + boardBackground;
 
   // Boundaries
 
-  static const int bottomBoundary = _above + dinoBottomWall;
+  static const bottomBoundary = _above + dinoBottomWall;
 
-  static const int outerBoundary = _above + boardBackground;
+  static const outerBoundary = _above + boardBackground;
 
-  static const int outerBottomBoundary = _above + rocket;
+  static const outerBottomBoundary = _above + rocket;
 
   // Bottom Group
 
-  static const int bottomGroup = _above + ballOnBoard;
+  static const bottomGroup = _above + ballOnBoard;
 
   // Launcher
 
-  static const int launchRamp = _above + outerBoundary;
+  static const launchRamp = _above + outerBoundary;
 
-  static const int launchRampForegroundRailing = ballOnBoard;
+  static const launchRampForegroundRailing = ballOnBoard;
 
-  static const int plunger = _above + launchRamp;
+  static const plunger = _above + launchRamp;
 
-  static const int rocket = _below + bottomBoundary;
+  static const rocket = _below + bottomBoundary;
 
   // Dino Desert
 
-  static const int dinoTopWall = _above + ballOnBoard;
+  static const dinoTopWall = _above + ballOnBoard;
 
-  static const int dino = _above + dinoTopWall;
+  static const dino = _above + dinoTopWall;
 
-  static const int dinoBottomWall = _above + dino;
+  static const dinoBottomWall = _above + dino;
 
-  static const int slingshot = _above + dinoBottomWall;
+  static const slingshots = _above + dinoBottomWall;
 
   // Flutter Forest
 
-  static const int flutterForest = _above + launchRampForegroundRailing;
+  static const flutterForest = _above + launchRampForegroundRailing;
 
   // Sparky Scorch
 
-  static const int computerBase = _below + ballOnBoard;
+  static const computerBase = _below + ballOnBoard;
 
-  static const int computerTop = _above + ballOnBoard;
+  static const computerTop = _above + ballOnBoard;
 
-  static const int computerGlow = _above + ballOnBoard;
+  static const computerGlow = _above + ballOnBoard;
 
-  static const int sparkyAnimatronic = _above + spaceshipRampForegroundRailing;
+  static const sparkyAnimatronic = _above + spaceshipRampForegroundRailing;
 
-  static const int sparkyBumper = _above + ballOnBoard;
+  static const sparkyBumper = _above + ballOnBoard;
 
-  static const int turboChargeFlame = _above + ballOnBoard;
+  static const turboChargeFlame = _above + ballOnBoard;
 
   // Android Acres
 
-  static const int spaceshipRail = _above + bottomGroup;
+  static const spaceshipRail = _above + bottomGroup;
 
-  static const int spaceshipRailExit = _above + ballOnSpaceshipRail;
+  static const spaceshipRailExit = _above + ballOnSpaceshipRail;
 
-  static const int spaceshipSaucer = _above + ballOnSpaceshipRail;
+  static const spaceshipSaucer = _above + ballOnSpaceshipRail;
 
-  static const int spaceshipLightBeam = _below + spaceshipSaucer;
+  static const spaceshipLightBeam = _below + spaceshipSaucer;
 
-  static const int androidHead = _above + spaceshipSaucer;
+  static const androidHead = _above + ballOnSpaceship;
 
-  static const int spaceshipRamp = _above + ballOnBoard;
+  static const spaceshipRamp = _above + ballOnBoard;
 
-  static const int spaceshipRampBackgroundRailing = _above + spaceshipRamp;
+  static const spaceshipRampBackgroundRailing = _above + spaceshipRamp;
 
-  static const int spaceshipRampArrow = _above + spaceshipRamp;
+  static const spaceshipRampArrow = _above + spaceshipRamp;
 
-  static const int spaceshipRampForegroundRailing =
+  static const spaceshipRampForegroundRailing = _above + ballOnSpaceshipRamp;
-      _above + ballOnSpaceshipRamp;
 
-  static const int spaceshipRampBoardOpening = _below + ballOnBoard;
+  static const spaceshipRampBoardOpening = _below + ballOnBoard;
 
-  static const int androidBumper = _above + ballOnBoard;
+  static const androidBumper = _above + ballOnBoard;
 
   // Score Text
 
-  static const int scoreText = _above + spaceshipRampForegroundRailing;
+  static const scoreText = _above + spaceshipRampForegroundRailing;
 
   // Debug information
-  static const int debugInfo = _above + scoreText;
+  static const debugInfo = _above + scoreText;
 }

packages/pinball_components/lib/src/components/rocket.dart

@@ -1,17 +1,16 @@
 import 'package:flame/components.dart';
 import 'package:pinball_components/gen/assets.gen.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template rocket_sprite_component}
 /// A [SpriteComponent] for the rocket over [Plunger].
 /// {@endtemplate}
-class RocketSpriteComponent extends SpriteComponent with HasGameRef {
+class RocketSpriteComponent extends SpriteComponent with HasGameRef, Rendering {
   /// {@macro rocket_sprite_component}
-  RocketSpriteComponent()
+  RocketSpriteComponent() : super(anchor: Anchor.center) {
-      : super(
+    zIndex = RenderPriority.rocket;
-          priority: RenderPriority.rocket,
+  }
-          anchor: Anchor.center,
-        );
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/lib/src/components/score_text.dart

@@ -4,11 +4,12 @@ import 'package:flame/components.dart';
 import 'package:flame/effects.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template score_text}
 /// A [TextComponent] that spawns at a given [position] with a moving animation.
 /// {@endtemplate}
-class ScoreText extends TextComponent {
+class ScoreText extends TextComponent with Rendering {
   /// {@macro score_text}
   ScoreText({
     required String text,
@@ -18,8 +19,9 @@ class ScoreText extends TextComponent {
           text: text,
           position: position,
           anchor: Anchor.center,
-          priority: RenderPriority.scoreText,
+        ) {
-        );
+    zIndex = RenderPriority.scoreText;
+  }
 
   late final Effect _effect;
 

packages/pinball_components/lib/src/components/slingshot.dart

@@ -7,11 +7,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// A [Blueprint] which creates the pair of [Slingshot]s on the right side of
 /// the board.
 /// {@endtemplate}
-class Slingshots extends Blueprint {
+class Slingshots extends Component with Rendering {
   /// {@macro slingshots}
   Slingshots()
       : super(
-          components: [
+          children: [
             Slingshot(
               length: 5.64,
               angle: -0.017,
@@ -23,7 +23,9 @@ class Slingshots extends Blueprint {
               spritePath: Assets.images.slingshot.lower.keyName,
             )..initialPosition = Vector2(24.7, 6.2),
           ],
-        );
+        ) {
+    zIndex = RenderPriority.slingshots;
+  }
 }
 
 /// {@template slingshot}
@@ -38,7 +40,6 @@ class Slingshot extends BodyComponent with InitialPosition {
   })  : _length = length,
         _angle = angle,
         super(
-          priority: RenderPriority.slingshot,
           children: [_SlinghsotSpriteComponent(spritePath, angle: angle)],
           renderBody: false,
         );

packages/pinball_components/lib/src/components/spaceship_rail.dart

@@ -8,11 +8,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@template spaceship_rail}
 /// A [Blueprint] for the rail exiting the [AndroidSpaceship].
 /// {@endtemplate}
-class SpaceshipRail extends Blueprint {
+class SpaceshipRail extends Component {
   /// {@macro spaceship_rail}
   SpaceshipRail()
       : super(
-          components: [
+          children: [
             _SpaceshipRail(),
             _SpaceshipRailExit(),
             _SpaceshipRailExitSpriteComponent()
@@ -20,14 +20,14 @@ class SpaceshipRail extends Blueprint {
         );
 }
 
-class _SpaceshipRail extends BodyComponent with Layered {
+class _SpaceshipRail extends BodyComponent with Layered, Rendering {
   _SpaceshipRail()
       : super(
-          priority: RenderPriority.spaceshipRail,
           children: [_SpaceshipRailSpriteComponent()],
           renderBody: false,
         ) {
     layer = Layer.spaceshipExitRail;
+    zIndex = RenderPriority.spaceshipRail;
   }
 
   List<FixtureDef> _createFixtureDefs() {
@@ -125,13 +125,14 @@ class _SpaceshipRailSpriteComponent extends SpriteComponent with HasGameRef {
 }
 
 class _SpaceshipRailExitSpriteComponent extends SpriteComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
   _SpaceshipRailExitSpriteComponent()
       : super(
           anchor: Anchor.center,
           position: Vector2(-28, 19.4),
-          priority: RenderPriority.spaceshipRailExit,
+        ) {
-        );
+    zIndex = RenderPriority.spaceshipRailExit;
+  }
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/lib/src/components/spaceship_ramp.dart

@@ -10,11 +10,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@template spaceship_ramp}
 /// A [Blueprint] which creates the ramp leading into the [AndroidSpaceship].
 /// {@endtemplate}
-class SpaceshipRamp extends Blueprint {
+class SpaceshipRamp extends Component {
   /// {@macro spaceship_ramp}
   SpaceshipRamp()
       : super(
-          components: [
+          children: [
             _SpaceshipRampOpening(
               outsidePriority: RenderPriority.ballOnBoard,
               rotation: math.pi,
@@ -41,10 +41,8 @@ class SpaceshipRamp extends Blueprint {
   /// Forwards the sprite to the next [SpaceshipRampArrowSpriteState].
   ///
   /// If the current state is the last one it cycles back to the initial state.
-  void progress() => components
+  void progress() =>
-      .whereType<_SpaceshipRampArrowSpriteComponent>()
+      firstChild<_SpaceshipRampArrowSpriteComponent>()?.progress();
-      .first
-      .progress();
 }
 
 /// Indicates the state of the arrow on the [SpaceshipRamp].
@@ -94,16 +92,16 @@ extension on SpaceshipRampArrowSpriteState {
 }
 
 class _SpaceshipRampBackground extends BodyComponent
-    with InitialPosition, Layered {
+    with InitialPosition, Layered, Rendering {
   _SpaceshipRampBackground()
       : super(
-          priority: RenderPriority.spaceshipRamp,
           renderBody: false,
           children: [
             _SpaceshipRampBackgroundRampSpriteComponent(),
           ],
         ) {
     layer = Layer.spaceshipEntranceRamp;
+    zIndex = RenderPriority.spaceshipRamp;
   }
 
   /// Width between walls of the ramp.
@@ -148,13 +146,14 @@ class _SpaceshipRampBackground extends BodyComponent
 }
 
 class _SpaceshipRampBackgroundRailingSpriteComponent extends SpriteComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
   _SpaceshipRampBackgroundRailingSpriteComponent()
       : super(
           anchor: Anchor.center,
           position: Vector2(-11.7, -54.3),
-          priority: RenderPriority.spaceshipRampBackgroundRailing,
+        ) {
-        );
+    zIndex = RenderPriority.spaceshipRampBackgroundRailing;
+  }
 
   @override
   Future<void> onLoad() async {
@@ -197,14 +196,15 @@ class _SpaceshipRampBackgroundRampSpriteComponent extends SpriteComponent
 /// {@endtemplate}
 class _SpaceshipRampArrowSpriteComponent
     extends SpriteGroupComponent<SpaceshipRampArrowSpriteState>
-    with HasGameRef {
+    with HasGameRef, Rendering {
   /// {@macro spaceship_ramp_arrow_sprite_component}
   _SpaceshipRampArrowSpriteComponent()
       : super(
           anchor: Anchor.center,
           position: Vector2(-3.9, -56.5),
-          priority: RenderPriority.spaceshipRampArrow,
+        ) {
-        );
+    zIndex = RenderPriority.spaceshipRampArrow;
+  }
 
   /// Changes arrow image to the next [Sprite].
   void progress() => current = current?.next;
@@ -226,8 +226,10 @@ class _SpaceshipRampArrowSpriteComponent
 }
 
 class _SpaceshipRampBoardOpeningSpriteComponent extends SpriteComponent
-    with HasGameRef {
+    with HasGameRef, Rendering {
-  _SpaceshipRampBoardOpeningSpriteComponent() : super(anchor: Anchor.center);
+  _SpaceshipRampBoardOpeningSpriteComponent() : super(anchor: Anchor.center) {
+    zIndex = RenderPriority.spaceshipRampBoardOpening;
+  }
 
   @override
   Future<void> onLoad() async {
@@ -243,14 +245,14 @@ class _SpaceshipRampBoardOpeningSpriteComponent extends SpriteComponent
 }
 
 class _SpaceshipRampForegroundRailing extends BodyComponent
-    with InitialPosition, Layered {
+    with InitialPosition, Layered, Rendering {
   _SpaceshipRampForegroundRailing()
       : super(
-          priority: RenderPriority.spaceshipRampForegroundRailing,
           renderBody: false,
           children: [_SpaceshipRampForegroundRailingSpriteComponent()],
         ) {
     layer = Layer.spaceshipEntranceRamp;
+    zIndex = RenderPriority.spaceshipRampForegroundRailing;
   }
 
   List<FixtureDef> _createFixtureDefs() {

packages/pinball_components/lib/src/components/sparky_animatronic.dart

@@ -1,17 +1,20 @@
 import 'package:flame/components.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_flame/pinball_flame.dart';
 
 /// {@template sparky_animatronic}
 /// Animated Sparky that sits on top of the [SparkyComputer].
 /// {@endtemplate}
-class SparkyAnimatronic extends SpriteAnimationComponent with HasGameRef {
+class SparkyAnimatronic extends SpriteAnimationComponent
+    with HasGameRef, Rendering {
   /// {@macro sparky_animatronic}
   SparkyAnimatronic()
       : super(
           anchor: Anchor.center,
           playing: false,
-          priority: RenderPriority.sparkyAnimatronic,
+        ) {
-        );
+    zIndex = RenderPriority.sparkyAnimatronic;
+  }
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/lib/src/components/sparky_bumper/sparky_bumper.dart

@@ -12,7 +12,7 @@ export 'cubit/sparky_bumper_cubit.dart';
 /// {@template sparky_bumper}
 /// Bumper for Sparky area.
 /// {@endtemplate}
-class SparkyBumper extends BodyComponent with InitialPosition {
+class SparkyBumper extends BodyComponent with InitialPosition, Rendering {
   /// {@macro sparky_bumper}
   SparkyBumper._({
     required double majorRadius,
@@ -25,7 +25,6 @@ class SparkyBumper extends BodyComponent with InitialPosition {
   })  : _majorRadius = majorRadius,
         _minorRadius = minorRadius,
         super(
-          priority: RenderPriority.sparkyBumper,
           renderBody: false,
           children: [
             SparkyBumperBallContactBehavior(),
@@ -38,7 +37,9 @@ class SparkyBumper extends BodyComponent with InitialPosition {
             ),
             ...?children,
           ],
-        );
+        ) {
+    zIndex = RenderPriority.sparkyBumper;
+  }
 
   /// {@macro sparky_bumper}
   SparkyBumper.a({

packages/pinball_components/lib/src/components/sparky_computer.dart

@@ -8,11 +8,11 @@ import 'package:pinball_flame/pinball_flame.dart';
 /// {@template sparky_computer}
 /// A computer owned by Sparky.
 /// {@endtemplate}
-class SparkyComputer extends Blueprint {
+class SparkyComputer extends Component {
   /// {@macro sparky_computer}
   SparkyComputer()
       : super(
-          components: [
+          children: [
             _ComputerBase(),
             _ComputerTopSpriteComponent(),
             _ComputerGlowSpriteComponent(),
@@ -20,13 +20,14 @@ class SparkyComputer extends Blueprint {
         );
 }
 
-class _ComputerBase extends BodyComponent with InitialPosition {
+class _ComputerBase extends BodyComponent with InitialPosition, Rendering {
   _ComputerBase()
       : super(
-          priority: RenderPriority.computerBase,
           renderBody: false,
           children: [_ComputerBaseSpriteComponent()],
-        );
+        ) {
+    zIndex = RenderPriority.computerBase;
+  }
 
   List<FixtureDef> _createFixtureDefs() {
     final leftEdge = EdgeShape()
@@ -83,13 +84,15 @@ class _ComputerBaseSpriteComponent extends SpriteComponent with HasGameRef {
   }
 }
 
-class _ComputerTopSpriteComponent extends SpriteComponent with HasGameRef {
+class _ComputerTopSpriteComponent extends SpriteComponent
+    with HasGameRef, Rendering {
   _ComputerTopSpriteComponent()
       : super(
           anchor: Anchor.center,
           position: Vector2(-12.52, -49.37),
-          priority: RenderPriority.computerTop,
+        ) {
-        );
+    zIndex = RenderPriority.computerTop;
+  }
 
   @override
   Future<void> onLoad() async {
@@ -105,13 +108,15 @@ class _ComputerTopSpriteComponent extends SpriteComponent with HasGameRef {
   }
 }
 
-class _ComputerGlowSpriteComponent extends SpriteComponent with HasGameRef {
+class _ComputerGlowSpriteComponent extends SpriteComponent
+    with HasGameRef, Rendering {
   _ComputerGlowSpriteComponent()
       : super(
           anchor: Anchor.center,
           position: Vector2(7.4, 10),
-          priority: RenderPriority.computerGlow,
+        ) {
-        );
+    zIndex = RenderPriority.computerGlow;
+  }
 
   @override
   Future<void> onLoad() async {

packages/pinball_flame/lib/src/rendering/pinball_canvas.dart

@@ -26,19 +26,9 @@ class PinballCanvas implements Canvas {
     _zBuffer
       ..sort((a, b) => a.zIndex.compareTo(b.zIndex))
       ..whereType<Component>().forEach(_render);
-    // ..expand(_flatten).forEach(_render);
     _zBuffer.clear();
   }
 
-  Iterable<PositionComponent> _flatten(Rendering rendering) {
-    final components = <PositionComponent>[];
-    if (rendering is PositionComponent) {
-      components.add(rendering as PositionComponent);
-    }
-    components.addAll(rendering.descendants().whereType<PositionComponent>());
-    return components;
-  }
-
   void _render(Component component) {
     // TODO(alestiago): Uses zones to detect when super.renderTree is called,
     // and call _render insted.