The two layers, side by side

since 0.7.0 The Flame bridge

Open the live demo · Read the source · View on GitHub

Flutter3dFlameWidget puts a Flame GameWidget and a flutter3d SceneSurface in one Stack, Flame on top. Before any of this category's own bridges exist, that composited widget already draws two layers — nothing here connects them yet, on purpose: this page is the starting point every other page in flame adds one mechanism to.

Step 1: Flame's own layer #

A Flame game is built out of components, and the plainest of them is a PositionComponent. It has a position, and nothing else here has ever heard of flutter3d.

// Flame's own layer: a plain PositionComponent, the same class every
// sprite and shape in a Flame game already is. Nothing here has heard of
// flutter3d.
final flameShape = PositionComponent(position: Vector2(2.0, 0.0));

Step 2: flutter3d's own layer #

flutter3d's own layer is a cube, sitting at a spot of its own. Nothing here has heard of Flame either.

// flutter3d's own layer: a cube placed at a spot of its own, on the far
// side of the origin from the Flame shape. Nothing here has heard of
// Flame.
const double cubeX = 9.0;

Step 3: Nothing links them #

Advancing the Flame shape by one tick does not move it towards the cube, and placing the cube never touched the Flame shape. Two engines, two layers, and the seam between them is empty space until a page in this category fills it.

// Ticking the Flame side does not move it towards the cube, and moving
// the cube (above) never touched the Flame shape at all: no bridge sits
// between them yet. That is every other page in this category, one
// mechanism at a time.
flameShape.update(1 / 60);
final double flameX = flameShape.position.x;

The Flame shape stayed exactly where it started while the cube sat at its own position on the other side of the origin — the two layers this widget draws never exchanged a single number.

Step 4: Watch both run #

On the page, the orange square is a Flame component that Flame's own game slides across the top; the cube is a flutter3d node that the scene turns. Both run at once, in one Stack, and neither reads the other. The game and the scene are built once and kept: the widget is rebuilt every frame, and a game made afresh each time would restart before it drew anything.

// Built once, kept: the widget below is rebuilt every frame, and a game
// made afresh each time would restart before it drew anything.
_game = TransparentFlameGame();
final _Slider slider = _Slider();
_game
  ..add(flameCaption('Flame: a component its own game moves'))
  ..add(slider)
  ..add(
    flameCaption(
      'flutter3d: a cube its own scene turns',
      at: Vector2(16.0, 88.0),
    ),
  );