CODEWITHSUNDEEP
flutterviewportflame
Andrew Grothe
Andrew Grothe

Reputation: 2374

Changing world size in flame with parallax

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.

Upvotes: 1

Views: 1023

Answers (1)

spydon
spydon

Reputation: 11552

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;

Upvotes: 2

Related Questions