Refactor joystick (#876)

* Refactor joystick * Fix directional tests * Joystick example * Any PositionComponent can be used as knob and background * Add MarginButtonComponent * Fix JoystickExample * Update joystick docs * Fix joystick direction tests * Fix effect tests * Fix analyze issue * Update docs * Update docs * Move joystick to input export * Update packages/flame/lib/src/geometry/shape.dart Co-authored-by: Luan Nico <luanpotter27@gmail.com> * Add test and description for screenAngle * Update examples/lib/stories/controls/joystick_player.dart Co-authored-by: Erick <erickzanardoo@gmail.com> * Update doc/input.md Co-authored-by: Erick <erickzanardoo@gmail.com> * controls -> input in examples to align with export file * controls -> input * Add simple joystick example * Fix imports * velocity -> relativeDelta Co-authored-by: Luan Nico <luanpotter27@gmail.com> Co-authored-by: Erick <erickzanardoo@gmail.com>
2025-11-02 03:15:43 +08:00 · 2021-07-15 12:00:41 +02:00
parent 750f63ed97
commit 64a40ff641
83 changed files with 797 additions and 1005 deletions
--- a/examples/lib/stories/input/joystick_advanced.dart
+++ b/examples/lib/stories/input/joystick_advanced.dart
@ -0,0 +1,145 @@
+import 'dart:math';
+
+import 'package:flame/components.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/extensions.dart';
+import 'package:flame/game.dart';
+import 'package:flame/geometry.dart';
+import 'package:flame/input.dart';
+import 'package:flame/palette.dart';
+import 'package:flame/sprite.dart';
+import 'package:flutter/animation.dart';
+import 'package:flutter/painting.dart';
+
+import 'joystick_player.dart';
+
+class JoystickAdvancedGame extends BaseGame
+    with HasDraggableComponents, HasTappableComponents {
+  late final JoystickPlayer player;
+  late final JoystickComponent joystick;
+  late final TextComponent speedText;
+  late final TextComponent directionText;
+
+  @override
+  Future<void> onLoad() async {
+    final image = await images.load('joystick.png');
+    final sheet = SpriteSheet.fromColumnsAndRows(
+      image: image,
+      columns: 6,
+      rows: 1,
+    );
+    joystick = JoystickComponent(
+      knob: SpriteComponent(
+        sprite: sheet.getSpriteById(1),
+        size: Vector2.all(100),
+      ),
+      background: SpriteComponent(
+        sprite: sheet.getSpriteById(0),
+        size: Vector2.all(150),
+      ),
+      margin: const EdgeInsets.only(left: 40, bottom: 40),
+    );
+    player = JoystickPlayer(joystick);
+
+    final buttonSize = Vector2.all(80);
+    // A button with margin from the edge of the viewport that flips the
+    // rendering of the player on the X-axis.
+    final flipButton = HudButtonComponent(
+      button: SpriteComponent(
+        sprite: sheet.getSpriteById(2),
+        size: buttonSize,
+      ),
+      buttonDown: SpriteComponent(
+        sprite: sheet.getSpriteById(4),
+        size: buttonSize,
+      ),
+      margin: const EdgeInsets.only(
+        right: 80,
+        bottom: 60,
+      ),
+      onPressed: () => player.renderFlipX = !player.renderFlipX,
+    );
+
+    // A button with margin from the edge of the viewport that flips the
+    // rendering of the player on the Y-axis.
+    final flopButton = HudButtonComponent(
+      button: SpriteComponent(
+        sprite: sheet.getSpriteById(3),
+        size: buttonSize,
+      ),
+      buttonDown: SpriteComponent(
+        sprite: sheet.getSpriteById(5),
+        size: buttonSize,
+      ),
+      margin: const EdgeInsets.only(
+        right: 160,
+        bottom: 60,
+      ),
+      onPressed: () => player.renderFlipY = !player.renderFlipY,
+    );
+
+    final rotateEffect = RotateEffect(
+      angle: 0,
+      curve: Curves.bounceOut,
+      isAlternating: true,
+      speed: 2,
+    );
+    final rng = Random();
+    // A button, created from a shape, that adds a rotation effect to the player
+    // when it is pressed.
+    final shapeButton = HudButtonComponent(
+      button: Circle(radius: 35).toComponent(paint: BasicPalette.white.paint()),
+      buttonDown: Rectangle(size: buttonSize)
+          .toComponent(paint: BasicPalette.blue.paint()),
+      margin: const EdgeInsets.only(
+        right: 85,
+        bottom: 150,
+      ),
+      onPressed: () => player.addEffect(
+        rotateEffect..angle = 8 * rng.nextDouble(),
+      ),
+    );
+
+    final _regularTextConfig = TextPaintConfig(color: BasicPalette.white.color);
+    final _regular = TextPaint(config: _regularTextConfig);
+    speedText = TextComponent(
+      'Speed: 0',
+      textRenderer: _regular,
+    )..isHud = true;
+    directionText = TextComponent(
+      'Direction: idle',
+      textRenderer: _regular,
+    )..isHud = true;
+
+    final speedWithMargin = HudMarginComponent(
+      margin: const EdgeInsets.only(
+        top: 80,
+        left: 80,
+      ),
+    )..addChild(speedText);
+
+    final directionWithMargin = HudMarginComponent(
+      margin: const EdgeInsets.only(
+        top: 110,
+        left: 80,
+      ),
+    )..addChild(directionText);
+
+    add(player);
+    add(joystick);
+    add(flipButton);
+    add(flopButton);
+    add(shapeButton);
+    add(speedWithMargin);
+    add(directionWithMargin);
+  }
+
+  @override
+  void update(double dt) {
+    super.update(dt);
+    speedText.text = 'Speed: ${(joystick.intensity * player.maxSpeed).round()}';
+    final direction =
+        joystick.direction.toString().replaceAll('JoystickDirection.', '');
+    directionText.text = 'Direction: $direction';
+  }
+}