fix: Set margins of JoystickComponent properly (#3019)

The margins of the `JoystickComponent` weren't set properly, this PR fixes that.
flame-engine · Feb 5, 2024 · e27818d · e27818d
1 parent bf8aecd
commit e27818d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/examples/lib/stories/input/joystick_advanced_example.dart b/examples/lib/stories/input/joystick_advanced_example.dart
@@ -20,6 +20,11 @@ class JoystickAdvancedExample extends FlameGame with HasCollisionDetection {
     the buttons.
   ''';
 
+  JoystickAdvancedExample()
+      : super(
+          camera: CameraComponent.withFixedResolution(width: 1200, height: 800),
+        );
+
   late final JoystickPlayer player;
   late final JoystickComponent joystick;
   late final TextComponent speedText;

diff --git a/packages/flame/lib/src/components/input/joystick_component.dart b/packages/flame/lib/src/components/input/joystick_component.dart
@@ -2,8 +2,7 @@ import 'dart:math';
 
 import 'package:flame/components.dart';
 import 'package:flame/events.dart';
-import 'package:flame/src/components/input/hud_margin_component.dart';
-import 'package:meta/meta.dart';
+import 'package:flutter/widgets.dart';
 
 enum JoystickDirection {
   up,
@@ -17,7 +16,8 @@ enum JoystickDirection {
   idle,
 }
 
-class JoystickComponent extends HudMarginComponent with DragCallbacks {
+class JoystickComponent extends PositionComponent
+    with HasGameReference, ComponentViewportMargin, DragCallbacks {
   late final PositionComponent? knob;
   late final PositionComponent? background;
 
@@ -46,8 +46,8 @@ class JoystickComponent extends HudMarginComponent with DragCallbacks {
   JoystickComponent({
     this.knob,
     this.background,
-    super.margin,
     super.position,
+    EdgeInsets? margin,
     double? size,
     double? knobRadius,
     Anchor super.anchor = Anchor.center,
@@ -66,6 +66,7 @@ class JoystickComponent extends HudMarginComponent with DragCallbacks {
         super(
           size: background?.size ?? Vector2.all(size ?? 0),
         ) {
+    this.margin = margin;
     this.knobRadius = knobRadius ?? this.size.x / 2;
   }
 

diff --git a/packages/flame/test/components/joystick_component_test.dart b/packages/flame/test/components/joystick_component_test.dart
@@ -45,11 +45,29 @@ void main() {
           size: 20,
           margin: const EdgeInsets.only(left: 20, bottom: 20),
         );
-        joystick.loaded.then((_) => game.onGameResize(Vector2(200, 100)));
+        joystick.mounted.then((_) => game.onGameResize(Vector2(200, 100)));
         await game.ensureAdd(joystick);
         expect(joystick.position, Vector2(30, 70));
       },
     );
+
+    testWithFlameGame(
+      'properly re-positions with FixedResolutionViewport',
+      (game) async {
+        game.camera =
+            CameraComponent.withFixedResolution(width: 100, height: 200);
+        game.onGameResize(Vector2(100, 200));
+        final joystick = JoystickComponent(
+          knob: CircleComponent(radius: 5.0),
+          size: 20,
+          margin: const EdgeInsets.only(left: 20, bottom: 20),
+        );
+        await game.camera.viewport.ensureAdd(joystick);
+        expect(joystick.position, Vector2(30, 170));
+        game.onGameResize(Vector2(200, 100));
+        expect(joystick.position, Vector2(30, 170));
+      },
+    );
   });
 
   group('Joystick input tests', () {