refactor(sandbox): reduced Stories boilerplate code (#227)

* refactor: implemented addGame method

* refactor: renamed extension to StoryAddGame

* refactor: renamed .info to .description

* refactor: used imagesFileNames to cache images

* feat: specified simple toPath method

* refactor: removed unused import

* refactor: usde correct title

* fix: moved camera to center

* refactor: removed redundant Traceable

* feat: modified trace algorithm

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

@@ -78,6 +78,7 @@ class _GoogleLetterSprite extends SpriteComponent with HasGameRef {
   Future<void> onLoad() async {
     await super.onLoad();
 
+    // TODO(alestiago): Used cached assets.
     final sprite = await gameRef.loadSprite(_path);
     this.sprite = sprite;
     // TODO(alestiago): Size correctly once the assets are provided.

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

@@ -136,6 +136,7 @@ class _KickerSpriteComponent extends SpriteComponent with HasGameRef {
   Future<void> onLoad() async {
     await super.onLoad();
 
+    // TODO(alestiago): Used cached asset.
     final sprite = await gameRef.loadSprite(
       (_side.isLeft)
           ? Assets.images.kicker.left.keyName

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

@@ -148,6 +148,7 @@ class _PlungerSpriteAnimationGroupComponent
   Future<void> onLoad() async {
     await super.onLoad();
 
+    // TODO(alestiago): Used cached images.
     final spriteSheet = await gameRef.images.load(
       Assets.images.plunger.plunger.keyName,
     );

packages/pinball_components/sandbox/lib/common/add_game.dart

@@ -0,0 +1,36 @@
+import 'package:dashbook/dashbook.dart';
+import 'package:flame/game.dart';
+import 'package:sandbox/common/common.dart';
+
+const _path =
+    'https://github.com/VGVentures/pinball/tree/main/packages/pinball_components/sandbox/lib/stories/';
+
+extension StoryAddGame on Story {
+  void addGame({
+    required String title,
+    required String description,
+    required Game Function(DashbookContext) gameBuilder,
+  }) {
+    final _chapter = Chapter(
+      title,
+      (DashbookContext context) {
+        final game = gameBuilder(context);
+        if (game is Traceable) {
+          game.trace = context.boolProperty('Trace', true);
+        }
+
+        return GameWidget(game: game);
+      },
+      this,
+      codeLink: '$_path${name.toPath()}/${title.toPath()}',
+      info: description,
+    );
+    chapters.add(_chapter);
+  }
+}
+
+extension on String {
+  String toPath() {
+    return replaceAll(' ', '_')..toLowerCase();
+  }
+}

packages/pinball_components/sandbox/lib/common/common.dart

@@ -1,3 +1,3 @@
+export 'add_game.dart';
 export 'games.dart';
-export 'methods.dart';
 export 'trace.dart';

packages/pinball_components/sandbox/lib/common/games.dart

@@ -5,16 +5,25 @@ import 'package:flame/input.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 
-abstract class BasicGame extends Forge2DGame {
+abstract class AssetsGame extends Forge2DGame {
-  BasicGame() {
+  AssetsGame({
+    List<String>? imagesFileNames,
+  }) : _imagesFileNames = imagesFileNames {
     images.prefix = '';
   }
-}
 
-abstract class BasicKeyboardGame extends BasicGame
+  final List<String>? _imagesFileNames;
-    with HasKeyboardHandlerComponents {}
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    if (_imagesFileNames != null) {
+      await images.loadAll(_imagesFileNames!);
+    }
+  }
+}
 
-abstract class LineGame extends BasicGame with PanDetector {
+abstract class LineGame extends AssetsGame with PanDetector {
   Vector2? _lineEnd;
 
   @override

packages/pinball_components/sandbox/lib/common/methods.dart

@@ -1,3 +0,0 @@
-String buildSourceLink(String path) {
-  return 'https://github.com/VGVentures/pinball/tree/main/packages/pinball_components/sandbox/lib/stories/$path';
-}

packages/pinball_components/sandbox/lib/common/trace.dart

@@ -35,7 +35,7 @@ mixin Traceable on Forge2DGame {
           .forEach((bodyComponent) => bodyComponent.trace());
 
       descendants()
-          .whereType<SpriteComponent>()
+          .whereType<HasPaint>()
           .forEach((sprite) => sprite.setOpacity(0.5));
     }
   }

packages/pinball_components/sandbox/lib/main.dart

@@ -16,9 +16,6 @@ void main() {
   addLayerStories(dashbook);
   addEffectsStories(dashbook);
   addFlipperStories(dashbook);
-  addSpaceshipStories(dashbook);
-  addSpaceshipRampStories(dashbook);
-  addSpaceshipRailStories(dashbook);
   addBaseboardStories(dashbook);
   addChromeDinoStories(dashbook);
   addDashNestBumperStories(dashbook);
@@ -27,7 +24,6 @@ void main() {
   addSlingshotStories(dashbook);
   addSparkyBumperStories(dashbook);
   addAlienZoneStories(dashbook);
-  addZoomStories(dashbook);
   addBoundariesStories(dashbook);
   addGoogleWordStories(dashbook);
   addLaunchRampStories(dashbook);

packages/pinball_components/sandbox/lib/stories/alien_zone/alien_bumper_a_game.dart

@@ -4,10 +4,17 @@ import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class AlienBumperAGame extends BasicBallGame {
+class AlienBumperAGame extends BallGame {
-  AlienBumperAGame() : super(color: const Color(0xFF0000FF));
+  AlienBumperAGame()
+      : super(
+          color: const Color(0xFF0000FF),
+          imagesFileNames: [
+            Assets.images.alienBumper.a.active.keyName,
+            Assets.images.alienBumper.a.inactive.keyName,
+          ],
+        );
 
-  static const info = '''
+  static const description = '''
     Shows how a AlienBumperA is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,16 +24,10 @@ class AlienBumperAGame extends BasicBallGame {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
+    camera.followVector2(Vector2.zero());
-      Assets.images.alienBumper.a.active.keyName,
+    await add(
-      Assets.images.alienBumper.a.inactive.keyName,
+      AlienBumper.a()..priority = 1,
-    ]);
+    );
-
-    final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final alienBumperA = AlienBumper.a()
-      ..initialPosition = Vector2(center.x - 20, center.y - 20)
-      ..priority = 1;
-    await add(alienBumperA);
 
     await traceAllBodies();
   }

packages/pinball_components/sandbox/lib/stories/alien_zone/alien_bumper_b_game.dart

@@ -4,10 +4,17 @@ import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class AlienBumperBGame extends BasicBallGame {
+class AlienBumperBGame extends BallGame {
-  AlienBumperBGame() : super(color: const Color(0xFF0000FF));
+  AlienBumperBGame()
+      : super(
+          color: const Color(0xFF0000FF),
+          imagesFileNames: [
+            Assets.images.alienBumper.b.active.keyName,
+            Assets.images.alienBumper.b.inactive.keyName,
+          ],
+        );
 
-  static const info = '''
+  static const description = '''
     Shows how a AlienBumperB is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,16 +24,10 @@ class AlienBumperBGame extends BasicBallGame {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
+    camera.followVector2(Vector2.zero());
-      Assets.images.alienBumper.b.active.keyName,
+    await add(
-      Assets.images.alienBumper.b.inactive.keyName,
+      AlienBumper.b()..priority = 1,
-    ]);
+    );
-
-    final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final alienBumperB = AlienBumper.b()
-      ..initialPosition = Vector2(center.x - 10, center.y + 10)
-      ..priority = 1;
-    await add(alienBumperB);
 
     await traceAllBodies();
   }

packages/pinball_components/sandbox/lib/stories/alien_zone/spaceship_game.dart

@@ -6,8 +6,8 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicSpaceshipGame extends BasicGame with TapDetector {
+class SpaceshipGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Shows how a Spaceship works.
       
     - Tap anywhere on the screen to spawn a Ball into the game.
@@ -18,10 +18,10 @@ class BasicSpaceshipGame extends BasicGame with TapDetector {
     await super.onLoad();
 
     camera.followVector2(Vector2.zero());
-
+    await addFromBlueprint(
-    unawaited(
+      Spaceship(position: Vector2.zero()),
-      addFromBlueprint(Spaceship(position: Vector2.zero())),
     );
+    await ready();
   }
 
   @override

packages/pinball_components/sandbox/lib/stories/alien_zone/spaceship_rail_game.dart

@@ -6,7 +6,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SpaceshipRailGame extends BasicBallGame {
+class SpaceshipRailGame extends BallGame {
   SpaceshipRailGame()
       : super(
           color: Colors.blue,
@@ -14,7 +14,7 @@ class SpaceshipRailGame extends BasicBallGame {
           ballLayer: Layer.spaceshipExitRail,
         );
 
-  static const info = '''
+  static const description = '''
     Shows how SpaceshipRail are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -26,10 +26,8 @@ class SpaceshipRailGame extends BasicBallGame {
     await super.onLoad();
 
     camera.followVector2(Vector2(-30, -10));
-
+    await addFromBlueprint(SpaceshipRail());
-    final spaceshipRail = SpaceshipRail();
+    await ready();
-    unawaited(addFromBlueprint(spaceshipRail));
-
     await traceAllBodies();
   }
 }

packages/pinball_components/sandbox/lib/stories/alien_zone/spaceship_ramp_game.dart

@@ -7,15 +7,27 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SpaceshipRampGame extends BasicBallGame with KeyboardEvents {
+class SpaceshipRampGame extends BallGame with KeyboardEvents {
   SpaceshipRampGame()
       : super(
           color: Colors.blue,
           ballPriority: RenderPriority.ballOnSpaceshipRamp,
           ballLayer: Layer.spaceshipEntranceRamp,
+          imagesFileNames: [
+            Assets.images.spaceship.ramp.railingBackground.keyName,
+            Assets.images.spaceship.ramp.main.keyName,
+            Assets.images.spaceship.ramp.boardOpening.keyName,
+            Assets.images.spaceship.ramp.railingForeground.keyName,
+            Assets.images.spaceship.ramp.arrow.inactive.keyName,
+            Assets.images.spaceship.ramp.arrow.active1.keyName,
+            Assets.images.spaceship.ramp.arrow.active2.keyName,
+            Assets.images.spaceship.ramp.arrow.active3.keyName,
+            Assets.images.spaceship.ramp.arrow.active4.keyName,
+            Assets.images.spaceship.ramp.arrow.active5.keyName,
+          ],
         );
 
-  static const info = '''
+  static const description = '''
     Shows how SpaceshipRamp is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -29,22 +41,10 @@ class SpaceshipRampGame extends BasicBallGame with KeyboardEvents {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.spaceship.ramp.railingBackground.keyName,
-      Assets.images.spaceship.ramp.main.keyName,
-      Assets.images.spaceship.ramp.boardOpening.keyName,
-      Assets.images.spaceship.ramp.railingForeground.keyName,
-      Assets.images.spaceship.ramp.arrow.inactive.keyName,
-      Assets.images.spaceship.ramp.arrow.active1.keyName,
-      Assets.images.spaceship.ramp.arrow.active2.keyName,
-      Assets.images.spaceship.ramp.arrow.active3.keyName,
-      Assets.images.spaceship.ramp.arrow.active4.keyName,
-      Assets.images.spaceship.ramp.arrow.active5.keyName,
-    ]);
-
-    _spaceshipRamp = SpaceshipRamp();
-    await addFromBlueprint(_spaceshipRamp);
     camera.followVector2(Vector2(-12, -50));
+    await addFromBlueprint(
+      _spaceshipRamp = SpaceshipRamp(),
+    );
     await traceAllBodies();
   }
 

packages/pinball_components/sandbox/lib/stories/alien_zone/stories.dart

@@ -1,25 +1,36 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/alien_zone/alien_bumper_a_game.dart';
 import 'package:sandbox/stories/alien_zone/alien_bumper_b_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_rail_game.dart';
+import 'package:sandbox/stories/alien_zone/spaceship_ramp_game.dart';
 
 void addAlienZoneStories(Dashbook dashbook) {
   dashbook.storiesOf('Alien Zone')
-    ..add(
+    ..addGame(
-      'Alien Bumper A',
+      title: 'Alien Bumper A',
-      (context) => GameWidget(
+      description: AlienBumperAGame.description,
-        game: AlienBumperAGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => AlienBumperAGame(),
-      ),
-      codeLink: buildSourceLink('alien_zone/alien_bumper_a.dart'),
-      info: AlienBumperAGame.info,
     )
-    ..add(
+    ..addGame(
-      'Alien Bumper B',
+      title: 'Alien Bumper B',
-      (context) => GameWidget(
+      description: AlienBumperBGame.description,
-        game: AlienBumperBGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => AlienBumperBGame(),
-      ),
+    )
-      codeLink: buildSourceLink('alien_zone/alien_bumper_b.dart'),
+    ..addGame(
-      info: AlienBumperAGame.info,
+      title: 'Spaceship',
+      description: SpaceshipGame.description,
+      gameBuilder: (_) => SpaceshipGame(),
+    )
+    ..addGame(
+      title: 'Spaceship Rail',
+      description: SpaceshipRailGame.description,
+      gameBuilder: (_) => SpaceshipRailGame(),
+    )
+    ..addGame(
+      title: 'Spaceship Ramp',
+      description: SpaceshipRampGame.description,
+      gameBuilder: (_) => SpaceshipRampGame(),
     );
 }

packages/pinball_components/sandbox/lib/stories/backboard/backboard_game_over_game.dart

@@ -1,21 +1,22 @@
-import 'package:flame/components.dart';
+import 'package:flame/input.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart' hide Assets;
 import 'package:pinball_theme/pinball_theme.dart';
 import 'package:sandbox/common/common.dart';
 
-class BackboardGameOverGame extends BasicKeyboardGame {
+class BackboardGameOverGame extends AssetsGame
-  BackboardGameOverGame(this.score, this.character);
+    with HasKeyboardHandlerComponents {
+  BackboardGameOverGame(this.score, this.character)
+      : super(
+          imagesFileNames: characterIconPaths.values.toList(),
+        );
 
-  static const info = '''
+  static const description = '''
-      Simple example showing the game over mode of the backboard.
+      Shows how the Backboard in game over mode is rendered.
 
       - Select a character to update the character icon.
   ''';
 
-  final int score;
-  final String character;
-
   static final characterIconPaths = <String, String>{
     'Dash': Assets.images.dash.leaderboardIcon.keyName,
     'Sparky': Assets.images.sparky.leaderboardIcon.keyName,
@@ -23,14 +24,16 @@ class BackboardGameOverGame extends BasicKeyboardGame {
     'Dino': Assets.images.dino.leaderboardIcon.keyName,
   };
 
+  final int score;
+
+  final String character;
+
   @override
   Future<void> onLoad() async {
     camera
       ..followVector2(Vector2.zero())
       ..zoom = 5;
 
-    await images.loadAll(characterIconPaths.values.toList());
-
     await add(
       Backboard.gameOver(
         position: Vector2(0, 20),

packages/pinball_components/sandbox/lib/stories/backboard/backboard_waiting_game.dart

@@ -2,9 +2,14 @@ import 'package:flame/components.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BackboardWaitingGame extends BasicGame {
+class BackboardWaitingGame extends AssetsGame {
-  static const info = '''
+  BackboardWaitingGame()
-      Simple example showing the waiting mode of the backboard.
+      : super(
+          imagesFileNames: [],
+        );
+
+  static const description = '''
+      Shows how the Backboard in waiting mode is rendered.
   ''';
 
   @override
@@ -13,7 +18,8 @@ class BackboardWaitingGame extends BasicGame {
       ..followVector2(Vector2.zero())
       ..zoom = 5;
 
-    final backboard = Backboard.waiting(position: Vector2(0, 20));
+    await add(
-    await add(backboard);
+      Backboard.waiting(position: Vector2(0, 20)),
+    );
   }
 }

packages/pinball_components/sandbox/lib/stories/backboard/stories.dart

@@ -1,23 +1,19 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/backboard/backboard_game_over_game.dart';
 import 'package:sandbox/stories/backboard/backboard_waiting_game.dart';
 
 void addBackboardStories(Dashbook dashbook) {
   dashbook.storiesOf('Backboard')
-    ..add(
+    ..addGame(
-      'Waiting mode',
+      title: 'Waiting',
-      (context) => GameWidget(
+      description: BackboardWaitingGame.description,
-        game: BackboardWaitingGame(),
+      gameBuilder: (_) => BackboardWaitingGame(),
-      ),
-      codeLink: buildSourceLink('backboard/waiting.dart'),
-      info: BackboardWaitingGame.info,
     )
-    ..add(
+    ..addGame(
-      'Game over',
+      title: 'Game over',
-      (context) => GameWidget(
+      description: BackboardGameOverGame.description,
-        game: BackboardGameOverGame(
+      gameBuilder: (context) => BackboardGameOverGame(
         context.numberProperty('Score', 9000000000).toInt(),
         context.listProperty(
           'Character',
@@ -25,8 +21,5 @@ void addBackboardStories(Dashbook dashbook) {
           BackboardGameOverGame.characterIconPaths.keys.toList(),
         ),
       ),
-      ),
-      codeLink: buildSourceLink('backboard/game_over.dart'),
-      info: BackboardGameOverGame.info,
     );
 }

packages/pinball_components/sandbox/lib/stories/ball/ball_booster_game.dart

@@ -4,7 +4,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
 class BallBoosterGame extends LineGame {
-  static const info = '''
+  static const description = '''
     Shows how a Ball with a boost works.
 
     - Drag to launch a boosted Ball.

packages/pinball_components/sandbox/lib/stories/ball/basic_ball_game.dart

@@ -3,14 +3,20 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicBallGame extends BasicGame with TapDetector, Traceable {
+class BallGame extends AssetsGame with TapDetector, Traceable {
-  BasicBallGame({
+  BallGame({
     this.color = Colors.blue,
     this.ballPriority = 0,
     this.ballLayer = Layer.all,
-  });
+    List<String>? imagesFileNames,
+  }) : super(
+          imagesFileNames: [
+            Assets.images.ball.ball.keyName,
+            if (imagesFileNames != null) ...imagesFileNames,
+          ],
+        );
 
-  static const info = '''
+  static const description = '''
     Shows how a Ball works.
       
     - Tap anywhere on the screen to spawn a ball into the game.

packages/pinball_components/sandbox/lib/stories/ball/stories.dart

@@ -1,5 +1,4 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/ball_booster_game.dart';
@@ -7,22 +6,16 @@ import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
 void addBallStories(Dashbook dashbook) {
   dashbook.storiesOf('Ball')
-    ..add(
+    ..addGame(
-      'Basic',
+      title: 'Colored',
-      (context) => GameWidget(
+      description: BallGame.description,
-        game: BasicBallGame(
+      gameBuilder: (context) => BallGame(
         color: context.colorProperty('color', Colors.blue),
-        )..trace = context.boolProperty('Trace', true),
       ),
-      codeLink: buildSourceLink('ball/basic.dart'),
-      info: BasicBallGame.info,
     )
-    ..add(
+    ..addGame(
-      'Booster',
+      title: 'Booster',
-      (context) => GameWidget(
+      description: BallBoosterGame.description,
-        game: BallBoosterGame(),
+      gameBuilder: (context) => BallBoosterGame(),
-      ),
-      codeLink: buildSourceLink('ball/ball_booster.dart'),
-      info: BallBoosterGame.info,
     );
 }

packages/pinball_components/sandbox/lib/stories/baseboard/baseboard_game.dart

@@ -1,10 +1,17 @@
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BaseboardGame extends BasicBallGame with Traceable {
+class BaseboardGame extends BallGame {
-  static const info = '''
+  BaseboardGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.baseboard.left.keyName,
+            Assets.images.baseboard.right.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how the Baseboards are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -15,22 +22,14 @@ class BaseboardGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.baseboard.left.keyName,
-      Assets.images.baseboard.right.keyName,
-    ]);
-
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-    final leftBaseboard = Baseboard(side: BoardSide.left)
+    await addAll([
+      Baseboard(side: BoardSide.left)
         ..initialPosition = center - Vector2(25, 0)
-      ..priority = 1;
+        ..priority = 1,
-    final rightBaseboard = Baseboard(side: BoardSide.right)
+      Baseboard(side: BoardSide.right)
         ..initialPosition = center + Vector2(25, 0)
-      ..priority = 1;
+        ..priority = 1,
-
-    await addAll([
-      leftBaseboard,
-      rightBaseboard,
     ]);
 
     await traceAllBodies();

packages/pinball_components/sandbox/lib/stories/baseboard/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/baseboard/baseboard_game.dart';
 
 void addBaseboardStories(Dashbook dashbook) {
-  dashbook.storiesOf('Baseboard').add(
+  dashbook.storiesOf('Baseboard').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: BaseboardGame.description,
-          game: BaseboardGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => BaseboardGame(),
-        ),
-        codeLink: buildSourceLink('baseboard_game/basic.dart'),
-        info: BaseboardGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/boundaries/boundaries_game.dart

@@ -1,11 +1,19 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BoundariesGame extends BasicBallGame with Traceable {
+class BoundariesGame extends BallGame {
-  static const info = '''
+  BoundariesGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.boundary.outer.keyName,
+            Assets.images.boundary.outerBottom.keyName,
+            Assets.images.boundary.bottom.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Boundaries are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,19 +24,11 @@ class BoundariesGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.boundary.outer.keyName,
-      Assets.images.boundary.outerBottom.keyName,
-      Assets.images.boundary.bottom.keyName,
-    ]);
-
-    await addFromBlueprint(Boundaries());
-    await ready();
-
     camera
       ..followVector2(Vector2.zero())
       ..zoom = 6;
-
+    await addFromBlueprint(Boundaries());
+    await ready();
     await traceAllBodies();
   }
 }

packages/pinball_components/sandbox/lib/stories/boundaries/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/boundaries/boundaries_game.dart';
 
 void addBoundariesStories(Dashbook dashbook) {
-  dashbook.storiesOf('Boundaries').add(
+  dashbook.storiesOf('Boundaries').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: BoundariesGame.description,
-          game: BoundariesGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => BoundariesGame(),
-        ),
-        codeLink: buildSourceLink('boundaries_game/basic.dart'),
-        info: BoundariesGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/chrome_dino/chrome_dino_game.dart

@@ -2,7 +2,7 @@ import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
 
 class ChromeDinoGame extends Forge2DGame {
-  static const info = 'Shows how a ChromeDino is rendered.';
+  static const description = 'Shows how a ChromeDino is rendered.';
 
   @override
   Future<void> onLoad() async {

packages/pinball_components/sandbox/lib/stories/chrome_dino/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/chrome_dino/chrome_dino_game.dart';
 
 void addChromeDinoStories(Dashbook dashbook) {
-  dashbook.storiesOf('Chrome Dino').add(
+  dashbook.storiesOf('Chrome Dino').addGame(
-        'Basic',
+        title: 'Trace',
-        (context) => GameWidget(
+        description: ChromeDinoGame.description,
-          game: ChromeDinoGame(),
+        gameBuilder: (_) => ChromeDinoGame(),
-        ),
-        codeLink: buildSourceLink('chrome_dino/basic.dart'),
-        info: ChromeDinoGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/effects/camera_zoom_game.dart

@@ -3,8 +3,8 @@ import 'package:flame/input.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class BasicCameraZoomGame extends BasicGame with TapDetector {
+class CameraZoomGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Shows how CameraZoom can be used.
       
     - Tap to zoom in/out.

packages/pinball_components/sandbox/lib/stories/effects/fire_effect_game.dart

@@ -3,7 +3,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
 class FireEffectGame extends LineGame {
-  static const info = '''
+  static const description = '''
   Shows how the FireEffect renders.
 
   - Drag a line to define the trail direction.

packages/pinball_components/sandbox/lib/stories/effects/stories.dart

@@ -1,13 +1,18 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/effects/camera_zoom_game.dart';
 import 'package:sandbox/stories/effects/fire_effect_game.dart';
 
 void addEffectsStories(Dashbook dashbook) {
-  dashbook.storiesOf('Effects').add(
+  dashbook.storiesOf('Effects')
-        'Fire Effect',
+    ..addGame(
-        (context) => GameWidget(game: FireEffectGame()),
+      title: 'Fire',
-        codeLink: buildSourceLink('effects/fire_effect.dart'),
+      description: FireEffectGame.description,
-        info: FireEffectGame.info,
+      gameBuilder: (_) => FireEffectGame(),
+    )
+    ..addGame(
+      title: 'CameraZoom',
+      description: CameraZoomGame.description,
+      gameBuilder: (_) => CameraZoomGame(),
     );
 }

packages/pinball_components/sandbox/lib/stories/flipper/flipper_game.dart

@@ -2,12 +2,19 @@ import 'package:flame/input.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class FlipperGame extends BasicBallGame with KeyboardEvents, Traceable {
+class FlipperGame extends BallGame with KeyboardEvents {
-  static const info = '''
+  FlipperGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.flipper.left.keyName,
+            Assets.images.flipper.right.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Flippers are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -33,21 +40,12 @@ class FlipperGame extends BasicBallGame with KeyboardEvents, Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.flipper.left.keyName,
-      Assets.images.flipper.right.keyName,
-    ]);
-
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
+    await addAll([
       leftFlipper = Flipper(side: BoardSide.left)
-      ..initialPosition = center - Vector2(Flipper.size.x, 0);
+        ..initialPosition = center - Vector2(Flipper.size.x, 0),
       rightFlipper = Flipper(side: BoardSide.right)
-      ..initialPosition = center + Vector2(Flipper.size.x, 0);
+        ..initialPosition = center + Vector2(Flipper.size.x, 0),
-
-    await addAll([
-      leftFlipper,
-      rightFlipper,
     ]);
 
     await traceAllBodies();

packages/pinball_components/sandbox/lib/stories/flipper/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/flipper/flipper_game.dart';
 
 void addFlipperStories(Dashbook dashbook) {
-  dashbook.storiesOf('Flipper').add(
+  dashbook.storiesOf('Flipper').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: FlipperGame.description,
-          game: FlipperGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => FlipperGame(),
-        ),
-        codeLink: buildSourceLink('flipper/basic.dart'),
-        info: FlipperGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/flutter_forest/big_dash_nest_bumper_game.dart

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BigDashNestBumperGame extends BasicBallGame with Traceable {
+class BigDashNestBumperGame extends BallGame {
-  static const info = '''
+  BigDashNestBumperGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.main.active.keyName,
+            Assets.images.dash.bumper.main.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a BigDashNestBumper is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,13 +23,10 @@ class BigDashNestBumperGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.main.active.keyName,
-      Assets.images.dash.bumper.main.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
-    await add(DashNestBumper.main()..priority = 1);
+    await add(
+      DashNestBumper.main()..priority = 1,
+    );
     await traceAllBodies();
   }
 }

packages/pinball_components/sandbox/lib/stories/flutter_forest/signpost_game.dart

@@ -2,11 +2,20 @@ import 'dart:async';
 
 import 'package:flame/input.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SignpostGame extends BasicBallGame with Traceable, TapDetector {
+class SignpostGame extends BallGame {
-  static const info = '''
+  SignpostGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.signpost.inactive.keyName,
+            Assets.images.signpost.active1.keyName,
+            Assets.images.signpost.active2.keyName,
+            Assets.images.signpost.active3.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a Signpost is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -17,13 +26,6 @@ class SignpostGame extends BasicBallGame with Traceable, TapDetector {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.signpost.inactive.keyName,
-      Assets.images.signpost.active1.keyName,
-      Assets.images.signpost.active2.keyName,
-      Assets.images.signpost.active3.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(Signpost());
     await traceAllBodies();

packages/pinball_components/sandbox/lib/stories/flutter_forest/small_dash_nest_bumper_a_game.dart

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SmallDashNestBumperAGame extends BasicBallGame with Traceable {
+class SmallDashNestBumperAGame extends BallGame {
-  static const info = '''
+  SmallDashNestBumperAGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.a.active.keyName,
+            Assets.images.dash.bumper.a.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a SmallDashNestBumper ("a") is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,11 +23,6 @@ class SmallDashNestBumperAGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.a.active.keyName,
-      Assets.images.dash.bumper.a.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(DashNestBumper.a()..priority = 1);
     await traceAllBodies();

packages/pinball_components/sandbox/lib/stories/flutter_forest/small_dash_nest_bumper_b_game.dart

@@ -2,11 +2,18 @@ import 'dart:async';
 
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SmallDashNestBumperBGame extends BasicBallGame with Traceable {
+class SmallDashNestBumperBGame extends BallGame {
-  static const info = '''
+  SmallDashNestBumperBGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.dash.bumper.b.active.keyName,
+            Assets.images.dash.bumper.b.inactive.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how a SmallDashNestBumper ("b") is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,11 +23,6 @@ class SmallDashNestBumperBGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.dash.bumper.b.active.keyName,
-      Assets.images.dash.bumper.b.inactive.keyName,
-    ]);
-
     camera.followVector2(Vector2.zero());
     await add(DashNestBumper.b()..priority = 1);
     await traceAllBodies();

packages/pinball_components/sandbox/lib/stories/flutter_forest/stories.dart

@@ -1,5 +1,4 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/flutter_forest/big_dash_nest_bumper_game.dart';
 import 'package:sandbox/stories/flutter_forest/signpost_game.dart';
@@ -8,39 +7,24 @@ import 'package:sandbox/stories/flutter_forest/small_dash_nest_bumper_b_game.dar
 
 void addDashNestBumperStories(Dashbook dashbook) {
   dashbook.storiesOf('Flutter Forest')
-    ..add(
+    ..addGame(
-      'Signpost',
+      title: 'Signpost',
-      (context) => GameWidget(
+      description: SignpostGame.description,
-        game: SignpostGame()..trace = context.boolProperty('Trace', true),
+      gameBuilder: (_) => SignpostGame(),
-      ),
-      codeLink: buildSourceLink('flutter_forest/signpost.dart'),
-      info: SignpostGame.info,
     )
-    ..add(
+    ..addGame(
-      'Big Dash Nest Bumper',
+      title: 'Big Dash Nest Bumper',
-      (context) => GameWidget(
+      description: BigDashNestBumperGame.description,
-        game: BigDashNestBumperGame()
+      gameBuilder: (_) => BigDashNestBumperGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/big_dash_nest_bumper.dart'),
-      info: BigDashNestBumperGame.info,
     )
-    ..add(
+    ..addGame(
-      'Small Dash Nest Bumper A',
+      title: 'Small Dash Nest Bumper A',
-      (context) => GameWidget(
+      description: SmallDashNestBumperAGame.description,
-        game: SmallDashNestBumperAGame()
+      gameBuilder: (_) => SmallDashNestBumperAGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/small_dash_nest_bumper_a.dart'),
-      info: SmallDashNestBumperAGame.info,
     )
-    ..add(
+    ..addGame(
-      'Small Dash Nest Bumper B',
+      title: 'Small Dash Nest Bumper B',
-      (context) => GameWidget(
+      description: SmallDashNestBumperBGame.description,
-        game: SmallDashNestBumperBGame()
+      gameBuilder: (_) => SmallDashNestBumperBGame(),
-          ..trace = context.boolProperty('Trace', true),
-      ),
-      codeLink: buildSourceLink('flutter_forest/small_dash_nest_bumper_b.dart'),
-      info: SmallDashNestBumperBGame.info,
     );
 }

packages/pinball_components/sandbox/lib/stories/google_word/google_letter_game.dart

@@ -5,10 +5,10 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class GoogleLetterGame extends BasicBallGame {
+class GoogleLetterGame extends BallGame {
   GoogleLetterGame() : super(color: const Color(0xFF009900));
 
-  static const info = '''
+  static const description = '''
     Shows how a GoogleLetter is rendered.
       
     - Tap anywhere on the screen to spawn a ball into the game.

packages/pinball_components/sandbox/lib/stories/google_word/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/google_word/google_letter_game.dart';
 
 void addGoogleWordStories(Dashbook dashbook) {
-  dashbook.storiesOf('Google Word').add(
+  dashbook.storiesOf('Google Word').addGame(
-        'Letter',
+        title: 'Letter 0',
-        (context) => GameWidget(
+        description: GoogleLetterGame.description,
-          game: GoogleLetterGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => GoogleLetterGame(),
-        ),
-        codeLink: buildSourceLink('google_word/letter.dart'),
-        info: GoogleLetterGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/kicker/kicker_game.dart

@@ -1,10 +1,9 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class KickerGame extends BasicBallGame with Traceable {
+class KickerGame extends BallGame {
-  static const info = '''
+  static const description = '''
     Shows how Kickers are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,14 +15,14 @@ class KickerGame extends BasicBallGame with Traceable {
     await super.onLoad();
 
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
+    await addAll(
-    final leftKicker = Kicker(side: BoardSide.left)
+      [
-      ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y);
+        Kicker(side: BoardSide.left)
-    await add(leftKicker);
+          ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y),
-
+        Kicker(side: BoardSide.right)
-    final rightKicker = Kicker(side: BoardSide.right)
+          ..initialPosition = Vector2(center.x + (Kicker.size.x * 2), center.y),
-      ..initialPosition = Vector2(center.x + (Kicker.size.x * 2), center.y);
+      ],
-    await add(rightKicker);
+    );
 
     await traceAllBodies();
   }

packages/pinball_components/sandbox/lib/stories/kicker/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/kicker/kicker_game.dart';
 
 void addKickerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Kickers').add(
+  dashbook.storiesOf('Kickers').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: KickerGame.description,
-          game: KickerGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => KickerGame(),
-        ),
-        codeLink: buildSourceLink('kicker_game/basic.dart'),
-        info: KickerGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/launch_ramp/launch_ramp_game.dart

@@ -6,7 +6,7 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class LaunchRampGame extends BasicBallGame {
+class LaunchRampGame extends BallGame {
   LaunchRampGame()
       : super(
           color: Colors.blue,
@@ -14,7 +14,7 @@ class LaunchRampGame extends BasicBallGame {
           ballLayer: Layer.launcher,
         );
 
-  static const info = '''
+  static const description = '''
     Shows how LaunchRamp are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -28,10 +28,8 @@ class LaunchRampGame extends BasicBallGame {
     camera
       ..followVector2(Vector2(0, 0))
       ..zoom = 7.5;
-
+    await addFromBlueprint(LaunchRamp());
-    final launchRamp = LaunchRamp();
+    await ready();
-    unawaited(addFromBlueprint(launchRamp));
-
     await traceAllBodies();
   }
 }

packages/pinball_components/sandbox/lib/stories/launch_ramp/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/launch_ramp/launch_ramp_game.dart';
 
 void addLaunchRampStories(Dashbook dashbook) {
-  dashbook.storiesOf('LaunchRamp').add(
+  dashbook.storiesOf('LaunchRamp').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: LaunchRampGame.description,
-          game: LaunchRampGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => LaunchRampGame(),
-        ),
-        codeLink: buildSourceLink('launch_ramp/basic.dart'),
-        info: LaunchRampGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/layer/layer_game.dart

@@ -2,36 +2,35 @@ import 'package:flame/input.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
+import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class BasicLayerGame extends BasicGame with TapDetector {
+class LayerGame extends BallGame with TapDetector {
-  BasicLayerGame({required this.color});
+  static const description = '''
-
-  static const info = '''
     Shows how Layers work when a Ball hits other components.
       
     - Tap anywhere on the screen to spawn a Ball into the game.
 ''';
 
-  final Color color;
-
   @override
   Future<void> onLoad() async {
-    await add(BigSquare()..initialPosition = Vector2(30, -40));
+    await addAll(
-    await add(SmallSquare()..initialPosition = Vector2(50, -40));
+      [
-    await add(UnlayeredSquare()..initialPosition = Vector2(60, -40));
+        _BigSquare()..initialPosition = Vector2(30, -40),
-  }
+        _SmallSquare()..initialPosition = Vector2(50, -40),
-
+        _UnlayeredSquare()..initialPosition = Vector2(60, -40),
-  @override
+      ],
-  void onTapUp(TapUpInfo info) {
-    add(
-      Ball(baseColor: color)..initialPosition = info.eventPosition.game,
     );
   }
 }
 
-class BigSquare extends BodyComponent with InitialPosition, Layered {
+class _BigSquare extends BodyComponent with InitialPosition, Layered {
-  BigSquare() {
+  _BigSquare()
+      : super(
+          children: [
+            _UnlayeredSquare()..initialPosition = Vector2.all(4),
+            _SmallSquare()..initialPosition = Vector2.all(-4),
+          ],
+        ) {
     paint = Paint()
       ..color = const Color.fromARGB(255, 8, 218, 241)
       ..style = PaintingStyle.stroke;
@@ -42,27 +41,13 @@ class BigSquare extends BodyComponent with InitialPosition, Layered {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(16, 16);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-
-    await addAll(
-      [
-        UnlayeredSquare()..initialPosition = Vector2.all(4),
-        SmallSquare()..initialPosition = Vector2.all(-4),
-      ],
-    );
-  }
 }
 
-class SmallSquare extends BodyComponent with InitialPosition, Layered {
+class _SmallSquare extends BodyComponent with InitialPosition, Layered {
-  SmallSquare() {
+  _SmallSquare() {
     paint = Paint()
       ..color = const Color.fromARGB(255, 27, 241, 8)
       ..style = PaintingStyle.stroke;
@@ -73,15 +58,13 @@ class SmallSquare extends BodyComponent with InitialPosition, Layered {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(2, 2);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
 }
 
-class UnlayeredSquare extends BodyComponent with InitialPosition {
+class _UnlayeredSquare extends BodyComponent with InitialPosition {
-  UnlayeredSquare() {
+  _UnlayeredSquare() {
     paint = Paint()
       ..color = const Color.fromARGB(255, 241, 8, 8)
       ..style = PaintingStyle.stroke;
@@ -91,9 +74,7 @@ class UnlayeredSquare extends BodyComponent with InitialPosition {
   Body createBody() {
     final shape = PolygonShape()..setAsBoxXY(3, 3);
     final fixtureDef = FixtureDef(shape);
-
     final bodyDef = BodyDef()..position = initialPosition;
-
     return world.createBody(bodyDef)..createFixture(fixtureDef);
   }
 }

packages/pinball_components/sandbox/lib/stories/layer/stories.dart

@@ -1,18 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:flutter/material.dart';
 import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/layer/basic_layer_game.dart';
+import 'package:sandbox/stories/layer/layer_game.dart';
 
 void addLayerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Layer').add(
+  dashbook.storiesOf('Layer').addGame(
-        'Layer',
+        title: 'Example',
-        (context) => GameWidget(
+        description: LayerGame.description,
-          game: BasicLayerGame(
+        gameBuilder: (_) => LayerGame(),
-            color: context.colorProperty('color', Colors.blue),
-          ),
-        ),
-        codeLink: buildSourceLink('layer/basic.dart'),
-        info: BasicLayerGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/plunger/plunger_game.dart

@@ -5,10 +5,10 @@ import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class PlungerGame extends BasicBallGame with KeyboardEvents, Traceable {
+class PlungerGame extends BallGame with KeyboardEvents, Traceable {
   PlungerGame() : super(color: const Color(0xFFFF0000));
 
-  static const info = '''
+  static const description = '''
     Shows how Plunger is rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -27,11 +27,10 @@ class PlungerGame extends BasicBallGame with KeyboardEvents, Traceable {
     await super.onLoad();
 
     final center = screenToWorld(camera.viewport.canvasSize! / 2);
-
+    await add(
       plunger = Plunger(compressionDistance: 29)
-      ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y);
+        ..initialPosition = Vector2(center.x - (Kicker.size.x * 2), center.y),
-    await add(plunger);
+    );
-
     await traceAllBodies();
   }
 

packages/pinball_components/sandbox/lib/stories/plunger/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/plunger/plunger_game.dart';
 
 void addPlungerStories(Dashbook dashbook) {
-  dashbook.storiesOf('Plunger').add(
+  dashbook.storiesOf('Plunger').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: PlungerGame.description,
-          game: PlungerGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => PlungerGame(),
-        ),
-        codeLink: buildSourceLink('plunger_game/basic.dart'),
-        info: PlungerGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/score_text/score_text_game.dart

@@ -5,8 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:sandbox/common/common.dart';
 
-class ScoreTextBasicGame extends BasicGame with TapDetector {
+class ScoreTextGame extends AssetsGame with TapDetector {
-  static const info = '''
+  static const description = '''
     Simple game to show how score text works,
 
     - Tap anywhere on the screen to spawn an text on the given location.

packages/pinball_components/sandbox/lib/stories/score_text/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/score_text/basic.dart';
+import 'package:sandbox/stories/score_text/score_text_game.dart';
 
 void addScoreTextStories(Dashbook dashbook) {
-  dashbook.storiesOf('ScoreText').add(
+  dashbook.storiesOf('ScoreText').addGame(
-        'Basic',
+        title: 'Basic',
-        (context) => GameWidget(
+        description: ScoreTextGame.description,
-          game: ScoreTextBasicGame(),
+        gameBuilder: (_) => ScoreTextGame(),
-        ),
-        codeLink: buildSourceLink('score_text/basic.dart'),
-        info: ScoreTextBasicGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/slingshot/slingshot_game.dart

@@ -1,11 +1,18 @@
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_flame/pinball_flame.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SlingshotGame extends BasicBallGame with Traceable {
+class SlingshotGame extends BallGame {
-  static const info = '''
+  SlingshotGame()
+      : super(
+          imagesFileNames: [
+            Assets.images.slingshot.upper.keyName,
+            Assets.images.slingshot.lower.keyName,
+          ],
+        );
+
+  static const description = '''
     Shows how Slingshots are rendered.
 
     - Activate the "trace" parameter to overlay the body.
@@ -16,13 +23,9 @@ class SlingshotGame extends BasicBallGame with Traceable {
   Future<void> onLoad() async {
     await super.onLoad();
 
-    await images.loadAll([
-      Assets.images.slingshot.upper.keyName,
-      Assets.images.slingshot.lower.keyName,
-    ]);
-
-    await addFromBlueprint(Slingshots());
     camera.followVector2(Vector2.zero());
+    await addFromBlueprint(Slingshots());
+    await ready();
     await traceAllBodies();
   }
 }

packages/pinball_components/sandbox/lib/stories/slingshot/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/slingshot/slingshot_game.dart';
 
 void addSlingshotStories(Dashbook dashbook) {
-  dashbook.storiesOf('Slingshots').add(
+  dashbook.storiesOf('Slingshots').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: SlingshotGame.description,
-          game: SlingshotGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => SlingshotGame(),
-        ),
-        codeLink: buildSourceLink('slingshot_game/basic.dart'),
-        info: SlingshotGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/spaceship/stories.dart

@@ -1,15 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship/basic_spaceship_game.dart';
-
-void addSpaceshipStories(Dashbook dashbook) {
-  dashbook.storiesOf('Spaceship').add(
-        'Basic',
-        (context) => GameWidget(
-          game: BasicSpaceshipGame(),
-        ),
-        codeLink: buildSourceLink('spaceship/basic.dart'),
-        info: BasicSpaceshipGame.info,
-      );
-}

packages/pinball_components/sandbox/lib/stories/spaceship_rail/stories.dart

@@ -1,16 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship_rail/spaceship_rail_game.dart';
-
-void addSpaceshipRailStories(Dashbook dashbook) {
-  dashbook.storiesOf('SpaceshipRail').add(
-        'Basic',
-        (context) => GameWidget(
-          game: SpaceshipRailGame()
-            ..trace = context.boolProperty('Trace', true),
-        ),
-        codeLink: buildSourceLink('spaceship_rail/basic.dart'),
-        info: SpaceshipRailGame.info,
-      );
-}

packages/pinball_components/sandbox/lib/stories/spaceship_ramp/stories.dart

@@ -1,16 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/spaceship_ramp/spaceship_ramp_game.dart';
-
-void addSpaceshipRampStories(Dashbook dashbook) {
-  dashbook.storiesOf('SpaceshipRamp').add(
-        'Basic',
-        (context) => GameWidget(
-          game: SpaceshipRampGame()
-            ..trace = context.boolProperty('Trace', true),
-        ),
-        codeLink: buildSourceLink('spaceship_ramp/basic.dart'),
-        info: SpaceshipRampGame.info,
-      );
-}

packages/pinball_components/sandbox/lib/stories/sparky_bumper/sparky_bumper_game.dart

@@ -2,11 +2,10 @@ import 'dart:async';
 
 import 'package:flame/extensions.dart';
 import 'package:pinball_components/pinball_components.dart';
-import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/ball/basic_ball_game.dart';
 
-class SparkyBumperGame extends BasicBallGame with Traceable {
+class SparkyBumperGame extends BallGame {
-  static const info = '''
+  static const description = '''
     Shows how a SparkyBumper is rendered.
 
     - Activate the "trace" parameter to overlay the body.

packages/pinball_components/sandbox/lib/stories/sparky_bumper/stories.dart

@@ -1,15 +1,11 @@
 import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
 import 'package:sandbox/stories/sparky_bumper/sparky_bumper_game.dart';
 
 void addSparkyBumperStories(Dashbook dashbook) {
-  dashbook.storiesOf('Sparky Bumpers').add(
+  dashbook.storiesOf('Sparky Bumpers').addGame(
-        'Basic',
+        title: 'Traced',
-        (context) => GameWidget(
+        description: SparkyBumperGame.description,
-          game: SparkyBumperGame()..trace = context.boolProperty('Trace', true),
+        gameBuilder: (_) => SparkyBumperGame(),
-        ),
-        codeLink: buildSourceLink('sparky_bumper/basic.dart'),
-        info: SparkyBumperGame.info,
       );
 }

packages/pinball_components/sandbox/lib/stories/stories.dart

@@ -13,8 +13,4 @@ export 'layer/stories.dart';
 export 'plunger/stories.dart';
 export 'score_text/stories.dart';
 export 'slingshot/stories.dart';
-export 'spaceship/stories.dart';
-export 'spaceship_rail/stories.dart';
-export 'spaceship_ramp/stories.dart';
 export 'sparky_bumper/stories.dart';
-export 'zoom/stories.dart';

packages/pinball_components/sandbox/lib/stories/zoom/stories.dart

@@ -1,15 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/game.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/zoom/basic_zoom_game.dart';
-
-void addZoomStories(Dashbook dashbook) {
-  dashbook.storiesOf('CameraZoom').add(
-        'Basic',
-        (context) => GameWidget(
-          game: BasicCameraZoomGame(),
-        ),
-        codeLink: buildSourceLink('zoom/basic_zoom_game.dart'),
-        info: BasicCameraZoomGame.info,
-      );
-}