Flutter for Game Development!? - Week 1

I recently came across Flutter Casual Games Toolkit and if that isn’t exciting for a game-loving app developer, I don’t know what is! 😂

FCGT is a set of tools, resources, and examples that provide a foundation for game development. Once you dive into it, it can feel somewhat underwhelming, especially for someone used to game engines such as Unity or Unreal. But it should be more than enough for small 2D games. 

Highlights:

Integrations

It’s Flutter, so setting it up with Firebase is super smooth. Analytics, crashlytics, authentication, and real-time database support via Cloud Firestore - all connected and set up on day one.

KISS with 🔥

FCTG examples cover the basics and equip you with suggested state management, routing, settings, and audio support. If you want to Keep It Simple (as you should), 'vanilla’ Flutter may be all you need to build a casual game. However, should you need something more complex, such as game loops or collisions, Flame - an open-source game engine, comes to the rescue.

ALL the platforms

It’s Flutter, so this one should be obvious, but it’s such a game-changer. The ability to support all the platforms from day one is just too convenient. You don’t have to do it straight away, but if you ever decide to ship your mobile game on desktop or web, it’ll be (almost) ready to go.

Okay, you get it, I’m excited. How about I spare you the sales pitch and actually build something?

Introducing: Squiggly Whispers

Last year my family and I discovered Telestrations - a party drawing game based on the game of Chinese whispers. You each get a phrase, draw it, and pass the notepads around. You either guess what the previous person drew or draw what they guessed. The notebooks get passed around until they reach the original owner. Seeing how simple things can get ‘lost in translation’ gets hilariously funny, and everyone loved it. 

I thought how cool it would be to be able to play this online on our phones when we’re not together. My first plan was to make it in Unity and .NET, but since I needed a project to test Flutter’s game dev offering, I thought this project would be perfect for it!

Tech stack and architecture

Ever since my flop with One a Day, I’ve been trying to heavily simplify everything I make, even when I already think it’s simple. My first instinct was to go for Azure Functions and SignalR to implement multiplayer capabilities, but I challenged my thinking. Do I need a server? Do I need a big setup? Do I need authentication? Do I need a back-end at all? After some back and forth with an AI assistant and after some heavy .NET tears were shed, I decided to truly embrace the MVP gods and go with a client-only Firebase set-up that could be easily extended in the future.

This was my plan:

  • Firebase Authentication with anonymous access only
  • Firestore for all data storage, including real-time multiplayer state management
  • Keep all ‘back-end’ logic in a separate service within the app. If the app takes off, move to Azure Functions or Firebase Cloud Functions. 
  • Use a pub.dev package for drawing part of the game - scribble seems like a good candidate.
  • Make a basic word-generating service with hard-coded words with the possibility of swapping this for an external API in the future.
  • Set up Firebase for all platforms, but focus on iOS and Android in the beginning.
  • Use StateNotifier and Provider for state management.

The scope

Functionality is even easier to get carried away with! Even as I’m writing this blog I had to remove one thing I considered necessary for the MVP - voting for the winner. Funnily enough, we’ve never done that when actually playing the game. How about I focus on the basics instead? 

  • Anonymously sign in or restore the session on the app launch
  • Simple ‘matchmaking’ based on one person creating a game, and others joining via join code
  • Game config with values (min/max players, game preferences) hard coded to the simplest options
  • Simple word generation service
  • Game loop - drawing, guessing, viewing notebooks.
  • Option to start next round or exit game

Week 1 progress

I started this project by transplanting what I needed from the Toolkit examples, which was pretty much all the basics, even though I won’t be using all of them straight away. Without much development, the game already supports different styling, music and SFX, custom routing, and app lifecycle custom handling. Not bad!

I then used Flutter Fire to set up a Firebase project for all platforms and proceeded to rework a Firebase authentication project I had recently done to use anonymous sign-in. 

Once I had the auth system in place, I added a simple profile page to allow users to set their profile image and name. I also added a bunch of basic stats just because I couldn’t help myself 😅

Now was the time to dive into multiplayer. I created a lobby page where a host can create a game, and other people can join it using a join code. The list of people waiting to play gets instantly updated as they join/leave which was the first real-time use case test for Firebase. With some further tweaks and error handling, matchmaking and game creation were done. 

I’ve also laid out some foundation work for word generation and round tracking. Just need to tie it all together.

What’s next?

I must admit although initially uncomfortable, the approach of keeping the entire business logic on client-side only is definitely working out for rapid development. With the initial bulk of work out of the way, I am not far off from having a playable build to test and iterate on. The next steps will be to implement all of the round stages one by one - word generation, drawing, and guessing. Then it’s on to viewing everyone's notepads and giving the players the option to leave or carry on playing. Just in time for Christmas gatherings so I can pester my family to test it with me 😄