fix: Set margins of JoystickComponent properly

flame-engine · Feb 5, 2024 · fab0efa · fab0efa
1 parent bf8aecd
commit fab0efa
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 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
@@ -3,6 +3,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:flutter/widgets.dart';
 import 'package:meta/meta.dart';
 
 enum JoystickDirection {
@@ -17,7 +18,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 +48,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 +68,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;
   }