Dissecting a simple Infinite Game with Flutter Flame
A Parent-Engineer’s Solution: Crafting an Ad-Free, Infinite Gaming Experience with Flutter Flame.
It all started with my kiddo trying to play a game that was full of advertisements. The app is free, but it’s full of ads all over the place making it difficult for him to actually enjoy the game. On my side, I needed an excuse to start working in a new programming language. Win-win situation!
This story is about how I developed an engaging, ad-free infinite game using Flutter Flame for my child. It is not my intention to make a tutorial out of this, I will try to keep the code in my IDE and avoid pasting it here, as I am probably writing pretty boring and bad code anyway. If you feel like I should post the code or write about it, let me know in the comments (:
Divide and Conquer
To make things easier, I thought about two screens connected through a simple button, it cannot get any easier than that.
Home Screen
Starting point with a simple welcome screen. Friendly button that launches the game (yay!)
Bubble Game Screen
The bubble Game Screen should have a simple “go back home” icon at the top left corner and anywhere the player touches it should pop a simple bubble. When there’s no more space available on the screen, the player can tap on any bubble to make it burst and gain the screen's real state. For the sake of engagement, the bubble should implement some sort of physics
Dissecting the Game
The dissection begins, as I am new to mobile gaming development, I wanted to start with the simplest thing. Let’s get down to business.
Problem definition:
Functional requirements:
- As a toddler player, I want to tap the screen and a bubble should be rendered, so then feel mesmerized by it.
- The bubble should burst at the touch of the player.
- The bubbles cannot be overlapped from one to the other.
Out of the scope: At this bare-bone version, the UX is not expected to be delivered at this time.
Components:
Bubble component which extends a Flame Flutter component to be recognized as part of the game. As part of the component tree, it can recognize when tapped and remove itself from the parent.
GameScreen component which extends FlameGame and is the main entry point to play the game. Should recognize taps and apply the logic to add a bubble. If a child component is present at a position it should not add a new bubble, otherwise it would break the overlapping rule.
Summary
As you can see, nowadays problem statement and breaking down analysis is becoming more and more relevant. Past is the time when the “Hello World” was the starting point to build something.
By only doing some basic functional analysis and breaking it down into simple components, then it’s a matter of using any AI code generator out there (I am looking at you, Github copilot) to build the logic in the preferred language to build an app (in this case, a game)
Caveat: then debug like a madman because the API documentation is out of date and many classes are deprecated.
I hope you enjoyed this and if you feel like leave a comment on any other requirements I should add to this simple game for my kiddo!
