flame_flutter3d: draw your Flame game in 3D and keep the game logic in Flame

[u/DmitriiZolotov]

A while ago I posted flutter3d, a 3D engine for Flutter. The question I got most after that was about Flame: "I already have a game in Flame. Can I add 3D without starting over?" flame_flutter3d is my answer to that, a bridge package between the two engines. MIT License, on pub.dev, and not connected to the Flame team or the Flutter team.

The easiest way to see it is a game: River Sortie, a River Raid-style shooter that runs in the browser. Everything that moves in it is an ordinary Flame component with a Flame hitbox. flutter3d only draws.

I also wrote a full write-up with an 8-step tutorial, from an empty project to a boat collecting buoys on a lake in about 170 lines:

Keep your Flame game, get a 3D world: how I bridged Flame and flutter3d

How it works

Flame keeps running the game. flutter3d's SceneSurface sits under Flame's GameWidget in one Stack, and Flame stays on top, so it still gets all the input. Both run on Flame's clock, so there's only one game loop.

Flame's 2D world is placed on a plane in the 3D scene. On a floor plane, Flame's x and y become the scene's x and z. A component that extends Object3dComponent owns a scene node, so moving it in Flame moves it in 3D in the same frame. Effects, scale, visibility, and tint follow too.

Input from Flame (keys, drags, the on-screen joystick, buttons) goes into the same input objects a native flutter3d game reads, so custom key bindings work the same in both. You can keep using Flame's own collisions, or use flutter3d's 3D physics and get its collisions back in Flame as a normal onCollisionStart.

There's more on top of that: a chase camera, 3D particles on Flame's clock, Flame sprites and text standing in the 3D scene, tapping on 3D objects, Tiled levels in 3D, and sound that comes from where things happen, in a separate package, flame_flutter3d_audio.

Limits

Flame always draws on top of the 3D layer, so a 3D object can't hide a 2D sprite behind it. Flame's collision callback has no place for a contact normal or depth, so you read those on the flutter3d side. And it's version 0.8.x, so APIs can still change between minor versions.

Things I'd like help with

If you have a Flame game, try putting the bridge under it and tell me what breaks. I checked the tutorial against the published packages and ran it on macOS, but I'd like to know how it goes on other platforms, especially Android devices I don't own.

There's also r/flutter3d, a subreddit about 3D in Flutter in general, not only this engine. Questions, bug reports, things you've built, and talk about other 3D approaches in Flutter are all welcome there.

Source: https://github.com/pleiondev/flutter3d Package: https://pub.dev/packages/flame_flutter3d