Problem to solve

We need to have a UI to make developing games with Flame easier. All other game engines have it: Unity, Unreal, Godot, GDevelop, etc.

This has been asked many times before, but we never had a concrete proposal. So, here it goes:

Proposal

We create a new package flame_studio, which will be responsible for the UI. The package exposes a single function runFlameStudio(), which is a replacement for runApp():

import 'package:flame_studio/flame_studio.dart';

void main() {
  runFlameStudio(
    Blah(
      child: BlahBlah(
        child: GameWidget(game: MyGame()),
      ),
    ),
  );
}

In release mode, the function runFlameStudio collapses into simple runApp(). However, in debug mode it builds a FlameStudio UI framework around the provided widget. When you run this instrumented game in a browser, it displays the UI and connects it to the GameWidget found inside the widget tree.

The UI has multiple capabilities, among those:

• pause the game at any time;
• inspect the component tree;
• view/modify properties of components at runtime;
• add/delete/move components at runtime;
• inspect the game world outside of game canvas (i.e. a new camera that can look at the world independently).

In addition, the FlameStudio would still have access to the file system, which allows it to inspect the code, and maybe even allow scene modification from within the UI -- for example, the user adds an object to the scene, and the studio automatically writes code that would add that object in onLoad(). Similarly, one could permanently modify some properties of objects from within the studio.

There should also be a mechanism for writing extensions to Flame Studio -- say, flame_jenny could add a UI for inspecting dialogue trees, flame_bloc could show the state of all Blocs, and flame_tiled work with Tiled maps directly.