Create a Breakout Game With Flame and Forge2D – Part 3

Rendering the Brick Wall

Rendering the brick wall has two components: the rainbow of colors used to color the wall and the painting of each brick. The brick wall handles creating the bricks making up the wall. The brick wall will maintain the list of colors for the wall and assign each brick an appropriate color. Each brick will be responsible for rendering itself with its assigned color.

Start by opening brick.dart and add the following import:

import 'package:flame/components.dart';

Next, add a color property to Brick:

 final Size size;
 final Vector2 position;
 final Color color;

 Brick({
 required this.size,
 required this.position,
 required this.color,
 });

Then, add the following render method:

 @override
 void render(Canvas canvas) {
 if (body.fixtures.isEmpty) {
 return;
 }

 final rectangle = body.fixtures.first.shape as PolygonShape;

 final paint = Paint()
 ..color = color
 ..style = PaintingStyle.fill;

 canvas.drawRect(
 Rect.fromCenter(
 center: rectangle.centroid.toOffset(),
 width: size.width,
 height: size.height,
 ),
 paint);
 }

Notice the check to ensure a Fixture is on the brick body. We need this condition because the brick could be in the process of being destroyed when Forge2D calls the render method.

Next, open brick_wall.dart and add the following private method to generate an evenly dispersed set of colors.

 // Generate a set of colors for the bricks that span a range of colors.
 // This color generator creates a set of colors spaced across the
 // color spectrum.
 static const transparency = 1.0;
 static const saturation = 0.85;
 static const lightness = 0.5;

 List<Color> _colorSet(int count) => List<Color>.generate(
 count,
 (int index) => HSLColor.fromAHSL(
 transparency,
 index / count * 360.0,
 saturation,
 lightness,
 ).toColor(),
 growable: false,
 );

The _colorSet routine generates a set of colors by dividing the range of color hues evenly over the rows of bricks. This rainbow of colors is reminiscent of the Atari Breakout game.

Now, add a private local variable after the BrickWall constructor to store the colors.

 late final List<Color> _colors;

Modify the onLoad method to create the color set.

 @override
 Future<void> onLoad() async {
 _colors = _colorSet(rows);
 await _buildWall();
 }

Finally, update the call to Brick to include the assigned color for the brick in the _buildWall function.

 await add(Brick(
 size: brickSize,
 position: brickPosition,
 color: _colors[i],
 ));

Build and run the project.

Congratulations! You’ve created a Breakout game using Flutter, Flame and Forge2D.

Where to Go From Here?

Download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

The Breakout game you created is the bare minimum functionality for a game. Tweaking and fine-tuning a game can make your game more challenging. Here are some ideas:

• Add collision detection code to keep the ball’s velocity within a range that makes the game challenging.
• Add levels to the game with parameters that make each successive level more difficult.
• Add scoring to the game by assigning values to the bricks.
• Add a timer to the game.

You can make many additions to take your Breakout game to the next level. Be creative and let your imagination be your guide!