docs: Update platformer tutorial to latest Flame (#2904)

Updates the  platformer tutorial to Flame v1.11.0

.github/.cspell/gamedev_dictionary.txt

@@ -45,7 +45,6 @@ raycasts # plural of raycast
 raytrace # act of raytracing
 raytracing # rendering techniques that calculates light rays as straight lines
 rects # plural of rect
-refactorings # plural of refactoring
 respawned # past tense of respawn
 respawn # when the player character dies and is brought back after some time and penalties
 RGBA # red green blue alpha

.github/.cspell/words_dictionary.txt

@@ -2,8 +2,6 @@
 bloodlust
 collidable
 collidables
-composability
-discoverability
 draggables
 focusable
 gamepad

doc/tutorials/platformer/step_2.md

@@ -91,20 +91,15 @@ You can run this file and you should just have a blank screen now. Let's get Emb
 
 ## CameraComponent and World
 
-Since `FlameGame.camera` is deprecated, we want to add a `CameraComponent` that we can move around,
-and a world that we can add all our components to and move around our player in.
-(The `CameraComponent` will be built-in in Flame v2).
+To move around in the world we are going the use the built-in `CameraComponent` and `World` that
+exists on the `FlameGame` class.
+We are going to add all our components to the `world` and follow the player with the `camera`.
 
 ```dart
 import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 
 class EmberQuestGame extends FlameGame {
-  EmberQuestGame();
-  
-  final world = World();
-  late final CameraComponent cameraComponent;
-
   @override
   Future<void> onLoad() async {
     await images.loadAll([
@@ -117,12 +112,10 @@ class EmberQuestGame extends FlameGame {
       'water_enemy.png',
     ]);
 
-    cameraComponent = CameraComponent(world: world);
     // Everything in this tutorial assumes that the position
     // of the `CameraComponent`s viewfinder (where the camera is looking)
     // is in the top left corner, that's why we set the anchor here.
-    cameraComponent.viewfinder.anchor = Anchor.topLeft;
-    addAll([cameraComponent, world]);
+    camera.viewfinder.anchor = Anchor.topLeft;
   }
 }
 ```
@@ -140,7 +133,7 @@ import 'package:flame/components.dart';
 import '../ember_quest.dart';
 
 class EmberPlayer extends SpriteAnimationComponent
-    with HasGameRef<EmberQuestGame> {
+    with HasGameReference<EmberQuestGame> {
   EmberPlayer({
     required super.position,
   }) : super(size: Vector2.all(64), anchor: Anchor.center);
@@ -181,13 +174,8 @@ import 'package:flame/game.dart';
 import 'actors/ember.dart';
 
 class EmberQuestGame extends FlameGame {
-  EmberQuestGame();
-
   late EmberPlayer _ember;
   
-  final world = World();
-  late final CameraComponent cameraComponent;
-
   @override
   Future<void> onLoad() async {
     await images.loadAll([
@@ -200,9 +188,7 @@ class EmberQuestGame extends FlameGame {
       'water_enemy.png',
     ]);
 
-    cameraComponent = CameraComponent(world: world);
-    cameraComponent.viewfinder.anchor = Anchor.topLeft;
-    addAll([cameraComponent, world]);
+    camera.viewfinder.anchor = Anchor.topLeft;
     
     _ember = EmberPlayer(
       position: Vector2(128, canvasSize.y - 70),

doc/tutorials/platformer/step_3.md

@@ -26,17 +26,17 @@ so first create a new folder called `lib/objects`. In that folder, create 3 file
 boilerplate code for the class, so create the following in their respective files:
 
 ```dart
-class GroundBlock{}
+class GroundBlock {}
 
-class PlatformBlock{}
+class PlatformBlock {}
 
-class Star{}
+class Star {}
 ```
 
 Also, create `water_enemy.dart` in the `lib/actors` folder using this boilerplate code:
 
 ```dart
-class WaterEnemy{}
+class WaterEnemy {}
 ```
 
 Now we can create a file called `segment_manager.dart` which will be placed in a new folder called
@@ -300,10 +300,7 @@ as:
       'water_enemy.png',
     ]);
     
-    cameraComponent = CameraComponent(world: world);
-    cameraComponent.viewfinder.anchor = Anchor.topLeft;
-    addAll([cameraComponent, world]);
-
+    camera.viewfinder.anchor = Anchor.topLeft;
     initializeGame();
   }
 ```
@@ -329,7 +326,7 @@ import 'package:flame/components.dart';
 import '../ember_quest.dart';
 
 class PlatformBlock extends SpriteComponent
-    with HasGameRef<EmberQuestGame> {
+    with HasGameReference<EmberQuestGame> {
   final Vector2 gridPosition;
   double xOffset;
 

doc/tutorials/platformer/step_4.md

@@ -17,7 +17,7 @@ import 'package:flutter/material.dart';
 import '../ember_quest.dart';
 
 class Star extends SpriteComponent
-    with HasGameRef<EmberQuestGame> {
+    with HasGameReference<EmberQuestGame> {
   final Vector2 gridPosition;
   double xOffset;
 
@@ -76,15 +76,15 @@ add(
 );
 ```
 
-The `SizeEffect` is best explained by going to their [help
-docs](../../flame/effects.md#sizeeffectby). In short, we simply reduce the size of the star
+The `SizeEffect` is best explained by going to their
+[docs](../../flame/effects.md#sizeeffectby). In short, we simply reduce the size of the star
 by -24 pixels in both directions and we make it pulse infinitely using the `EffectController`.
 
 Don't forget to add the star to your `lib/ember_quest.dart` file by doing:
 
 ```dart
 case Star:
-    add(
+  world.add(
     Star(
       gridPosition: block.gridPosition,
       xOffset: xPositionOffset,
@@ -93,7 +93,7 @@ case Star:
   break;
 ```
 
-If you run your game, you should now see pulsing stars!
+If you run your game, you should now see pulsating stars!
 
 
 ## Water Enemy
@@ -109,7 +109,7 @@ import 'package:flame/effects.dart';
 import '../ember_quest.dart';
 
 class WaterEnemy extends SpriteAnimationComponent
-    with HasGameRef<EmberQuestGame> {
+    with HasGameReference<EmberQuestGame> {
   final Vector2 gridPosition;
   double xOffset;
 
@@ -171,7 +171,7 @@ Don't forget to add the water enemy to your `lib/ember_quest.dart` file by doing
 
 ```dart
 case WaterEnemy:
-    add(
+    world.add(
       WaterEnemy(
        gridPosition: block.gridPosition,
        xOffset: xPositionOffset,
@@ -204,7 +204,7 @@ import 'package:flutter/material.dart';
 
 import '../ember_quest.dart';
 
-class GroundBlock extends SpriteComponent with HasGameRef<EmberQuestGame> {
+class GroundBlock extends SpriteComponent with HasGameReference<EmberQuestGame> {
   final Vector2 gridPosition;
   double xOffset;
 
@@ -334,7 +334,7 @@ import 'package:flutter/material.dart';
 import '../ember_quest.dart';
 import '../managers/segment_manager.dart';
 
-class GroundBlock extends SpriteComponent with HasGameRef<EmberQuestGame> {
+class GroundBlock extends SpriteComponent with HasGameReference<EmberQuestGame> {
   final Vector2 gridPosition;
   double xOffset;
   
@@ -391,7 +391,7 @@ Finally, don't forget to add your Ground Block to `lib/ember_quest.dart` by addi
 
 ```dart
 case GroundBlock:
-    add(
+  world.add(
     GroundBlock(
       gridPosition: block.gridPosition,
       xOffset: xPositionOffset,

doc/tutorials/platformer/step_5.md

@@ -20,7 +20,7 @@ class EmberQuestGame extends FlameGame with HasKeyboardHandlerComponents {
 
 ```dart
 class EmberPlayer extends SpriteAnimationComponent
-    with KeyboardHandler, HasGameRef<EmberQuestGame> {
+    with KeyboardHandler, HasGameReference<EmberQuestGame> {
 ```
 
 Now we can add a new method:
@@ -118,7 +118,7 @@ Next, add the `CollisionCallbacks` mixin to `lib/actors/ember.dart` like:
 
 ```dart
 class EmberPlayer extends SpriteAnimationComponent
-    with KeyboardHandler, CollisionCallbacks, HasGameRef<EmberQuestGame> {
+    with KeyboardHandler, CollisionCallbacks, HasGameReference<EmberQuestGame> {
 ```
 
 If it did not auto-import, you will need the following:
@@ -176,9 +176,7 @@ For the collisions to be activated for Ember, we need to add a `CircleHitbox`, s
 method, add the following:
 
 ```dart
-add(
-  CircleHitbox(),
-);
+add(CircleHitbox());
 ```
 
 Now that we have the basic collisions created, we can add gravity so Ember exists in a game world

doc/tutorials/platformer/step_6.md

@@ -26,7 +26,7 @@ enum HeartState {
 }
 
 class HeartHealthComponent extends SpriteGroupComponent<HeartState>
-    with HasGameRef<EmberQuestGame> {
+    with HasGameReference<EmberQuestGame> {
   final int heartNumber;
 
   HeartHealthComponent({
@@ -88,7 +88,7 @@ import 'package:flutter/material.dart';
 import '../ember_quest.dart';
 import 'heart.dart';
 
-class Hud extends PositionComponent with HasGameRef<EmberQuestGame> {
+class Hud extends PositionComponent with HasGameReference<EmberQuestGame> {
   Hud({
     super.position,
     super.size,
@@ -152,7 +152,7 @@ the number of hearts necessary. The last step is to add the hud to the game.
 Go to `lib/ember_quest.dart` and add the following code in the `initializeGame` method:
 
 ```dart
-cameraComponent.viewport.add(Hud());
+camera.viewport.add(Hud());
 ```
 
 If the auto-import did not occur, you will need to add:

doc/tutorials/platformer/step_7.md

@@ -185,10 +185,8 @@ Future<void> onLoad() async {
       'star.png',
       'water_enemy.png',
   ]);
-  cameraComponent = CameraComponent(world: world);
-  cameraComponent.viewfinder.anchor = Anchor.topLeft;
-  addAll([cameraComponent, world]);
   
+  camera.viewfinder.anchor = Anchor.topLeft;
   initializeGame(true);
 }