Flame Workspace

A Workspace for Flame games.

[!NOTE]

This project is unrelated to the Flame team, it is a personal project that I'm working on to make it easier to create games using Flame. For official support, see flame-engine/Flame Studio

https://github.com/bdlukaa/flame_workspace/assets/45696119/00178d89-aeeb-487c-a262-557258db4fbc

Progress

• POC
  The proof of concept stage is where I try to figure out if the idea is possible and how to do it. Everything is hard coded, the project structure is not defined yet and the code is a mess.
• Developer Preview
  The developer preview stage is where I try to implement the core features of the app. The project structure is somewhat defined, but it is still subject to change.
• Alpha
  The alpha stage is where I try to implement most of the basic features and fix most of the bugs.
• Beta
• Stable

How to use?

Given the current state of the application, some manual steps are required to run it. The template/ folder contains the necessary arrangements to make it run and interact with the Workspace.

1. Clone the repository 2. Run flutter run in the flame_workspace folder to start the Workspace 3. Open the template/ folder from the Workspace 4. Run the project to start the Game Preview

Core Features

• Analyze and parse a Flame project
• Code generation
• Code manipulation
  Manipulate the project classes, like declaring components in scenes, changing the properties of components, etc.
• Game Preview

Basic Features

• Create a new project
  Create a new project from the Workspace that contains all the necessary code to connect to the Workspace and interact with it.
• Scene Editor
  A visual scene editor for designing and arranging game levels, environments, and assets.
• Component Editor
  Create, edit and manage components isolatedaly from the Workspace.
• Asset Management
  View, edit and manage the assets of the game from the Workspace.
• Script Editor
  Edit the code of the game from the Workspace, without the need to open the project in external editors. The editor can take advantage of the analyzed code to provide code completion and other features.

Packages

• flame_workspace The app itself. It is resposible to create, edit, generate code and connect to the server

• template A template used when creating a new Flame project. The default folder structure is:

      assets/                         # Contains the assets of the game
      lib/                            # Contains the source code of the game
        generated/                      # Contains the generated code
          components/                       # Contains the generated code of the components
          scenes/                           # Contains the generated code of the scenes
          properties.dart                   # Contains the generated code to manipulate components
        components/
          component_name.dart               # A custom component    
        scenes/
          scene_name.dart                    # A scene
          scene_name_script.dart             # The script of the scene_name
        main.dart                       # The entry point of the game
        game.dart                       # The game itself
      pubspec.yaml                    # The dependencies of the game
      flame_configuration.yaml        # Configuration options used by the workspace
  

  For more details, see template/README.md

• flame_workspace_core The core package, in which every Flame project must depend on. It contains the necessary code that makes the interaction between the Workspace and the game itself possible.

Under the hood

The Dart Analyzer is used to parse the entire code of the game. The Workspace uses this info to display the available components, scenes and other information about the project.

Game Preview

The Game Preview is the game itself, running on a separate window. The communication between the Workspace and the Game Preview is done using the local http server created by the flame_workspace_core package, making it possible to edit the components properties from the Workspace itself, without the need to edit the code. See this for more info on how it works.

[!IMPORTANT]

The Game Preview is embedded into the Workspace using flutter_native_view, since Flutter doesn't support Platform Views on Desktop yet (by 11/05/23).

• View the embedded preview
• Manipulate components inside the preview
  In a "paused" state, which the game loop is stopped, the user can manipulate the components inside the preview, and the changes are reflected in the code.
• Logs
  The logs of the game are displayed in the Workspace, making it easier to debug the game.

Game-Workspace interaction

With the analyzed code, the workspace can generate code to allow the interaction between the game and the Workspace. This is necessary because reflection is not supported on Flutter. The generated code is placed in the lib/generated/ folder:

• properties.dart This file is generated by the PropertiesGenerator and contains functions to manipulate all the components in the project, whether they're built-in Flame components or custom components.

• scene_${sceneName}.dart This file is generated by the SceneGenerator and contains functions to manipulate the scenes in the project. It creates a mixin with the name Scene${sceneName}, which every scene must depend on. Don't worry, this is hanlded automatically by the Workspace.

These files are generated every time the files are changed.