diff --git a/examples/lib/stories/collision_detection/multiple_shapes_example.dart b/examples/lib/stories/collision_detection/multiple_shapes_example.dart
index 961b63983..c60a30acb 100644
--- a/examples/lib/stories/collision_detection/multiple_shapes_example.dart
+++ b/examples/lib/stories/collision_detection/multiple_shapes_example.dart
@@ -42,9 +42,8 @@ class MultipleShapesExample extends FlameGame
     var totalAdded = 1;
     while (totalAdded < 100) {
       lastToAdd = nextRandomCollidable(lastToAdd, screenHitbox);
-      final lastBottomRight =
-          lastToAdd.toAbsoluteRect().bottomRight.toVector2();
-      if (lastBottomRight.x < size.x && lastBottomRight.y < size.y) {
+      final lastBottomRight = lastToAdd.toAbsoluteRect().bottomRight;
+      if (lastBottomRight.dx < size.x && lastBottomRight.dy < size.y) {
         add(lastToAdd);
         totalAdded++;
       } else {
@@ -143,7 +142,7 @@ abstract class MyCollidable extends PositionComponent
   @override
   void render(Canvas canvas) {
     if (isDragged) {
-      final localCenter = (scaledSize / 2).toOffset();
+      final localCenter = scaledSize.toOffset() / 2;
       canvas.drawCircle(localCenter, 5, _dragIndicatorPaint);
     }
   }
diff --git a/packages/flame/lib/src/collisions/hitboxes/shape_hitbox.dart b/packages/flame/lib/src/collisions/hitboxes/shape_hitbox.dart
index 36dec3107..09ba81dc2 100644
--- a/packages/flame/lib/src/collisions/hitboxes/shape_hitbox.dart
+++ b/packages/flame/lib/src/collisions/hitboxes/shape_hitbox.dart
@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:meta/meta.dart';
 
 import '../../../collisions.dart';
@@ -14,9 +12,6 @@ mixin ShapeHitbox on ShapeComponent implements Hitbox<ShapeHitbox> {
   @override
   CollisionType collisionType = CollisionType.active;
 
-  @override
-  Paint get paint => debugPaint;
-
   /// Whether the hitbox is allowed to collide with another hitbox that is
   /// added to the same parent.
   bool allowSiblingCollision = false;
@@ -48,10 +43,7 @@ mixin ShapeHitbox on ShapeComponent implements Hitbox<ShapeHitbox> {
   final Matrix3 _rotationMatrix = Matrix3.zero();
 
   @override
-  bool get renderShape => _renderShape || debugMode;
-  @override
-  set renderShape(bool shouldRender) => _renderShape = shouldRender;
-  bool _renderShape = false;
+  bool renderShape = false;
 
   @protected
   late PositionComponent hitboxParent;
diff --git a/packages/flame/lib/src/components/component.dart b/packages/flame/lib/src/components/component.dart
index 1bde7539e..b6d8e860c 100644
--- a/packages/flame/lib/src/components/component.dart
+++ b/packages/flame/lib/src/components/component.dart
@@ -390,7 +390,6 @@ class Component {
           _state == LifecycleState.removed,
     );
     _parent = parent;
-    debugMode |= parent.debugMode;
     parent.lifecycle._children.add(this);
 
     if (!isLoaded) {
@@ -455,6 +454,7 @@ class Component {
     }
     _mountCompleter?.complete();
     _mountCompleter = null;
+    debugMode |= _parent!.debugMode;
     onMount();
     _state = LifecycleState.mounted;
     if (!existingChild) {
diff --git a/packages/flame/lib/src/geometry/circle_component.dart b/packages/flame/lib/src/geometry/circle_component.dart
index ef1f54a39..da565e558 100644
--- a/packages/flame/lib/src/geometry/circle_component.dart
+++ b/packages/flame/lib/src/geometry/circle_component.dart
@@ -57,8 +57,6 @@ class CircleComponent extends ShapeComponent {
     return min(_scaledSize.x, _scaledSize.y) / 2;
   }
 
-  /// This render method doesn't rotate the canvas according to angle since a
-  /// circle will look the same rotated as not rotated.
   @override
   void render(Canvas canvas) {
     if (renderShape) {
@@ -66,6 +64,12 @@ class CircleComponent extends ShapeComponent {
     }
   }
 
+  @override
+  void renderDebugMode(Canvas canvas) {
+    super.renderDebugMode(canvas);
+    canvas.drawCircle((size / 2).toOffset(), radius, debugPaint);
+  }
+
   /// Checks whether the represented circle contains the [point].
   @override
   bool containsPoint(Vector2 point) {
diff --git a/packages/flame/lib/src/geometry/polygon_component.dart b/packages/flame/lib/src/geometry/polygon_component.dart
index 93e568060..70d0b6dbc 100644
--- a/packages/flame/lib/src/geometry/polygon_component.dart
+++ b/packages/flame/lib/src/geometry/polygon_component.dart
@@ -189,6 +189,12 @@ class PolygonComponent extends ShapeComponent {
     }
   }
 
+  @override
+  void renderDebugMode(Canvas canvas) {
+    super.renderDebugMode(canvas);
+    canvas.drawPath(_path, debugPaint);
+  }
+
   /// Checks whether the polygon contains the [point].
   /// Note: The polygon needs to be convex for this to work.
   @override
diff --git a/packages/flame/test/components/composed_component_test.dart b/packages/flame/test/components/composed_component_test.dart
index 9781e41a8..d81f1dfa6 100644
--- a/packages/flame/test/components/composed_component_test.dart
+++ b/packages/flame/test/components/composed_component_test.dart
@@ -39,7 +39,7 @@ class _MyTap extends PositionComponent with Tappable {
   }
 }
 
-class _MyAsyncChild extends _MyTap {
+class _MyAsyncChild extends PositionComponent {
   @override
   Future<void> onLoad() async {
     await super.onLoad();
@@ -52,7 +52,7 @@ void main() {
   final withTappables = FlameTester(() => _HasTappablesGame());
 
   group('Composability', () {
-    withTappables.test(
+    testWithFlameGame(
       'child is not added until the component is prepared',
       (game) async {
         final child = Component();
@@ -71,7 +71,7 @@ void main() {
       },
     );
 
-    withTappables.test('removes the child from the component', (game) async {
+    testWithFlameGame('removes the child from the component', (game) async {
       final child = Component();
       final wrapper = Component();
       await game.ensureAdd(wrapper);
@@ -88,7 +88,7 @@ void main() {
       expect(wrapper.contains(child), false);
     });
 
-    withTappables.test(
+    testWithFlameGame(
       'when child is async loading, the child is added to the component after '
       'loading',
       (game) async {
@@ -119,8 +119,8 @@ void main() {
       expect(child.tapped, true);
     });
 
-    withTappables.test('add multiple children with addAll', (game) async {
-      final children = List.generate(10, (_) => _MyTap());
+    testWithFlameGame('add multiple children with addAll', (game) async {
+      final children = List.generate(10, (_) => _MyAsyncChild());
       final wrapper = Component();
       await wrapper.addAll(children);
 
@@ -191,7 +191,7 @@ void main() {
       expect(child.rendered, true);
     });
 
-    withTappables.test('initially same debugMode as parent', (game) async {
+    testWithFlameGame('initially same debugMode as parent', (game) async {
       final child = Component();
       final wrapper = Component();
       wrapper.debugMode = true;
@@ -203,5 +203,23 @@ void main() {
       wrapper.debugMode = false;
       expect(child.debugMode, true);
     });
+
+    testWithFlameGame(
+      'debugMode propagates to descendants onMount',
+      (game) async {
+        final child = Component();
+        final parent = Component();
+        final grandParent = Component();
+        parent.add(child);
+        grandParent.add(parent);
+        grandParent.debugMode = true;
+
+        await game.ensureAdd(grandParent);
+
+        expect(child.debugMode, true);
+        expect(parent.debugMode, true);
+        expect(grandParent.debugMode, true);
+      },
+    );
   });
 }