Unify examples structure (#1118)

* Animations, CameraAndViewport, CollisionDetection and Components unified

* Added descriptions to effects

* Rename input games

* Unify input stories

* Add info to parallax section

* Added descriptions to the rendering examples

* Add descriptions to the sprites directory

* Fix utils and rendering section

* Add descriptions to the widgets section

* Delete directory that rebase brought back

* Unify game names

* Added some styleguide docs for examples

* Fix analyze issues

* All files should have _example as suffix

* Made the FollowComponentExample a bit easier to understand

* Change priority of ember

examples/lib/stories/input/joystick_advanced_example.dart

@@ -0,0 +1,158 @@
+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/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 JoystickAdvancedExample extends FlameGame
+    with HasDraggables, HasTappables {
+  static const String description = '''
+    In this example we showcase how to use the joystick by creating 
+    `SpriteComponent`s that serve as the joystick's knob and background.
+    We also showcase the `HudButtonComponent` which is a button that has its
+    position defined by margins to the edges, which can be useful when making
+    controller buttons.\n\n
+    Steer the player by using the joystick and flip and rotate it by pressing
+    the buttons.
+  ''';
+
+  late final JoystickPlayer player;
+  late final JoystickComponent joystick;
+  late final TextComponent speedText;
+  late final TextComponent directionText;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    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.flipHorizontally,
+    );
+
+    // 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.flipVertically,
+    );
+
+    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: CircleComponent(radius: 35),
+      buttonDown: RectangleComponent(
+        size: buttonSize,
+        paint: BasicPalette.blue.paint(),
+      ),
+      margin: const EdgeInsets.only(
+        right: 85,
+        bottom: 150,
+      ),
+      onPressed: () => player.add(
+        rotateEffect..angle = 8 * rng.nextDouble(),
+      ),
+    );
+
+    final _regular = TextPaint(
+      style: TextStyle(color: BasicPalette.white.color),
+    );
+    speedText = TextComponent(
+      text: 'Speed: 0',
+      textRenderer: _regular,
+    )..isHud = true;
+    directionText = TextComponent(
+      text: 'Direction: idle',
+      textRenderer: _regular,
+    )..isHud = true;
+
+    final speedWithMargin = HudMarginComponent(
+      margin: const EdgeInsets.only(
+        top: 80,
+        left: 80,
+      ),
+    )..add(speedText);
+
+    final directionWithMargin = HudMarginComponent(
+      margin: const EdgeInsets.only(
+        top: 110,
+        left: 80,
+      ),
+    )..add(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';
+  }
+}