# A Classic Ping-Pong Game in Flutter

During the Google I/O event 2022, Flutter team announced the [Casual Games Toolkit](http://flutter.dev/games), 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**.<br>

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](https://flutter.dev/) is an open-source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.<br>
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](https://pub.dev/packages/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](https://docs.flutter.dev/get-started/install), version 2.10.0 or above;
- [Visual Studio Code](https://code.visualstudio.com/download), or any other IDE, for example, Android Studio;
- [Git](https://git-scm.com/downloads), in order to save your project on GitHub/GitLab.

## Getting Started
This game comprises 2 playing modes i.e., *Single-player*, and *Multi-player*.<br>
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:

```yaml
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.

```dart
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`**.

```dart
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.

```dart
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.

![Field](https://cdn.hashnode.com/res/hashnode/image/upload/v1663138399821/AV7yoWYR3.png align="left")

## Creating Ball

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

```dart
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.

![Ball](https://cdn.hashnode.com/res/hashnode/image/upload/v1663138438688/QwMbr3mBJ.png align="left")

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

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

### Collision Detection

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.<br>
To make the ball collide we will use **CircleHitbox** and add the **ScreenHitbox** Component which represents the edges of the screen.

```dart
@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.<br>
**`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.

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

![Paddle](https://cdn.hashnode.com/res/hashnode/image/upload/v1663138484440/f0vRVd3Ac.png align="left")

We will detect collision with the paddle by using **RectangleHitbox**.

```dart
@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.<br>
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.

```dart
@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.

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

![Score](https://cdn.hashnode.com/res/hashnode/image/upload/v1663138522307/MH5gLc6Tx.png align="left")

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.<br>
- **Press 2**: For a multiplayer game. Player 1 can use **W**, and **S** keys and Player 2 can use **ArrowUp** and **ArrowDown** keys.<br>
- **Press Space**: For replaying the game.<br>
- **Press Enter**: For the main menu or the switching the game mode.

Play the [Live Game 🕹](https://flutter-ballgame.netlify.app)<br>
Here is the [Source Code 🔗](https://github.com/JeevanGeek/ball_collision.git)

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