Recreating the famous T-Rex game with Flutter and Flame

Renan C. Araujo
Blue Fire
Published in
5 min readNov 7, 2018

--

⚠️ Disclaimer: this article was written a long time ago. Since then, both flame and flutter itself has changed a lot. Read more about Flame in the docs and see other examples here

First of all, if you have never heard about Flutter, I have got good news: You are about to meet one of the most flexible ways to create a user interface. So do not waste your time,

learn more about Flutter.

TL;DR: The app and its source code is available here

Since I discovered Flutter, I have seen so many examples of how further it is possible to reach with this framework UIwise. But how about creating a game?

Why?

Because.

The idea

So I got my things together and started to wonder how to make a game with Flutter and most importantly was what to do. Since I have no any experience in gamedev, I have chosen to not create a game from scratch, instead, porting a well known, open source and simple game from another platform. With this scenario, there is no better-suited game than the joy of our offline hours: Google Chrome’s TRex.

The classic chrome version

Disclaimer: I am not a game developer at all. I’ve never been even close to know how a game works, so let’s see what happens.

Seeking for source

There is this Github repository containing the Javascript source of the original implementation, as well the sprites. After a fast look into the source code, it is possible to understand how the game works afterall.

The sprite
Part of 'Runner' code

There is a “class” called Runner that controls the TRex, Horizon (where the clouds, horizon line, and obstacles are), game over overlay and the score indicator. All of that is updated in a game loop implemented through requestAnimationFrame.

Things like speed and acceleration are controlled by a delta time that indicates the timespan between updates. User interactions such as a click or touchstart triggers updates in some variables that will be used in the next update. Basically it is how the entire game works.

Let's Flutter that

Flame is the word. All the abstractions needed to make the implementation of the game loop, the effort to paint the objects into the canvas and the code to put a sprite into an object, all of that are implemented by Flame, a minimalistic 2d game engine.

The stage is set: we understood how TRex HTML5 works and we have half of our work done in Flutter by Flame.

Classes such as Horizon and TRex are easily portable to Flame’s concept of Component. Runner is our game. Methods such as Update and Draw that are present in some component have analogs in the Flame's side (Update and render).

The TRexGame class is our "Runner":

But the similarities stops there. The main differences between our and chrome’s implementation is the size of the viewport (x,y values were totally different), the possibility of changing the screen orientation and frame rate.
Those issues summoned a lot of bugs as I ported the game. Some of them are pretty funny:

Clouds underground
Geronimooooooooooo

In order to keep the same gameplay experience, we had to change some values such as gravity and initial jump velocity

The result

Well, that is not the final result yet. There is a lot of features to implement, but the journey until here has been so great and pleasant that I had to write about it, even before finish the game.

See the source code on Github or download the apk to test on your phone.

That is the list of things that we have to do yet:

  • Implement a scoring system
  • Make TRex duck
  • Put some pterodactyls flying there
  • Put some sounds

That is a preview running on my android phone, in landscape mode:

Conclusion

Making games is fun, however with flutter and flame, it is great!

The challenges are different than the ones we face in app development. It was very difficult even with the game’s code and gameplay ready. I simply cannot imagine how hard it is to make a game from scratch where ideas are popping all over your head.

After a year working with Flutter I've got to work with stuff that I've never imagined to be possible, like slivers and delegates. This time I wanted to push it a little bit further. When working with flame, you will interact with widgets and classes from the painting lib inside Flutter.

There is a lot of games being made with this couple (Flutter and Flame) already, one of them is Tales of a lost mine, the first big game made entirely with Flutter. See some of the gameplay:

The game still at development, you can download a demo at the play store.

Cheers!

--

--