Flutter for Games? A Bold Experiment

The common wisdom in developer circles is that Flutter is strictly for mobile and web applications. Games, with their demanding real-time rendering and complex state management, are often considered out of bounds. This sentiment, however, didn't deter developer Saqrel Firgany. He set out to build a 3D endless runner game in Flutter, eschewing established game engines like Unity or Unreal entirely. His project, built using only Dart and Flutter's native rendering stack, demonstrates a surprisingly capable execution of 3D graphics within the UI framework.

The result is a playable 3D endless runner that runs directly in the browser. Users can control the player using keyboard inputs: 'A' and 'D' to switch lanes, and 'Space' to jump. This project serves as a proof of concept, pushing the boundaries of what developers typically expect from Flutter and highlighting the underlying power of its rendering capabilities.

Screenshot of the 3D endless runner game built in Flutter running in a browser

Under the Hood: Flutter GPU and flutter_scene

Firgany's approach hinges on two components most Flutter developers rarely interact with: Flutter GPU and a custom library called flutter_scene. Flutter GPU is a low-level rendering API that interfaces directly with the GPU via Impeller, Flutter's modern rendering engine. Impeller is designed for high-performance, fluid animations and graphics, making it a more suitable foundation for game-like rendering than the older Skia engine in certain contexts.

The flutter_scene library acts as the bridge, translating game logic and scene data into commands that Flutter GPU can execute. It manages the game loop, camera, lighting, and asset loading. By building this layer from scratch, Firgany gained granular control over the rendering pipeline, optimizing it specifically for the game's needs rather than relying on the abstractions of a full-fledged game engine.

Game Loop and Rendering Pipeline

At the core of any game is the game loop, which continuously updates the game state and renders frames. Firgany implemented this using Flutter's animation framework, ensuring a smooth, consistent frame rate. The rendering process involves taking the 3D models for the player, obstacles, and environment, transforming them into screen coordinates, and drawing them using the GPU. This includes handling perspective projection, culling off-screen objects, and applying materials and lighting to create a sense of depth and realism.

The choice to bypass a traditional game engine meant building essential functionalities from the ground up. This included:

  • Scene Management: Organizing game objects, their positions, and their relationships.
  • Asset Loading: Importing 3D models (likely in formats like glTF or OBJ) and textures.
  • Physics Simulation: Implementing basic collision detection and response for player movement and interactions with obstacles.
  • Camera Control: Setting up a third-person perspective camera that follows the player.
  • Input Handling: Capturing keyboard events for player commands.

Each of these components would typically be provided by a game engine. By building them in Flutter, Firgany had to deeply understand the nuances of 3D graphics programming and how to map them onto Flutter's rendering primitives.

The Surprising Performance

The most striking aspect of this project is not just that it's possible, but that it performs reasonably well. While not a AAA title, the game achieves playable frame rates in a web browser. This is a testament to Impeller's efficiency and Firgany's careful optimization of the rendering code. He managed to leverage Flutter's declarative UI paradigm and its underlying high-performance graphics capabilities for a task it was not primarily designed for.

Building a 3D game from scratch is a complex undertaking. It requires deep knowledge of 3D math, graphics pipelines, and efficient data structures. Firgany's success suggests that Flutter's rendering stack is more robust and flexible than commonly assumed. It opens up possibilities for developers who might want to integrate simple 3D elements or even full-fledged games into Flutter applications without the overhead or licensing of external game engines.

What's Next for Flutter in Gaming?

Firgany's project raises a significant question: if a single developer can build a functional 3D game in Flutter without an engine, what could a dedicated team achieve? Could Flutter become a viable platform for certain types of indie games, especially those targeting mobile and web where Flutter already excels? The limitations of this approach likely lie in scalability for extremely complex scenes, advanced physics, and the vast tooling that game engines provide. However, for simpler 2D or 3D games, or for integrating interactive 3D experiences into existing Flutter apps, the path is now clearer.

This endeavor is less about replacing Unity and more about expanding the perceived capabilities of Flutter. It demonstrates that for developers who need fine-grained control or want to avoid external dependencies, Flutter's native rendering stack offers a powerful, albeit more challenging, alternative. The community will undoubtedly watch to see if this sparks further innovation in using Flutter for more than just user interfaces.