feat: Flipper joint adjustment (#159)

* feat(sandbox): removed FlipperTracingGame

* feat: adjusted flipper anchor

* refacto: adjusted anchoring points

* refactor: removed unused import

* refactor: renamed FlipperGame

lib/game/components/plunger.dart

@@ -129,8 +129,8 @@ class PlungerAnchor extends JointAnchor {
     required Plunger plunger,
   }) {
     initialPosition = Vector2(
-      plunger.body.position.x,
-      plunger.body.position.y - plunger.compressionDistance,
+      0,
+      -plunger.compressionDistance,
     );
   }
 
@@ -161,7 +161,7 @@ class PlungerAnchorPrismaticJointDef extends PrismaticJointDef {
     initialize(
       plunger.body,
       anchor.body,
-      anchor.body.position,
+      plunger.body.position + anchor.body.position,
       Vector2(18.6, BoardDimensions.bounds.height),
     );
     enableLimit = true;

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

@@ -23,7 +23,7 @@ class ChromeDino extends BodyComponent with InitialPosition {
   /// Anchors the [ChromeDino] to the [RevoluteJoint] that controls its arc
   /// motion.
   Future<_ChromeDinoJoint> _anchorToJoint() async {
-    final anchor = _ChromeDinoAnchor(chromeDino: this);
+    final anchor = _ChromeDinoAnchor();
     await add(anchor);
 
     final jointDef = _ChromeDinoAnchorRevoluteJointDef(
@@ -110,12 +110,10 @@ class ChromeDino extends BodyComponent with InitialPosition {
 /// {@endtemplate}
 class _ChromeDinoAnchor extends JointAnchor {
   /// {@macro flipper_anchor}
-  _ChromeDinoAnchor({
-    required ChromeDino chromeDino,
-  }) {
+  _ChromeDinoAnchor() {
     initialPosition = Vector2(
-      chromeDino.body.position.x + ChromeDino.size.x / 2,
-      chromeDino.body.position.y,
+      ChromeDino.size.x / 2,
+      0,
     );
   }
 }
@@ -132,7 +130,7 @@ class _ChromeDinoAnchorRevoluteJointDef extends RevoluteJointDef {
     initialize(
       chromeDino.body,
       anchor.body,
-      anchor.body.position,
+      chromeDino.body.position + anchor.body.position,
     );
     enableLimit = true;
     // TODO(alestiago): Apply design angle value.

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

@@ -159,8 +159,9 @@ class _FlipperAnchor extends JointAnchor {
     required Flipper flipper,
   }) {
     initialPosition = Vector2(
-      flipper.body.position.x + ((Flipper.size.x * flipper.side.direction) / 2),
-      flipper.body.position.y,
+      (Flipper.size.x * flipper.side.direction) / 2 -
+          (1.65 * flipper.side.direction),
+      0.15,
     );
   }
 }
@@ -178,7 +179,7 @@ class _FlipperAnchorRevoluteJointDef extends RevoluteJointDef {
     initialize(
       flipper.body,
       anchor.body,
-      anchor.body.position,
+      flipper.body.position + anchor.body.position,
     );
   }
 

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

@@ -12,7 +12,7 @@ import 'package:pinball_components/pinball_components.dart';
 /// initialize(
 ///   dynamicBody.body,
 ///   anchor.body,
-///   anchor.body.position,
+///   dynabmicBody.body + anchor.body.position,
 /// );
 /// ```
 /// {@endtemplate}

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

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flame/components.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:flutter/material.dart';
+import 'package:pinball_components/pinball_components.dart';
 
 extension BodyTrace on BodyComponent {
   void trace({Color color = const Color(0xFFFF0000)}) {
@@ -13,6 +14,12 @@ extension BodyTrace on BodyComponent {
       mounted.whenComplete(() {
         final sprite = children.whereType<SpriteComponent>().first;
         sprite.paint.color = sprite.paint.color.withOpacity(0.5);
+
+        descendants().whereType<JointAnchor>().forEach((anchor) {
+          final fixtureDef = FixtureDef(CircleShape()..radius = 0.5);
+          anchor.body.createFixture(fixtureDef);
+          anchor.renderBody = true;
+        });
       }),
     );
   }

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

@@ -2,13 +2,23 @@ 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 BasicFlipperGame extends BasicBallGame with KeyboardEvents {
-  BasicFlipperGame() : super(color: Colors.blue);
+class FlipperGame extends BasicBallGame with KeyboardEvents {
+  FlipperGame({
+    required this.trace,
+  }) : super(color: Colors.blue);
 
-  static const info = 'Shows how a Flipper works.';
+  static const info = '''
+    Shows how Flippers are rendered.
+
+    - Activate the "trace" parameter to overlay the body.
+    - Tap anywhere on the screen to spawn a ball into the game.
+    - Press left arrow key or "A" to move the left flipper.
+    - Press right arrow key or "D" to move the right flipper.
+  ''';
 
   static const _leftFlipperKeys = [
     LogicalKeyboardKey.arrowLeft,
@@ -20,6 +30,8 @@ class BasicFlipperGame extends BasicBallGame with KeyboardEvents {
     LogicalKeyboardKey.keyD,
   ];
 
+  final bool trace;
+
   late Flipper leftFlipper;
   late Flipper rightFlipper;
 
@@ -38,6 +50,11 @@ class BasicFlipperGame extends BasicBallGame with KeyboardEvents {
       leftFlipper,
       rightFlipper,
     ]);
+
+    if (trace) {
+      leftFlipper.trace();
+      rightFlipper.trace();
+    }
   }
 
   @override

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

@@ -1,26 +0,0 @@
-import 'dart:async';
-
-import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/flipper/basic_flipper_game.dart';
-
-class FlipperTracingGame extends BasicFlipperGame {
-  static const info = '''
-    Basic example of how the Flipper body overlays the sprite.
-''';
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-
-    leftFlipper.trace();
-    leftFlipper.body.joints.whereType<RevoluteJoint>().forEach(
-          (joint) => joint.setLimits(0, 0),
-        );
-
-    rightFlipper.trace();
-    rightFlipper.body.joints.whereType<RevoluteJoint>().forEach(
-          (joint) => joint.setLimits(0, 0),
-        );
-  }
-}

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

@@ -1,25 +1,17 @@
 import 'package:dashbook/dashbook.dart';
 import 'package:flame/game.dart';
 import 'package:sandbox/common/common.dart';
-import 'package:sandbox/stories/flipper/basic_flipper_game.dart';
-import 'package:sandbox/stories/flipper/flipper_tracing_game.dart';
+import 'package:sandbox/stories/flipper/flipper_game.dart';
 
 void addFlipperStories(Dashbook dashbook) {
-  dashbook.storiesOf('Flipper')
-    ..add(
+  dashbook.storiesOf('Flipper').add(
         'Basic',
         (context) => GameWidget(
-        game: BasicFlipperGame(),
+          game: FlipperGame(
+            trace: context.boolProperty('Trace', true),
           ),
-      codeLink: buildSourceLink('flipper/basic.dart'),
-      info: BasicFlipperGame.info,
-    )
-    ..add(
-      'Tracing',
-      (context) => GameWidget(
-        game: FlipperTracingGame(),
         ),
-      codeLink: buildSourceLink('flipper/tracing.dart'),
-      info: FlipperTracingGame.info,
+        codeLink: buildSourceLink('flipper/basic.dart'),
+        info: FlipperGame.info,
       );
 }