Flutter + Flame: An Introduction To Making Games With Flutter
This sounds too good to be true, right? What if I told you it’s not. Don’t believe me? Stick around and you shall see.
Intro
Let’s start with the real question here, why would someone want to make games in Flutter? There are a lot of mature game engines like Unity, Unreal Engine, Godot, and others that do this job pretty well, so why would someone want to build a game in Flutter?
I’ll get straight to the point, you will not be able to make AAA games in Flutter (at least not for now) but you can build nice 2D games with great performance and all that good stuff while using your favorite programming language, Dart. So to answer the question, it's just for the fun or potentially to reach a huge audience on all platforms, it depends on how serious you are.
You’ll be able to export the game for all platforms like any other Flutter app that you built. Flame has had its stable release (v.1.0.0) and is ready for production apps. They offer a 2D game engine alongside 2D physics, audio, animations, and many more (be aware that not all components are yet production-ready, check details here).
Getting to know Flame
My experience so far while creating my first game is just amazing and confusing at the same time. Flame has its widgets called components that are like Flutter widgets so switching back and forth to know what to use when and where can be a hassle.
That being said, this doesn’t mean that they are interchangeable and you can’t put a Flame Component directly inside a Flutter tree or vice versa! To put a Flame component into the Flutter widget tree, we must use a ‘bridging’ widget called GameWidget.
All I can say is, well it's different! You sometimes need to break the rules and follow your gut feeling and other times you just need to refactor what you did. It's still new and uncharted territory so we need some time to get used to it! But man oh man, the development is blazing fast just like with developing a normal app (especially if I compare it to Unity or Unreal which are much slower).
I built a simple balloon popper game with a background image, different balloon types, background music, balloon pop effects, and scores in less than a day with zero experience with Flames engine. (PS. sorry for the Peppa Pig theme, I made this game for my son). If you are interested in how the code looks, see it for yourself here.
The challenges
One of the challenges that I had while building this game was to try not to think as a Flutter developer but to think as a hybrid game/app developer.
Adding a background was quite easy, you just need to use a sprite component, set its size and priority so it will not be in front of other elements but it took me some time to figure out the proper image sizing and positioning.
Using Flames Bloc implementation on the other side was quite different and it felt hacky. When using Flutter Bloc you can provide the cubit/bloc using the BlocProvider which is the same for Flames Bloc.
When using the cubit/bloc the reference is got through calling the context.read() method in a widget while in Flame it needs to have a reference to the FlameBlocGame (in a component this is achieved by extending the HasGameRef mixin).
Listening to changes requires extending the mixin BlocComponent and overriding the onNewState method which is called once the state changes.
Flame has good documentation and examples on GitHub I just wish that it would focus more on newcomers rather than seasoned people that were there from the beginning. All in all, it was a pleasant experience and I believe that Flutter and Flame have a bright future!
In the next article, I’ll be focusing on how to create a Flappy Bird clone in Flame.
Thanks for reading.
