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/widgets/custom_painter_example.dart

@@ -4,9 +4,35 @@ import 'package:flame/game.dart';
 import 'package:flame/input.dart';
 import 'package:flutter/material.dart';
 
+class CustomPainterExample extends FlameGame with TapDetector {
+  static const description = '''
+    Example demonstration of how to use the CustomPainterComponent.
+
+    On the screen you can see a component using a custom painter being
+    rendered on a FlameGame, and if you tap, that same painter is used to
+    show the happy face on a widget overlay.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    add(Player());
+  }
+
+  @override
+  void onTap() {
+    if (overlays.isActive('HappyFace')) {
+      overlays.remove('HappyFace');
+    } else {
+      overlays.add('HappyFace');
+    }
+  }
+}
+
 Widget customPainterBuilder(DashbookContext ctx) {
   return GameWidget(
-    game: CustomPainterGame(),
+    game: CustomPainterExample(),
     overlayBuilderMap: {
       'HappyFace': (context, game) {
         return Center(
@@ -82,7 +108,8 @@ class PlayerCustomPainter extends CustomPainter {
   }
 }
 
-class Player extends CustomPainterComponent with HasGameRef<CustomPainterGame> {
+class Player extends CustomPainterComponent
+    with HasGameRef<CustomPainterExample> {
   static const speed = 150;
 
   int direction = 1;
@@ -109,29 +136,3 @@ class Player extends CustomPainterComponent with HasGameRef<CustomPainterGame> {
     }
   }
 }
-
-class CustomPainterGame extends FlameGame with TapDetector {
-  static const info = '''
-      Example demonstration how to use the CustomPainterComponent.
-
-      On the screen you can see a component using a custom painter being
-      rendered on a FlameGame, and if you tap, that same painter is used to
-      show the happy face on a widget overlay.
-  ''';
-
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-
-    add(Player());
-  }
-
-  @override
-  void onTap() {
-    if (overlays.isActive('HappyFace')) {
-      overlays.remove('HappyFace');
-    } else {
-      overlays.add('HappyFace');
-    }
-  }
-}

examples/lib/stories/widgets/overlay.dart

@@ -1,64 +0,0 @@
-import 'package:dashbook/dashbook.dart';
-import 'package:flame/components.dart';
-import 'package:flame/game.dart';
-import 'package:flame/input.dart';
-import 'package:flutter/material.dart';
-
-Widget _pauseMenuBuilder(BuildContext buildContext, ExampleGame game) {
-  return Center(
-    child: Container(
-      width: 100,
-      height: 100,
-      color: const Color(0xFFFF0000),
-      child: const Center(
-        child: Text('Paused'),
-      ),
-    ),
-  );
-}
-
-Widget overlayBuilder(DashbookContext ctx) {
-  return GameWidget<ExampleGame>(
-    game: ExampleGame()..paused = true,
-    overlayBuilderMap: const {
-      'PauseMenu': _pauseMenuBuilder,
-    },
-    initialActiveOverlays: const ['PauseMenu'],
-  );
-}
-
-class ExampleGame extends FlameGame with TapDetector {
-  @override
-  Future<void> onLoad() async {
-    await super.onLoad();
-    final animation = await loadSpriteAnimation(
-      'animations/chopper.png',
-      SpriteAnimationData.sequenced(
-        amount: 4,
-        textureSize: Vector2.all(48),
-        stepTime: 0.15,
-      ),
-    );
-
-    add(
-      SpriteAnimationComponent(
-        animation: animation,
-      )
-        ..position.y = size.y / 2
-        ..position.x = 100
-        ..anchor = Anchor.center
-        ..size = Vector2.all(100),
-    );
-  }
-
-  @override
-  void onTap() {
-    if (overlays.isActive('PauseMenu')) {
-      overlays.remove('PauseMenu');
-      resumeEngine();
-    } else {
-      overlays.add('PauseMenu');
-      pauseEngine();
-    }
-  }
-}

examples/lib/stories/widgets/partial_sprite_widget_example.dart

@@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart';
 
 final anchorOptions = Anchor.values.map((e) => e.name).toList();
 
-Widget spriteSectionWidgetBuilder(DashbookContext ctx) {
+Widget partialSpriteWidgetBuilder(DashbookContext ctx) {
   return Container(
     width: ctx.numberProperty('container width', 400),
     height: ctx.numberProperty('container height', 200),

examples/lib/stories/widgets/widgets.dart

@@ -1,13 +1,12 @@
 import 'package:dashbook/dashbook.dart';
 
 import '../../commons/commons.dart';
-import 'custom_painter_component.dart';
-import 'nine_tile_box.dart';
-import 'overlay.dart';
-import 'sprite_animation_widget.dart';
-import 'sprite_button.dart';
-import 'sprite_widget.dart';
-import 'sprite_widget_section.dart';
+import 'custom_painter_example.dart';
+import 'nine_tile_box_example.dart';
+import 'partial_sprite_widget_example.dart';
+import 'sprite_animation_widget_example.dart';
+import 'sprite_button_example.dart';
+import 'sprite_widget_example.dart';
 
 void addWidgetsStories(Dashbook dashbook) {
   dashbook.storiesOf('Widgets')
@@ -15,37 +14,57 @@ void addWidgetsStories(Dashbook dashbook) {
     ..add(
       'Nine Tile Box',
       nineTileBoxBuilder,
-      codeLink: baseLink('widgets/nine_tile_box.dart'),
+      codeLink: baseLink('widgets/nine_tile_box_example.dart'),
+      info: '''
+        If you want to create a background for something that can stretch you
+        can use the `NineTileBox` which is showcased here, don't forget to check
+        out the settings on the pen icon.
+      ''',
     )
     ..add(
       'Sprite Button',
       spriteButtonBuilder,
-      codeLink: baseLink('widgets/sprite_button.dart'),
+      codeLink: baseLink('widgets/sprite_button_example.dart'),
+      info: '''
+        If you want to use sprites as a buttons within the flutter widget tree
+        you can create a `SpriteButton`, don't forget to check out the settings
+        on the pen icon.
+      ''',
     )
     ..add(
       'Sprite Widget (full image)',
       spriteWidgetBuilder,
-      codeLink: baseLink('widgets/sprite_widget.dart'),
+      codeLink: baseLink('widgets/sprite_widget_example.dart'),
+      info: '''
+        If you want to use a sprite within the flutter widget tree
+        you can create a `SpriteWidget`, don't forget to check out the settings
+        on the pen icon.
+      ''',
     )
     ..add(
       'Sprite Widget (section of image)',
-      spriteSectionWidgetBuilder,
-      codeLink: baseLink('widgets/sprite_widget_section.dart'),
+      partialSpriteWidgetBuilder,
+      codeLink: baseLink('widgets/partial_sprite_widget_example.dart'),
+      info: '''
+        In this example we show how you can render only parts of a sprite within
+        a `SpriteWidget`, don't forget to check out the settings on the pen
+        icon.
+      ''',
     )
     ..add(
       'Sprite Animation Widget',
       spriteAnimationWidgetBuilder,
-      codeLink: baseLink('widgets/sprite_animation_widget.dart'),
-    )
-    ..add(
-      'Overlay',
-      overlayBuilder,
-      codeLink: baseLink('widgets/overlay.dart'),
+      codeLink: baseLink('widgets/sprite_animation_widget_example.dart'),
+      info: '''
+        If you want to use a sprite animation directly on the flutter widget
+        tree you can create a `SpriteAnimationWidget`, don't forget to check out
+        the settings on the pen icon.
+      ''',
     )
     ..add(
       'CustomPainterComponent',
       customPainterBuilder,
-      codeLink: baseLink('widgets/custom_painter_component.dart'),
-      info: CustomPainterGame.info,
+      codeLink: baseLink('widgets/custom_painter_example.dart'),
+      info: CustomPainterExample.description,
     );
 }