A Classic Ping-Pong Game in Flutter

During the Google I/O event 2022, Flutter team announced the Casual Games Toolkit, to pull together new and existing resources that enable us to speed up the development of casual games. Building a game is always fascinating. So, today we will see how we can build different components in flutter and combine them together to build a game using the Flame Engine.

The concept of this game is that there is a ball and paddles. The ball will move freely on the canvas and the paddle will move only in 2 directions i.e., left or right. Once the ball hits the paddle it will rebound.

Flutter

Flutter is an open-source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
Since Flutter can render UI at up to 60 FPS, we will use this capability to build a simple game using the flame engine.

Flame Game Engine

Flame is an open-source game engine built on top of Flutter - that provides various game development tools such as input, images, sprites, animations, and collision detection to create 2-D games.

Prerequisites

• Flutter, version 2.10.0 or above;
• Visual Studio Code, or any other IDE, for example, Android Studio;
• Git, in order to save your project on GitHub/GitLab.

Getting Started

This game comprises 2 playing modes i.e., Single-player, and Multi-player.
There are four main tasks of the game:

• Background: A field for playing the game.
• Ball: A circular component which will move on the canvas.
• Paddle: A rectangular component to hit the ball.
• Score: A text component to keep track of the points.

Package Dependency

To get started with Flame, you need to install the package. In your pubspec.yaml file, add the dependency as shown below:

dependencies:
  flame: ^1.3.0

Flame Game Loop

The first component that we will set up is the flame game loop. All other components will be created and managed from here.

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
  }
}

• onLoad: This method loads the background, ball, paddle, and score for our game and registers them for the action.
• When a game is added to a Flutter widget tree the following lifecycle methods will be called in order: onGameResize, onLoad, and onMount. After that, it invokes update and render back and forth every time until the widget is removed from the tree.

To render the game we have to use GameWidget, which takes the instance of the FlameGame.

void main() {
  final game = MyGame();
  runApp(
    GameWidget(game: game),
  );
}

• GameWidget: It is a Flutter Widget that is used to insert a Game inside the Flutter widget tree.

Creating Background

To add a background to the screen we will draw a rectangle using the render() method.

Paint back = Paint()..color = const Color(0xff001122);
Paint front = Paint()..color = Colors.white..strokeWidth = 4.0;

@override
  void onGameResize(Vector2 size) {
    rect = Vector2.zero() & gameRef.size;
    super.onGameResize(size);
  }

@override
  void render(Canvas canvas) {
    canvas.drawRect(rect, back);
    canvas.drawRect(rect, front);
  }

• gameRef: It is a getter provided by the mixin HasGameRef, it provides the instance of the current game.
• onGameResize(): It is used to set the position of the component based on the screen size. This method is called before the component is rendered.
• render(): This method is used to draw the components, to accomplish this it provides a Canvas object that offers a wide range of methods to generate content on the screen.

Creating Ball

To create a ball we will use Circle Component. It requires the radius and the colour of the component.

CircleComponent()
  ..radius = 25
  ..setColor(Colors.green);

@override
  void update(dt) {
    super.update(dt);
    position += velocity * dt;
  }

• update(): This method is used to change the state of the game and its component. The update method provides a parameter that contains the delta of milliseconds since the last build.

Now we will use the MoveByEffect method to move the ball, It requires the offset and the controller.

MoveByEffect move(double x, double y) {
  return MoveByEffect(
    Vector2(x, y),
    EffectController(
      duration: 5,
      curve: Curves.linear,
    ),
  );
}

Collision detection is needed to detect and act upon two components intersecting each other. Collision detection systems use HitBoxes to create bounding boxes of the components.
To make the ball collide we will use CircleHitbox and add the ScreenHitbox Component which represents the edges of the screen.

Collision Detection

@override
void onCollisionStart(Set<Vector2> intersectionPoints, PositionComponent other) {
  super.onCollisionStart(intersectionPoints, other);
  if (other is ScreenHitbox) {
    final collision = intersectionPoints.first;
    if (collision.x == 0) speed.x = -speed.x;
    if (collision.y == 0) speed.y = -speed.y;
    if (collision.x == gameRef.size.x) speed.x = -speed.x;
    if (collision.y == gameRef.size.y) speed.y = -speed.y;
  }
}

As soon as the Ball hits the edge of the screen the intersection points will be provided by the callback, and based on these intersection points we will revert back the ball.
HasCollisionDetection is a mixin used to keep track of the components that can collide.

Creating Paddle

To create a paddle we will use RectangleComponent. It requires the position and the size of the component.

RectangleComponent()
  ..position = Vector2(gameRef.size[0] / 2, gameRef.size[1] / 1.1);
  ..size = Vector2(gameRef.size[0] / 4, gameRef.size[1] / 64);

We will detect collision with the paddle by using RectangleHitbox.

@override
void onCollisionStart(Set<Vector2> intersectionPoints, PositionComponent other) {
  super.onCollisionStart(intersectionPoints, other);
  if (other is Paddle) {
    speed.x = -speed.x;
    speed.y = -speed.y;
  }
}

As soon as the ball hits the paddle the intersection points will be provided by the callback, and we will change the direction of the ball by changing its coordinate points.
After that, we can add the movement in the Paddle with the help of keyboard keys and add the keyboard events to the game, so with the ArrowLeft key the paddle will move to the left and with the ArrowRight key, the paddle will move to the right.

@override
KeyEventResult onKeyEvent(
    RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) {
  final isKeyDown = event is RawKeyDownEvent;
  if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
    velocity.x = isKeyDown ? -1 : 0;
  } else if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
    velocity.x = isKeyDown ? 1 : 0;
  }
  return super.onKeyEvent(event, keysPressed);
}

Building Points System

At last, Let's build the point system with the help of Text Component which requires a text and text-renderer.

TextComponent()
  ..text = score
  ..paint = TextPaint(
  style: const TextStyle(
    fontSize: 60,
    color: Colors.green,
    fontWeight: FontWeight.w900,
  ),
)

Currently, the Game supports mobile and web platforms. In the case of the web, there are two game modes i.e., single-player and multi-player. The movement of the bat can be handled by the keyboard keys. In the case of mobile, there is only a single-player mode and the movement of the bat can be handled by the swipe left, swipe right gesture.

Playing Instructions

• Press 1: For a single-player game. Use ArrowLeft and ArrowRight keys for playing.
  
• Press 2: For a multiplayer game. Player 1 can use W, and S keys and Player 2 can use ArrowUp and ArrowDown keys.
  
• Press Space: For replaying the game.
  
• Press Enter: For the main menu or the switching the game mode.

Play the Live Game 🕹
Here is the Source Code 🔗

That's it… We have completed our game using flutter-flame-engine. HAPPY GAMING :)