ShapeComponent and Hitbox to take transform of parents full ancestor tree into consideration (#1076)

* `ShapeComponent` changes size, position and angle of underlying Shape * Added description to ShapeComponent * Fix test * Update packages/flame/lib/src/components/shape_component.dart Co-authored-by: Erick <erickzanardoo@gmail.com> * Add absoluteScale and absoluteAngle to PositionComponent * Refactor ShapeComponent * Should be scaled by total scale, not scaled size * Premature optimization for creation for objects in Polygon * Use path for default Polygon constructor * Do not sync component and hitbox shape * Fix analyze issue * Add example for flipping with collision detection * Don't use absoluteScale * Fix examples * Fix examples * Doesn't need super.render * Fix Circle dartdoc * Update changelog * Update names of vertices caches in Polygon * Update text docs * Revert "Update text docs" This reverts commit 73a68a465d76eb0eb50bb3753e57b2f4e3b5a7f4. * Fix examples * ShapeComponents docs * Move example games to the top * Fix dartdoc comment about polygon vertex relation * Fix order of polygon vertices in dartdoc * Fix anchor for PolygonComponent.fromPoints * Add test with ancestors * Update doc/components.md Co-authored-by: Pasha Stetsenko <stpasha@google.com> * Update doc/components.md Co-authored-by: Erick <erickzanardoo@gmail.com> * Rename example classes * Fix linting issues in examples * Don't use px * Use isTrue and isFalse * Update doc/components.md Co-authored-by: Erick <erickzanardoo@gmail.com> * Fixed comments on PR Co-authored-by: Erick <erickzanardoo@gmail.com> Co-authored-by: Pasha Stetsenko <stpasha@google.com>
2025-11-01 19:12:31 +08:00 · 2021-11-13 16:00:24 +01:00
parent d53ac50859
commit cd7a0bbb65
28 changed files with 1224 additions and 390 deletions
--- a/examples/lib/stories/collision_detection/simple_shapes.dart
+++ b/examples/lib/stories/collision_detection/simple_shapes.dart
@ -0,0 +1,105 @@
+import 'dart:math';
+import 'dart:ui';
+
+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';
+
+enum Shapes { circle, rectangle, polygon }
+
+class SimpleShapesExample extends FlameGame with HasTappableComponents {
+  static const description = '''
+    An example which adds random shapes on the screen when you tap it, if you
+    tap on an already existing shape it will remove that shape and replace it
+    with a new one.
+  ''';
+  final _rng = Random();
+
+  MyShapeComponent randomShape(Vector2 position) {
+    final shapeType = Shapes.values[_rng.nextInt(Shapes.values.length)];
+    final shapeSize =
+        Vector2.all(100) + Vector2.all(50.0).scaled(_rng.nextDouble());
+    final shapeAngle = _rng.nextDouble() * 6;
+    switch (shapeType) {
+      case Shapes.circle:
+        return MyShapeComponent(
+          HitboxCircle(),
+          position: position,
+          size: shapeSize,
+          angle: shapeAngle,
+        );
+      case Shapes.rectangle:
+        return MyShapeComponent(
+          HitboxRectangle(),
+          position: position,
+          size: shapeSize,
+          angle: shapeAngle,
+        );
+      case Shapes.polygon:
+        final points = [
+          Vector2.random(_rng),
+          Vector2.random(_rng)..y *= -1,
+          -Vector2.random(_rng),
+          Vector2.random(_rng)..x *= -1,
+        ];
+        return MyShapeComponent(
+          HitboxPolygon(points),
+          position: position,
+          size: shapeSize,
+          angle: shapeAngle,
+        );
+    }
+  }
+
+  @override
+  void onTapDown(int pointerId, TapDownInfo info) {
+    super.onTapDown(pointerId, info);
+    final tapPosition = info.eventPosition.game;
+    final component = randomShape(tapPosition);
+    add(component);
+    component.add(
+      MoveEffect(
+        path: [size / 2],
+        speed: 30,
+        isAlternating: true,
+        isInfinite: true,
+      ),
+    );
+    component.add(
+      RotateEffect(
+        angle: 3,
+        speed: 0.4,
+        isAlternating: true,
+        isInfinite: true,
+      ),
+    );
+  }
+}
+
+class MyShapeComponent extends ShapeComponent with Tappable {
+  @override
+  final Paint paint = BasicPalette.red.paint()..style = PaintingStyle.stroke;
+
+  MyShapeComponent(
+    HitboxShape shape, {
+    Vector2? position,
+    Vector2? size,
+    double? angle,
+  }) : super(
+          shape,
+          position: position,
+          size: size,
+          angle: angle,
+          anchor: Anchor.center,
+        );
+
+  @override
+  bool onTapDown(TapDownInfo _) {
+    removeFromParent();
+    return true;
+  }
+}