> Game-making Tutorial with Flutter and Flame Series: Part 1

Why create a mobile game? Most people would agree that games are fascinating pieces of software. These people, including myself, have played lots of games and discovered a different world or reality in-game. Games can range from having simple and linear gameplay to really complex involving 3D, almost real physics engines, realistic graphics, procedurally generated worlds, and storylines that adapt to the player’s choices.

![](https://jap.alekhin.io/wp-content/uploads/2019/02/create-mobile-game-flutter-flame.jpg)

Some people want to take things further and create their own games. If you belong to this category, this article should be a sufficient tutorial to get you started. **This tutorial will be focusing more on concept** instead of actually making a polished or release-ready game.

If you find something confusing at any step, please feel free to [send me an email](https://jap.alekhin.io/contact) or [join my Discord server](https://discord.gg/SNvNfas).

# Requirements (and Assumptions)

This article will assume **you already are a developer** and have a solid grasp of the concepts about developing software. If you’re totally new, that’s okay, this should be easy as long as you have an adequate amount of interest to go into game development.

You should also have **a decent enough computer** that can run an IDE, compile some code, and run an Android emulator. If your computer only has enough juice for the IDE and compiling the code, you can hook up an actual Android phone and run the app there while testing.

**Apps written in Flutter can be compiled and built for both Android and iOS**. This article will focus on developing for Android. Once you’re done though, you can just run a different version of the build command and you can play the game on iOS devices too.

In addition, you must have the following on your computer:

1. **Microsoft Visual Studio Code** – Any IDE or text editor will work if you know what you’re doing. If you’re a total beginner, stick to VS Code. [Download Visual Studio Code](https://code.visualstudio.com/) from their official website. It’s also important, though not required, to install the **_Flutter_** and **_Dart_** plugins for Visual Studio Code.

1. **Android SDK** – This is required for developing Android applications. [Download and install Android Studio](https://developer.android.com/studio/#downloads) to install everything needed to develop Android apps. If you don’t want to install the whole Android Studio and only interested in the SDK, scroll down to the **_Command line tools only_** section of the download page.

1. **Flutter SDK/Framework** – This and the Flame plugin is what we’ll be using to develop the game. Use [**_this official guide from Flutter_**](https://flutter.io/docs/get-started) to set your box up. Make sure you follow the instructions up to the **_Test Drive Part_**.

# Let’s Create a Mobile Game!

We’ll start off simple. **Really simple**. Our game will consist of a black screen with a white box in the middle. You click the box, it changes color to green and you win the game!

We won’t be using any external graphics (image files) for this game.

_All the code for this tutorial is available for viewing and download on [**this GitHub repository**](https://github.com/japalekhin/boxgame)_.

## Step 1: Set up a Flutter application

Open up a terminal (command line interface) and navigate to your projects directory. Once there, type the following command:

```
$ flutter create boxgame
```

This command uses the Flutter command line tool to initialize and bootstrap a basic mobile application for you.

You can choose any name other than `boxgame` if you want. Just make sure to replace all instances of `boxgame` with whatever you used as you follow along.

From this point, you can either open the generated `boxgame` folder in Visual Studio Code or immediately run your app using the following commands:

```
$ cd boxgame
$ flutter run
```

It might take a while the first time you run your newly created app. When the mobile app runs, you should see something like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/flutter-flame-boxgame-first-run-1024x1024.jpg)

_**Note**: You need to have an emulator running or an actual Android device plugged in to your computer with USB Debugging enabled._

[**_View the code at this step on GitHub_**](https://github.com/japalekhin/boxgame/tree/e944d8fcf858673b202a1164a650527938003003).

## Step 2: Install the Flame plugin (and Clean the Project)

_**Note**: From here on out, we’ll be referring to the project directory as `./`. If your box game project is in `/home/awesomeguy/boxgame`, `./lib/main.dart` refers to the file at `/home/awesomeguy/boxgame/lib/main.dart`_.

Fire up Visual Studio Code and open the `boxgame` directory created from the previous step.

Since we will be using the simple yet powerful Flame plugin, we need to add this to the list of Dart Packages that our app will rely on. On the left-hand side of the IDE, you’ll see a list of the files in your project folder. Open up `./pubspec.yaml` and add the following line just below the `cupertino_icons` line under dependencies (mind the indentation).

```
flame: ^0.10.2
```

You should have something that looks like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/flame-plugin.jpg)

If you are using Visual Studio Code, the IDE will automatically install the plugin for you upon saving the file.

You can do it manually by opening up the terminal, navigating to the project folder, and running `flutter packages get`.

The next step is cleaning up the main code by discarding everything that Flutter set us up with, in the `./lib/main.dart` file and replacing it with an empty program.

The empty program is just one line: `void main() {}`. One thing you’ll notice is we left the `import` statement at the top. We will be using the `material` library when we run the `runApp` method later when starting the game. You should now have something that looks like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/scaffold-cleanup.jpg)

Another thing is that the file inside the `./test` folder is showing an error. If you’re not using Visual Studio Code, this probably won’t show but your app will not run. Testing (and test-driven development) is outside the scope of this tutorial so to **_fix this, just delete the whole `test` folder_**.

![](https://jap.alekhin.io/wp-content/uploads/2019/02/error.jpg)

[**_View the code at this step on GitHub_**](https://github.com/japalekhin/boxgame/tree/c33321ea4ec7910e1335f4e0ff69e830d03da188).

## Step 3: Set up the game loop

Now we’re going to set up the game loop…

> But what is the game loop?

The game loop is the meat of the game. **A set of instructions that the computer runs over and over again**.

Games usually have this metric called an **FPS**. It stands for frames per second. It means that if your game is running at 60 fps, the computer is running your game loop 60 times per second.

**To put it simply**: One frame = one run of your game loop.

A basic game loop is made up of two parts, an `update` and a `render`.

![](https://jap.alekhin.io/wp-content/uploads/2019/02/game-loop.png)

The **update** part handles the movements of objects (like characters, enemies, obstacles, the map itself) and other things that need to be updated (for example a timer). Most of the action happens here. For example, calculating if the enemy was hit by a bullet or calculating if an enemy touches the main character. Main characters don’t usually like that.

The **render** part draws all the objects on the screen. This is a separate process so that everything is synchronized.

### Why the need to synchronize?

Imagine if you update the main character’s position. He’s fine so you render him unharmed.

But, there’s a bullet just a couple of pixels away though. You update the bullet and it hits your character. Now he’s dead so you don’t draw the bullet. By this time you should have drawn the first frame of the character’s dying animation.

In the next cycle, you skip updating the character since he’s dead. You instead render the first frame of his dying animation (instead of the second frame).

This will give your game a jerky kind of feel to it. Imagine playing a shooting game, where you shoot an enemy, he doesn’t fall down, you shoot again but before the bullet hits him he dies. The jerky performance of non-synchronized rendering may not be noticeable (especially when running 60 frames per second), but **if this happens too often the game just feels unfinished**.

**You want everything calculated** and when the states of all objects are calculated and finalized, **only then will the screen be drawn**.

### Using Flame

Flame already has code that handles the scaffolding for these so we only need to worry about writing the actual update and render processes.

But first, there are two things that our app needs to be transformed into a game. One is to be full screen, the other is to be locked at portrait mode.

Flame also provides utility functions for these. So let’s just add them to our code. The following lines go to the top of the file:

```
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
```

Then inside the `main` function, create an instance of Flame’s `Util` class. Next, call the `fullscreen` and `setOrientation` functions of this the instance you just created making sure to `await` them since these functions return a `Future`.

```
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
```

_**Note**: Futures, async, and await are coding practices that allow you to “wait” for a long process to finish on a different thread without blocking the main thread. If you are interested in learning about them, you can read [**this page from the Dart’s official website**](https://www.dartlang.org/tutorials/language/futures)_.

To be able to await Futures, the context must be inside an asynchronous function. So let’s convert the main function so it becomes an asynchronous function.

```
void main() async {
```

Finally, you should have something that looks like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/utils.jpg)

To utilize the game loop scaffolding provided by the Flame plugin, we must create a subclass of Flame’s `Game` class. To do this, create a new file under `./lib` and name it `box-game.dart`.

Then we’ll write a class named `BoxGame` (you can use any if you know how classes work) that extends Flame’s `Game` class.

```
import 'dart:ui';

import 'package:flame/game.dart';

class BoxGame extends Game {
  void render(Canvas canvas) {
    // TODO: implement render
  }

  void update(double t) {
    // TODO: implement update
  }
}
```

**That’s the whole class**. For now.

Let’s break it down: We import Dart’s `ui` library so we can use the `Canvas` class and later the `Size` class. Then we import Flame’s `game` library which includes the `Game` class which we are extending. Everything else is a class definition with two methods: `update` and `render`. These methods override the parent class’ (also known as a superclass) methods of the same name.

_**Note**: The `@override` annotation is optional in Dart 2, in case you were looking for it. The `new` keyword is also optional so we won’t be using that either_.

The next step is to create an instance of this `BoxGame` class and pass its `widget` property to `runApp`.

Let’s go back to `./lib/main.dart` and insert the following line at the very top of the file:

```
import 'package:boxgame/box-game.dart';
```

That line makes sure that the `BoxGame` class can be used in main.dart. Next, make an instance of the `BoxGame` class and pass its `widget` property to the `runApp` function. Insert the following lines at the end of the `main` function (just above the closing brace `}`).

```
BoxGame game = BoxGame();
runApp(game.widget);
```

**Now our mobile app is a game!**

If you run the game though, you’ll just see a blank/black screen since nothing is being drawn on the screen yet.

Your `main.dart` file should look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/game-loop.jpg)

[**_View the code at this step on GitHub_**](https://github.com/japalekhin/boxgame/tree/72f5beb2113cd1dc569e6dade6293bfca7108c63).

## Step 4: Draw the screen

Before being able to draw on the screen, we must know the size of the screen in advance. **Flutter uses logical pixels** when drawing on the screen so you don’t have to worry about sizing your game objects. For now.

**An inch of the device contains about 96 logical pixels**. So let’s say we’re targeting phones as our release platform. Most modern and mainstream phones are about the same size so again, because our game is so simple, we don’t have to worry about sizing.

Flame builds upon this sizing system and the `Game` class actually has a `resize` function that we can override. This function accepts a `Size` parameter and we can determine the size of the screen (in logical pixels) from this parameter.

First, let’s declare a variable in the class level. This variable (also known as an instance variable) will hold the size of the screen and will be **updated only when the screen changes size** (should only happen once for our game). This will also be the basis when drawing objects on the screen. The type of this variable should be `Size`. The same as what gets passed to the `resize` function.

```
class BoxGame extends Game {
  Size screenSize;
```

The `screenSize` variable will be initialized having a value of `null`. This will be helpful when checking if we know the size of the screen during rendering. More on this later.

Next, let’s add in an override for the `resize` function in `./lib/box-game.dart`.

```
void resize(Size size) {
  screenSize = size;
  super.resize(size);
}
```

_**Note**: The resize function for the superclass is actually empty, but it’s a good idea to call the super function of the one we’re overriding. Unless we fully want to override the function. Let’s leave it there for now_.

_**Note 2**: Instance variables are variables that are accessible from all methods/function of the class. For example, you can set it on `resize` then get its value on `render`_.

Your code should look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/resize.jpg)

### The canvas and the background

Now that the game loop is established, we can start drawing. We’ll leave the update function empty since we won’t really be updating anything.

Inside the render function, we have access to a `Canvas`. This canvas is already prepared and provided to us by Flame. `Canvas` is very much like an actual painting canvas that you can paint on. After we draw our game graphics (rectangles for now) on the canvas, Flame takes it and draws the whole canvas onto the screen.

When drawing on the canvas, **always draw the bottom-most objects** (like the background) first. Subsequent draw methods will draw on top of whatever is already on the canvas.

First, we draw the background. The background will just be a black screen. So we draw that first using the following code:

```
Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
Paint bgPaint = Paint();
bgPaint.color = Color(0xff000000);
canvas.drawRect(bgRect, bgPaint);
```

Let’s break it down: The first line declares a `Rect`angle that is as big as the screen where the *L*eft and *T*op are at `0, 0` (upper-left corner of the screen).

Then the second line declares a `Paint` object followed by a line that assigns a `Color` to it. The color format is `0xaarrggbb` which stands for Alpha (opacity), Red, Green, and Blue values. Fully opaque white is `0xffffffff` and fully opaque black is `0xff000000`. More on declaring colors later.

The last line draws a rectangle on the `Canvas` using the `Rect` and `Paint` instances defined on the previous lines.

### Try it out!

Try to run your game, you should see a black screen. Flutter has this nifty little feature called hot-reload. It means that while your app is running, most changes you make on the source code will be reflected in the running app. Almost instantly!

Try experimenting with different values for the color to check it out.

### Draw the target box

Next, we draw the target box at the center of the screen.

```
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
Rect boxRect = Rect.fromLTWH(
  screenCenterX - 75,
  screenCenterY - 75,
  150,
  150
);
Paint boxPaint = Paint();
boxPaint.color = Color(0xffffffff);
canvas.drawRect(boxRect, boxPaint);
```

Let’s break it down again: The first two lines declare variables that will hold the screen’s center coordinates. The values they get assigned are half the screen size. `double` is Dart’s data type for non-integer numbers.

The next six lines just declare a rectangle that is 150 by 150 pixels (logical) in size with its origin (upper-left corner) in the center of the screen but offset by 75 pixels to the left and 75 pixels towards the top.

_**Note**: The statement is spread out vertically to six lines since writing the whole statement in one line will make it less readable_.

The rest of the code is the same as drawing the background. The `render` function should now look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/draw-screen.jpg)

When you run the game, you see something that looks like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/run-draw-screen-1024x1024.jpg)

[**_View the code at this step on GitHub_**](https://github.com/japalekhin/boxgame/tree/ba79dd605410dd88ec6e930df2d542aedcf60c03).

## Step 5: Handle input and the WIN condition

We’re almost done! We just need to accept player input. First, we need Flutter’s gestures library so let’s import that. Add the following line into the top of the game class file (`./lib/box-game.dart`) where all the other imports are.

```
import 'package:flutter/gestures.dart';
```

Then add a handler function for taps using the following code:

```
void onTapDown(TapDownDetails d) {
  // handle taps here
}
```

Then in `./lib/main.dart`, let’s register a `GestureRecognizer` and link its `onTapDown` event to our game’s `onTopDown` handler. Remember we have to import Flutter’s gestures library at the top so we can use the `GestureRecognizer` class in this file too.

```
import 'package:flutter/gestures.dart';
```

Then inside the `main` function, just below the `BoxGame` declaration, declare a `TapGestureRecognizer` and assign its `onTapDown` event to the game’s `onTapDown` handler. Finally, after the `runApp` line, register the gesture recognizer using Flame Util’s `addGestureRecognizer` function.

You should have a block of code that looks like this:

```
BoxGame game = BoxGame();
TapGestureRecognizer tapper = TapGestureRecognizer();
tapper.onTapDown = game.onTapDown;
runApp(game.widget);
flameUtil.addGestureRecognizer(tapper);
```

The whole `./lib/main.dart` file should look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/gestures.jpg)

Let’s go back to the game class (`./lib/box-game.dart`).

In preparation for winning the game, let’s add another instance variable that will determine if the player has won the game or not. A simple `bool`ean variable with a default value of `false` will do. Put this below the `screenSize` declaration:

```
bool hasWon = false;
```

Then on the `render` function, let’s write a condition that will assign green to `boxPaint`‘s color if the player has won already; white otherwise.

Replace the color assignment line with the following block:

```
if (hasWon) {
  boxPaint.color = Color(0xff00ff00);
} else {
  boxPaint.color = Color(0xffffffff);
}
```

The render function should now look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/win-box.jpg)

Now let’s handle the tap-down event (`onTapDown` function). Check if the player tapped inside the box. If the tap is inside flip the value of the hasWon variable into true.

```
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
if (d.globalPosition.dx >= screenCenterX - 75
  && d.globalPosition.dx <= screenCenterX + 75
  && d.globalPosition.dy >= screenCenterY - 75
  && d.globalPosition.dy <= screenCenterY + 75
) {
  hasWon = true;
}
```

Like the previous blocks of code, let’s break this one down: The first two lines (like drawing the box above) determine the coordinates of the screen’s center point.

The next five lines is a long if statement spread out vertically. It checks if the tap down point is inside the 150 by 150 logical pixels box that is centered on the screen.

If the tap is inside flip the value of the `hasWon` variable. This change is reflected the next time that `render` is called.

The final form of the `onTapDown` handler should look like this:

![](https://jap.alekhin.io/wp-content/uploads/2019/02/tap-down-handler.jpg)

[**_View the code at this step on GitHub_**](https://github.com/japalekhin/boxgame/tree/7c382c92080bd0a2a9c30f582fb2e01e07aa4d9e).

# Time to test the game!

Run your game and if you followed along, you should see something similar to the video below:

https://youtu.be/k4W0PmZGjX4

# Conclusion

> That’s a game right there. And you made it!

It may not be **the hit of the decade** but now you understand the concept of the game loop, drawing on the screen, and receiving input from the player. All games build upon these basic concepts. I hope you enjoyed learning how to create your own mobile game.

Feel free to drop a question in the comments section below if you have any.

**Feel free to drop a question in the comments section below if you have any**. You can also [send me an email](https://jap.alekhin.io/contact) or [join my Discord channel](https://discord.gg/SNvNfas).

# What’s next?

This is the introduction part of a series on how to develop or create a mobile game. The next parts of this series will build upon what we have discussed in this part and aim to build an actual playable and “shippable” game.

0. [Set up a playable game](https://steemit.com/development/@japalekhin/2d-casual-mobile-game-tutorial-step-by-step-with-flame-and-flutter-part-1-of-5)
0. Graphics and animation
0. Screens/views and dialog boxes
0. Scoring, storage, and sound
0. Finishing up and packaging