Changing world size in flame with parallax

user_153083 0
Viewed 258

I'm using the version 1 release of Flame, and adding a parallax background which works great.

// load background layers
final layers = _layersMeta.entries.map(
      (e) => loadParallaxLayer(
    ParallaxImageData(e.key),
    velocityMultiplier: Vector2(e.value.toDouble(), 1.0),
        alignment: Alignment.center,
        fill: LayerFill.none ,
      ),
);

// create background parallax
parallax = ParallaxComponent(
  parallax: Parallax(
    await Future.wait(layers),
    baseVelocity: Vector2(20, 0),
  ),
);

add(parallax);

Once I set the camera to follow a Sprite camera.followVector2(player.position); then its obvious that the parallax was initialized to the size of the screen because as the camera moves, the edges of the parallax become visible with a black game world background. I've tried changing the size of the ParallaxComponent and the Parallax to no avail.

Changing the canvas size doesn't do much either onGameResize(Vector2(camera.canvasSize.x, 5000));

Is there a standard way to set a component fill the world size? The source code talks about the world size, but I don't see any way to control it.

flame flutter viewport
1 Answers

The ParallaxComponent is a PositionComponent which lives in the world that the camera is viewing by default. If you want a PositionComponent to be relative to the viewport (or the GameWidget) you have to change its positionType to PositionType.viewport.

So in this case the initialization of your ParallaxComponent could look like this to make it ignore the camera:

// create background parallax
parallax = ParallaxComponent(
  parallax: Parallax(
    await Future.wait(layers),
    baseVelocity: Vector2(20, 0),
  ),
)..positionType = PositionType.viewport;
user_7895450
Related