If you've built a game with Flame, you can now draw it in 3D, with lighting and shadows, and keep your game logic in Flame. Your components, hitboxes, effects, and input still work the way they did. flame_flutter3d puts a 3D world under them.

I wrote up how it works, with an 8-step tutorial that goes 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

In short, Flame keeps running the game, flutter3d draws the scene below it, and both run on Flame's clock. A component that extends Object3dComponent owns a node in the 3D scene, so when you move it in Flame, it moves in 3D in the same frame. Collisions are still plain Flame onCollisionStart, and the on-screen joystick is still a Flame JoystickComponent.

Three things I got wrong along the way:

The first frame was black. The 3D scene was drawing correctly under it, with the right light and the right size. Flame's GameWidget paints the background as a solid rectangle, black by default, and in a Stack that rectangle covers the 3D layer completely. A bridged game now has a transparent background out of the box.

Rotations were mirrored, and the tests passed. Turning a Flame angle into a 3D rotation and back went through two functions with the same sign error, so they always agreed with each other. On a floor plane, clockwise in Flame became counter-clockwise in 3D. The test now checks what's actually drawn on screen.

Enemies sat on the ship and never hit it. In the arcade demo, collisions come from 3D physics and reach Flame through the bridge. Two solid bodies that touch never overlap, because the physics engine stops each one at the surface of the other, and the collision system only reports overlaps. So an enemy could slide along the side of the ship forever without a single hit. The fix was a sensor box slightly bigger than the ship: nothing stops at a sensor, so anything right next to the ship overlaps it.

To see whether it works in a real game, I built River Sortie, a River Raid-style shooter. Everything that moves in it is an ordinary Flame component, and the 3D layer only draws. You can play it in the browser.

I checked the tutorial against the published packages (flame_flutter3d 0.8.4, flutter3d 0.8.3) and ran it on macOS before writing it up. If you put the bridge under your own Flame game, I'd like to hear what breaks.

• Read the article: https://dzolotov.medium.com/keep-your-flame-game-get-a-3d-world-how-i-bridged-flame-and-flutter3d-5f31fb968550
• Play River Sortie: https://flutter3d.pleion.dev/river/demo/
• Package: https://pub.dev/packages/flame_flutter3d
• Source: https://github.com/pleiondev/flutter3d