flutter3d
Showcase Changelog 38 packages API reference

Demo: Meteor Yard in a browser

A ship over a yard of pillars and rocks, with bots walking their lanes across it. The yard, the ship and the bots are drawn by flutter3d; the game around them is a Flame game, with its own component tree, its own collision callbacks and its own joystick. flame_flutter3d joins the two, and this is the one demo that uses every bridge it has at once.

WebGL2 · drawn at the frame's own size Open full screen ↗

Click the frame first; the keyboard goes to whatever was clicked last. Until the craft models arrive the ship and the bots are plain shapes, and they stay that way if the models will not load.

Controls #

W A S D or arrows
Fly. Up the screen is forward
Joystick
On a phone, in the bottom-left corner: Flame's own JoystickComponent, feeding the same input the keys do
Tap the status line
Play a lost level again

The rules #

A bot goes only when the ship flies at it. The contact counts as a ram when the bot is within sixty degrees of the ship's heading. A bot that runs into the ship from the side or from behind is a hit on the ship instead, and a level ends after its last allowed hit.

Four levels, each harder than the last. More bots, faster bots, fewer hits allowed. From the second level some of the bots hunt: they leave their lane and chase the ship once it comes close, and they glow magenta so you can tell which. From the third, bots see a ram coming and step aside. No bot is faster than the ship, so every one of them can be caught.

What this one shows that the others do not #

Two engines, one clock. Flame's game loop drives everything: the physics step, the actor system and the transform sync are Flame components with priorities, so the order within a frame is the order of the component tree. flutter3d draws what the step left behind.

A 3D contact arrives as a Flame collision. The ship carries a trigger sensor in the physics world, and CollisionBridge reports its contacts through Flame's ordinary onCollisionStart, with the other party resolved to its Flame component. The game decides ram or hit there, in plain Flame code.

Flame on top, 3D underneath. The HUD is Flutter, the joystick is Flame, and both sit over the 3D surface in one Stack. The camera follows the ship through Flame's viewfinder, and the bridge turns its zoom into an orthographic height for the 3D camera.

The bridges themselves are in the package reference, and the game's source is apps/flutter3d_demo_arcade.

Building it yourself #

# What this site serves, for every game at once.
(cd site && tool/demos.sh arcade)

# Or by hand, without --wasm, for the reason site/tool/demos.sh gives.
(cd packages/flutter3d_webgl && dart run tool/generate_shaders.dart)
(cd apps/flutter3d_demo_arcade && flutter build web --release --base-href=/demo/arcade/)

On a desktop:

(cd apps/flutter3d_demo_arcade && flutter run -d macos)

Next #