feat: added design background

lib/game/components/background.dart

@@ -0,0 +1,27 @@
+import 'package:flame/components.dart';
+import 'package:pinball/game/pinball_game.dart';
+import 'package:pinball/gen/assets.gen.dart';
+
+class Background extends Component with HasGameRef<PinballGame> {
+  static final Vector2 size = Vector2(120, 160);
+
+  Future<void> _loadSprite() async {
+    final sprite = await gameRef.loadSprite(
+      Assets.images.components.background.path,
+    );
+    final spriteComponent = SpriteComponent(
+      sprite: sprite,
+      size: size,
+      anchor: Anchor.center,
+    )..position = Vector2(0, -7.8);
+
+    await add(spriteComponent);
+  }
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    await _loadSprite();
+    priority = -1;
+  }
+}

lib/game/game_assets.dart

@@ -9,6 +9,7 @@ extension PinballGameAssetsX on PinballGame {
     await Future.wait([
       images.load(components.Assets.images.ball.keyName),
       images.load(Assets.images.components.flipper.path),
+      images.load(Assets.images.components.background.path),
       images.load(Assets.images.components.spaceship.androidTop.path),
       images.load(Assets.images.components.spaceship.androidBottom.path),
       images.load(Assets.images.components.spaceship.lower.path),

lib/game/pinball_game.dart

@@ -7,6 +7,7 @@ import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/flame/blueprint.dart';
+import 'package:pinball/game/components/background.dart';
 import 'package:pinball/game/game.dart';
 import 'package:pinball_theme/pinball_theme.dart';
 
@@ -48,8 +49,10 @@ class PinballGame extends Forge2DGame
 
     // Fix camera on the center of the board.
     camera
-      ..followVector2(Vector2.zero())
+      ..followVector2(Vector2(0, -7.8))
       ..zoom = size.y / 16;
+
+    unawaited(add(Background()));
   }
 
   void _addContactCallbacks() {

lib/gen/assets.gen.dart

@@ -3,6 +3,8 @@
 ///  FlutterGen
 /// *****************************************************
 
+// ignore_for_file: directives_ordering,unnecessary_import
+
 import 'package:flutter/widgets.dart';
 
 class $AssetsImagesGen {
@@ -15,8 +17,14 @@ class $AssetsImagesGen {
 class $AssetsImagesComponentsGen {
   const $AssetsImagesComponentsGen();
 
+  /// File path: assets/images/components/background.png
+  AssetGenImage get background =>
+      const AssetGenImage('assets/images/components/background.png');
+
+  /// File path: assets/images/components/flipper.png
   AssetGenImage get flipper =>
       const AssetGenImage('assets/images/components/flipper.png');
+
   $AssetsImagesComponentsSpaceshipGen get spaceship =>
       const $AssetsImagesComponentsSpaceshipGen();
 }
@@ -24,14 +32,23 @@ class $AssetsImagesComponentsGen {
 class $AssetsImagesComponentsSpaceshipGen {
   const $AssetsImagesComponentsSpaceshipGen();
 
+  /// File path: assets/images/components/spaceship/android-bottom.png
   AssetGenImage get androidBottom => const AssetGenImage(
       'assets/images/components/spaceship/android-bottom.png');
+
+  /// File path: assets/images/components/spaceship/android-top.png
   AssetGenImage get androidTop =>
       const AssetGenImage('assets/images/components/spaceship/android-top.png');
+
+  /// File path: assets/images/components/spaceship/lower.png
   AssetGenImage get lower =>
       const AssetGenImage('assets/images/components/spaceship/lower.png');
+
+  /// File path: assets/images/components/spaceship/saucer.png
   AssetGenImage get saucer =>
       const AssetGenImage('assets/images/components/spaceship/saucer.png');
+
+  /// File path: assets/images/components/spaceship/upper.png
   AssetGenImage get upper =>
       const AssetGenImage('assets/images/components/spaceship/upper.png');
 }