feat: adding placeholder sprite for the ball component

lib/game/components/ball.dart

@@ -1,23 +1,32 @@
+import 'package:flame/components.dart';
 import 'package:flame_bloc/flame_bloc.dart';
-import 'package:flame_forge2d/body_component.dart';
-import 'package:flutter/material.dart';
-import 'package:forge2d/forge2d.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/game/game.dart';
 
-class Ball extends BodyComponent<PinballGame>
+class Ball extends PositionBodyComponent<PinballGame, SpriteComponent>
     with BlocComponent<GameBloc, GameState> {
   Ball({
     required Vector2 position,
-  }) : _position = position {
-    // TODO(alestiago): Use asset instead of color when provided.
-    paint = Paint()..color = const Color(0xFFFFFFFF);
-  }
+    required Vector2 size,
+  })  : _position = position,
+        _size = size,
+        super(size: size);
 
   final Vector2 _position;
+  final Vector2 _size;
+
+  static const spritePath = 'components/ball.png';
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+    final sprite = await gameRef.loadSprite(spritePath);
+    positionComponent = SpriteComponent(sprite: sprite, size: _size);
+  }
 
   @override
   Body createBody() {
-    final shape = CircleShape()..radius = 2;
+    final shape = CircleShape()..radius = _size.x / 2;
 
     final fixtureDef = FixtureDef(shape)..density = 1;
 

lib/game/game.dart

@@ -1,4 +1,5 @@
 export 'bloc/game_bloc.dart';
 export 'components/components.dart';
+export 'game_assets.dart';
 export 'pinball_game.dart';
 export 'view/view.dart';

lib/game/game_assets.dart

@@ -0,0 +1,12 @@
+import 'package:pinball/game/game.dart';
+
+/// Add methods to help loading and caching game assets
+extension PinballGameAssetsX on PinballGame {
+
+  /// Pre load the initial assets of the game
+  Future<void> preLoadAssets() async {
+    await Future.wait([
+      images.load(Ball.spritePath),
+    ]);
+  }
+}

lib/game/pinball_game.dart

@@ -4,7 +4,12 @@ import 'package:pinball/game/game.dart';
 
 class PinballGame extends Forge2DGame with FlameBloc {
   void spawnBall() {
-    add(Ball(position: ballStartingPosition));
+    add(
+      Ball(
+        position: ballStartingPosition,
+        size: Vector2.all(4),
+      ),
+    );
   }
 
   // TODO(erickzanardo): Change to the plumber position
@@ -18,6 +23,8 @@ class PinballGame extends Forge2DGame with FlameBloc {
 
   @override
   Future<void> onLoad() async {
+    await preLoadAssets();
+
     addContactCallback(BallScorePointsCallback());
 
     await add(BottomWall(this));

pubspec.lock

@@ -151,9 +151,11 @@ packages:
   flame_forge2d:
     dependency: "direct main"
     description:
-      name: flame_forge2d
-      url: "https://pub.dartlang.org"
-    source: hosted
+      path: "packages/flame_forge2d"
+      ref: "erick.fix_position_body_component_on_mount"
+      resolved-ref: cccdfe0054743400ad4262aecac54f89e43be944
+      url: "git@github.com:flame-engine/flame.git"
+    source: git
     version: "0.9.0-releasecandidate.1"
   flame_test:
     dependency: "direct dev"

pubspec.yaml

@@ -11,7 +11,11 @@ dependencies:
   equatable: ^2.0.3
   flame: ^1.1.0-releasecandidate.1
   flame_bloc: ^1.2.0-releasecandidate.1
-  flame_forge2d: ^0.9.0-releasecandidate.1
+  flame_forge2d:
+    git:
+      url: git@github.com:flame-engine/flame.git
+      path: packages/flame_forge2d
+      ref: erick.fix_position_body_component_on_mount
   flutter:
     sdk: flutter
   flutter_bloc: ^8.0.1
@@ -33,3 +37,6 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   generate: true
+
+  assets:
+    - assets/images/components/