Merge pull request #19 from VGVentures/feat/ball-placeholder-asset

feat: adding ball component placeholder asset

lib/game/components/ball.dart

@@ -1,23 +1,31 @@
+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);
-  }
+  })  : _position = position,
+        super(size: ballSize);
+
+  static final ballSize = Vector2.all(2);
 
   final Vector2 _position;
 
+  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: ballSize);
+  }
+
   @override
   Body createBody() {
-    final shape = CircleShape()..radius = 2;
+    final shape = CircleShape()..radius = ballSize.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,11 @@
+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

@@ -1,10 +1,14 @@
+import 'dart:async';
+
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:pinball/game/game.dart';
 
 class PinballGame extends Forge2DGame with FlameBloc {
   void spawnBall() {
-    add(Ball(position: ballStartingPosition));
+    add(
+      Ball(position: ballStartingPosition),
+    );
   }
 
   // TODO(erickzanardo): Change to the plumber position

lib/game/view/pinball_game_page.dart

@@ -23,9 +23,26 @@ class PinballGamePage extends StatelessWidget {
   }
 }
 
-class PinballGameView extends StatelessWidget {
+class PinballGameView extends StatefulWidget {
   const PinballGameView({Key? key}) : super(key: key);
 
+  @override
+  State<PinballGameView> createState() => _PinballGameViewState();
+}
+
+class _PinballGameViewState extends State<PinballGameView> {
+  late PinballGame _game;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // TODO(erickzanardo): Revisit this when we start to have more assets
+    // this could expose a Stream (maybe even a cubit?) so we could show the
+    // the loading progress with some fancy widgets.
+    _game = PinballGame()..preLoadAssets();
+  }
+
   @override
   Widget build(BuildContext context) {
     return BlocListener<GameBloc, GameState>(
@@ -39,7 +56,7 @@ class PinballGameView extends StatelessWidget {
           );
         }
       },
-      child: GameWidget<PinballGame>(game: PinballGame()),
+      child: GameWidget<PinballGame>(game: _game),
     );
   }
 }

pubspec.lock

@@ -140,21 +140,21 @@ packages:
       name: flame
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-releasecandidate.1"
+    version: "1.1.0-releasecandidate.2"
   flame_bloc:
     dependency: "direct main"
     description:
       name: flame_bloc
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-releasecandidate.1"
+    version: "1.2.0-releasecandidate.2"
   flame_forge2d:
     dependency: "direct main"
     description:
       name: flame_forge2d
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.9.0-releasecandidate.1"
+    version: "0.9.0-releasecandidate.2"
   flame_test:
     dependency: "direct dev"
     description:

pubspec.yaml

@@ -9,9 +9,9 @@ environment:
 dependencies:
   bloc: ^8.0.2
   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: ^1.1.0-releasecandidate.2
+  flame_bloc: ^1.2.0-releasecandidate.2
+  flame_forge2d: ^0.9.0-releasecandidate.2
   flutter:
     sdk: flutter
   flutter_bloc: ^8.0.1
@@ -33,3 +33,6 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   generate: true
+
+  assets:
+    - assets/images/components/

test/game/components/ball_test.dart

@@ -79,7 +79,7 @@ void main() {
 
           final fixture = ball.body.fixtures[0];
           expect(fixture.shape.shapeType, equals(ShapeType.circle));
-          expect(fixture.shape.radius, equals(2));
+          expect(fixture.shape.radius, equals(1));
         },
       );
     });