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/parallax/advanced_parallax_example.dart

@@ -2,7 +2,11 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 
-class AdvancedParallaxGame extends FlameGame {
+class AdvancedParallaxExample extends FlameGame {
+  static const String description = '''
+    Shows how to create a parallax with different velocity deltas on each layer.
+  ''';
+
   final _layersMeta = {
     'parallax/bg.png': 1.0,
     'parallax/mountain-far.png': 1.5,

examples/lib/stories/parallax/animation_parallax_example.dart

@@ -3,7 +3,11 @@ import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 import 'package:flutter/painting.dart';
 
-class AnimationParallaxGame extends FlameGame {
+class AnimationParallaxExample extends FlameGame {
+  static const String description = '''
+    Shows how to use animations in a `ParallaxComponent`.
+  ''';
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();

examples/lib/stories/parallax/basic_parallax_example.dart

@@ -2,7 +2,11 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 
-class BasicParallaxGame extends FlameGame {
+class BasicParallaxExample extends FlameGame {
+  static const String description = '''
+    Shows the simplest way to use a fullscreen `ParallaxComponent`.
+  ''';
+
   final _imageNames = [
     ParallaxImageData('parallax/bg.png'),
     ParallaxImageData('parallax/mountain-far.png'),

examples/lib/stories/parallax/component_parallax_example.dart

@@ -2,7 +2,12 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 
-class ComponentParallaxGame extends FlameGame {
+class ComponentParallaxExample extends FlameGame {
+  static const String description = '''
+    Shows how to do initiation and loading of assets from within an extended
+    `ParallaxComponent`,
+  ''';
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
@@ -10,7 +15,7 @@ class ComponentParallaxGame extends FlameGame {
   }
 }
 
-class MyParallaxComponent extends ParallaxComponent<ComponentParallaxGame> {
+class MyParallaxComponent extends ParallaxComponent<ComponentParallaxExample> {
   @override
   Future<void> onLoad() async {
     await super.onLoad();

examples/lib/stories/parallax/no_fcs_parallax_example.dart

@@ -4,12 +4,15 @@ import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 import 'package:flutter/material.dart';
 
-/// This examples serves to test the Parallax feature outside of the
-/// Flame Component System (FCS), use the other files in this folder
-/// for examples on how to use parallax with FCS
-/// FCS is only used when you extend FlameGame, not Game,
-/// like we do in this example.
-class NoFCSParallaxGame with Loadable, Game {
+class NoFCSParallaxExample with Loadable, Game {
+  static const String description = '''
+    This examples serves to test the Parallax feature outside of the Flame
+    Component System (FCS), use the other files in this folder for examples on
+    how to use parallax with FCS.\n
+    FCS is only used when you extend FlameGame, not when you only use the Game
+    mixin, like we do in this example.
+  ''';
+
   late Parallax parallax;
 
   @override

examples/lib/stories/parallax/parallax.dart

@@ -4,60 +4,57 @@ import 'package:flame/parallax.dart';
 import 'package:flutter/painting.dart';
 
 import '../../commons/commons.dart';
-import 'advanced.dart';
-import 'animation.dart';
-import 'basic.dart';
-import 'component.dart';
-import 'no_fcs.dart';
-import 'sandbox_layer.dart';
-import 'small_parallax.dart';
+import 'advanced_parallax_example.dart';
+import 'animation_parallax_example.dart';
+import 'basic_parallax_example.dart';
+import 'component_parallax_example.dart';
+import 'no_fcs_parallax_example.dart';
+import 'sandbox_layer_parallax_example.dart';
+import 'small_parallax_example.dart';
 
 void addParallaxStories(Dashbook dashbook) {
   dashbook.storiesOf('Parallax')
     ..add(
       'Basic',
-      (_) => GameWidget(game: BasicParallaxGame()),
-      codeLink: baseLink('parallax/basic.dart'),
-      info: 'Shows the simplest way to use a fullscreen ParallaxComponent',
+      (_) => GameWidget(game: BasicParallaxExample()),
+      codeLink: baseLink('parallax/basic_animation_example.dart'),
+      info: BasicParallaxExample.description,
     )
     ..add(
       'Component',
-      (_) => GameWidget(game: ComponentParallaxGame()),
-      codeLink: baseLink('parallax/component.dart'),
-      info: 'Shows how to do initiation and loading of assets from within an '
-          'extended ParallaxComponent',
+      (_) => GameWidget(game: ComponentParallaxExample()),
+      codeLink: baseLink('parallax/component_parallax_example.dart'),
+      info: ComponentParallaxExample.description,
     )
     ..add(
       'Animation',
-      (_) => GameWidget(game: AnimationParallaxGame()),
-      codeLink: baseLink('parallax/animation.dart'),
-      info: 'Shows how to use animations in a parallax',
+      (_) => GameWidget(game: AnimationParallaxExample()),
+      codeLink: baseLink('parallax/animation_parallax_example.dart'),
+      info: AnimationParallaxExample.description,
     )
     ..add(
       'Non-fullscreen',
-      (_) => GameWidget(game: SmallParallaxGame()),
-      codeLink: baseLink('parallax/small_parallax.dart'),
-      info: 'Shows how to create a smaller parallax in the center of the '
-          'screen',
+      (_) => GameWidget(game: SmallParallaxExample()),
+      codeLink: baseLink('parallax/small_parallax_example.dart'),
+      info: SmallParallaxExample.description,
     )
     ..add(
       'No FCS',
-      (_) => GameWidget(game: NoFCSParallaxGame()),
-      codeLink: baseLink('parallax/no_fcs.dart'),
-      info: "Shows how to use the parallax without Flame's component system",
+      (_) => GameWidget(game: NoFCSParallaxExample()),
+      codeLink: baseLink('parallax/no_fcs_parallax_example.dart'),
+      info: NoFCSParallaxExample.description,
     )
     ..add(
       'Advanced',
-      (_) => GameWidget(game: AdvancedParallaxGame()),
-      codeLink: baseLink('parallax/advanced.dart'),
-      info: 'Shows how to create a parallax with different velocity deltas on '
-          'each layer',
+      (_) => GameWidget(game: AdvancedParallaxExample()),
+      codeLink: baseLink('parallax/advanced_parallax_example.dart'),
+      info: AdvancedParallaxExample.description,
     )
     ..add(
       'Layer sandbox',
       (context) {
         return GameWidget(
-          game: SandBoxLayerParallaxGame(
+          game: SandboxLayerParallaxExample(
             planeSpeed: Vector2(
               context.numberProperty('plane x speed', 0),
               context.numberProperty('plane y speed', 0),
@@ -89,8 +86,7 @@ void addParallaxStories(Dashbook dashbook) {
           ),
         );
       },
-      codeLink: baseLink('parallax/sandbox_layer.dart'),
-      info: 'In this example, properties of a layer can be changed to preview '
-          'the different combination of values',
+      codeLink: baseLink('parallax/sandbox_layer_parallax_example.dart'),
+      info: SandboxLayerParallaxExample.description,
     );
 }

examples/lib/stories/parallax/sandbox_layer_parallax_example.dart

@@ -3,13 +3,19 @@ import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 import 'package:flutter/painting.dart';
 
-class SandBoxLayerParallaxGame extends FlameGame {
+class SandboxLayerParallaxExample extends FlameGame {
+  static const String description = '''
+    In this example, properties of a layer can be changed to preview the
+    different combination of values. You can change the properties by pressing
+    the pen in the upper right corner.
+  ''';
+
   final Vector2 planeSpeed;
   final ImageRepeat planeRepeat;
   final LayerFill planeFill;
   final Alignment planeAlignment;
 
-  SandBoxLayerParallaxGame({
+  SandboxLayerParallaxExample({
     required this.planeSpeed,
     required this.planeRepeat,
     required this.planeFill,

examples/lib/stories/parallax/small_parallax_example.dart

@@ -2,7 +2,11 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:flame/parallax.dart';
 
-class SmallParallaxGame extends FlameGame {
+class SmallParallaxExample extends FlameGame {
+  static const String description = '''
+    Shows how to create a smaller parallax in the center of the screen.
+  ''';
+
   @override
   Future<void> onLoad() async {
     await super.onLoad();
@@ -17,8 +21,8 @@ class SmallParallaxGame extends FlameGame {
       size: Vector2.all(200),
       baseVelocity: Vector2(20, 0),
       velocityMultiplierDelta: Vector2(1.8, 1.0),
-    )
-      ..position = size / 2;
+    );
+    component.position = size / 2;
     add(component);
   }
 }