docs: Improving Space Shooter tutorial by moving attributes to constr…

…uctors (#2944)

This PR improves the Space Shooter Tutorial as a whole by moving the
setting of component's attributes from their `onLoad` method, to their
constructors.

doc/tutorials/space_shooter/app/lib/step2/main.dart

@@ -24,15 +24,19 @@ class SpaceShooterGame extends FlameGame with PanDetector {
 }
 
 class Player extends SpriteComponent with HasGameReference<SpaceShooterGame> {
+ Player()
+ : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  @override
  Future<void> onLoad() async {
  await super.onLoad();
 
  sprite = await game.loadSprite('player-sprite.png');
 
  position = game.size / 2;
- width = 100;
- height = 150;
  anchor = Anchor.center;
  }
 

doc/tutorials/space_shooter/app/lib/step3/main.dart

@@ -38,6 +38,12 @@ class SpaceShooterGame extends FlameGame with PanDetector {
 
 class Player extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
+ Player()
+ : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  @override
  Future<void> onLoad() async {
  await super.onLoad();
@@ -52,9 +58,6 @@ class Player extends SpriteAnimationComponent
  );
 
  position = game.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
  }
 
  void move(Vector2 delta) {

doc/tutorials/space_shooter/app/lib/step4/main.dart

@@ -48,6 +48,12 @@ class SpaceShooterGame extends FlameGame with PanDetector {
 
 class Player extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
+ Player()
+ : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  late final TimerComponent _bulletSpawner;
 
  @override
@@ -64,9 +70,6 @@ class Player extends SpriteAnimationComponent
  );
 
  position = game.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
 
  _bulletSpawner = TimerComponent(
  period: .2,
@@ -104,7 +107,10 @@ class Bullet extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Bullet({
  super.position,
- }) : super(size: Vector2(25, 50));
+ }) : super(
+ size: Vector2(25, 50),
+ anchor: Anchor.center,
+ );
 
  @override
  Future<void> onLoad() async {
@@ -118,10 +124,6 @@ class Bullet extends SpriteAnimationComponent
  textureSize: Vector2(8, 16),
  ),
  );
-
- width = 25;
- height = 50;
- anchor = Anchor.center;
  }
 
  @override

doc/tutorials/space_shooter/app/lib/step5/main.dart

@@ -59,6 +59,12 @@ class SpaceShooterGame extends FlameGame with PanDetector {
 
 class Player extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
+ Player()
+ : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  late final TimerComponent _bulletSpawner;
 
  @override
@@ -75,9 +81,6 @@ class Player extends SpriteAnimationComponent
  );
 
  position = game.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
 
  _bulletSpawner = TimerComponent(
  period: .2,
@@ -115,7 +118,10 @@ class Bullet extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Bullet({
  super.position,
- }) : super(size: Vector2(25, 50));
+ }) : super(
+ size: Vector2(25, 50),
+ anchor: Anchor.center,
+ );
 
  @override
  Future<void> onLoad() async {
@@ -129,10 +135,6 @@ class Bullet extends SpriteAnimationComponent
  textureSize: Vector2(8, 16),
  ),
  );
-
- width = 25;
- height = 50;
- anchor = Anchor.center;
  }
 
  @override
@@ -151,7 +153,10 @@ class Enemy extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Enemy({
  super.position,
- }) : super(size: Vector2.all(enemySize));
+ }) : super(
+ size: Vector2.all(enemySize),
+ anchor: Anchor.center,
+ );
 
  static const enemySize = 50.0;
 
@@ -167,10 +172,6 @@ class Enemy extends SpriteAnimationComponent
  textureSize: Vector2.all(16),
  ),
  );
-
- width = 50;
- height = 50;
- anchor = Anchor.center;
  }
 
  @override

doc/tutorials/space_shooter/app/lib/step6/main.dart

@@ -61,6 +61,12 @@ class SpaceShooterGame extends FlameGame
 
 class Player extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
+ Player()
+ : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  late final TimerComponent _bulletSpawner;
 
  @override
@@ -77,9 +83,6 @@ class Player extends SpriteAnimationComponent
  );
 
  position = game.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
 
  _bulletSpawner = TimerComponent(
  period: .2,
@@ -117,7 +120,10 @@ class Bullet extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Bullet({
  super.position,
- }) : super(size: Vector2(25, 50));
+ }) : super(
+ size: Vector2(25, 50),
+ anchor: Anchor.center,
+ );
 
  @override
  Future<void> onLoad() async {
@@ -132,10 +138,6 @@ class Bullet extends SpriteAnimationComponent
  ),
  );
 
- width = 25;
- height = 50;
- anchor = Anchor.center;
-
  add(RectangleHitbox());
  }
 
@@ -155,7 +157,10 @@ class Enemy extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame>, CollisionCallbacks {
  Enemy({
  super.position,
- }) : super(size: Vector2.all(enemySize));
+ }) : super(
+ size: Vector2.all(enemySize),
+ anchor: Anchor.center,
+ );
 
  static const enemySize = 50.0;
 
@@ -172,10 +177,6 @@ class Enemy extends SpriteAnimationComponent
  ),
  );
 
- width = 50;
- height = 50;
- anchor = Anchor.center;
-
  add(RectangleHitbox());
  }
 
@@ -209,7 +210,11 @@ class Explosion extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Explosion({
  super.position,
- }) : super(size: Vector2.all(150));
+ }) : super(
+ size: Vector2.all(150),
+ anchor: Anchor.center,
+ removeOnFinish: true,
+ );
 
  @override
  Future<void> onLoad() async {
@@ -224,8 +229,5 @@ class Explosion extends SpriteAnimationComponent
  loop: false,
  ),
  );
-
- anchor = Anchor.center;
- removeOnFinish = true;
  }
 }

doc/tutorials/space_shooter/step_2.md

@@ -147,16 +147,19 @@ our game a little bit:
 
 ```dart
 class Player extends SpriteComponent with HasGameRef<SpaceShooterGame> {
+
+ Player() : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  @override
  Future<void> onLoad() async {
  await super.onLoad();
 
  sprite = await gameRef.loadSprite('player-sprite.png');
 
  position = gameRef.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
  }
 
  void move(Vector2 delta) {

doc/tutorials/space_shooter/step_3.md

@@ -27,6 +27,12 @@ simple, take a look at how the component will look like now:
 ```dart
 class Player extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
+
+ Player() : super(
+ size: Vector2(100, 150),
+ anchor: Anchor.center,
+ );
+
  @override
  Future<void> onLoad() async {
  await super.onLoad();
@@ -41,9 +47,6 @@ class Player extends SpriteAnimationComponent
  );
 
  position = game.size / 2;
- width = 100;
- height = 150;
- anchor = Anchor.center;
  }
 
  // Other methods omitted

doc/tutorials/space_shooter/step_4.md

@@ -14,7 +14,10 @@ class Bullet extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Bullet({
  super.position,
- }) : super(size: Vector2(25, 50));
+ }) : super(
+ size: Vector2(25, 50),
+ anchor: Anchor.center,
+ );
 
  @override
  Future<void> onLoad() async {
@@ -28,10 +31,6 @@ class Bullet extends SpriteAnimationComponent
  textureSize: Vector2(8, 16),
  ),
  );
-
- width = 25;
- height = 50;
- anchor = Anchor.center;
  }
 }
 ```
@@ -48,7 +47,10 @@ class Bullet extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Bullet({
  super.position,
- }) : super(size: Vector2(25, 50));
+ }) : super(
+ size: Vector2(25, 50),
+ anchor: Anchor.center,
+ );
 
  @override
  Future<void> onLoad() async {

doc/tutorials/space_shooter/step_5.md

@@ -11,7 +11,11 @@ class Enemy extends SpriteAnimationComponent
 
  Enemy({
  super.position,
- }) : super(size: Vector2.all(enemySize));
+ }) : super(
+ size: Vector2.all(enemySize),
+ anchor: Anchor.center,
+ );
+
 
  static const enemySize = 50.0;
 
@@ -27,10 +31,6 @@ class Enemy extends SpriteAnimationComponent
  textureSize: Vector2.all(16),
  ),
  );
-
- width = 50;
- height = 50;
- anchor = Anchor.center;
  }
 
  @override

doc/tutorials/space_shooter/step_6.md

@@ -84,7 +84,12 @@ class Explosion extends SpriteAnimationComponent
  with HasGameReference<SpaceShooterGame> {
  Explosion({
  super.position,
- }) : super(size: Vector2.all(150));
+ }) : super(
+ size: Vector2.all(150),
+ anchor: Anchor.center,
+ removeOnFinish: true,
+ );
+
 
  @override
  Future<void> onLoad() async {
@@ -99,16 +104,13 @@ class Explosion extends SpriteAnimationComponent
  loop: false,
  ),
  );
-
- anchor = Anchor.center;
- removeOnFinish = true;
  }
 }
 ```
 
 There is not much new in it, the biggest difference compared to the other animation components is
 that we are passing `loop: false` in the `SpriteAnimationData.sequenced` constructor and that we are
-setting `removeOnFinish = true;`. We do that so that when the animation is finished, it will
+setting `removeOnFinish: true;`. We do that so that when the animation is finished, it will
 automatically be removed from the game!
 
 And finally, we make a small change in the `onCollisionStart` method from the `Enemy` class