How do I render a parallax image using the flame game engine with flutter

Question

I am pretty new to the flame game engine built on top of flutter but I am wanting to render a parallax image for my background but when I try to render it in my main game class it won't show up?

class BackGround extends AnimationComponent {

  Rect backgroundRect;
  ParallaxComponent _parallaxComponent;
  BackGround() : super.empty() {
    backgroundRect = Rect.fromLTWH(
      100,
      100,
      100,
      100,
    );
  }

  void render(Canvas c) {
    _parallaxComponent = ParallaxComponent([
      ParallaxImage('Layer_0010_1.png'),
      ParallaxImage('Layer_0009_2.png'),
      ParallaxImage('Layer_0008_3.png'),
      ParallaxImage('Layer_0006_4.png'),
      ParallaxImage('Layer_0005_5.png'),
      ParallaxImage('Layer_0003_6.png'),
      ParallaxImage('Layer_0002_7.png'),
      ParallaxImage('Layer_0001_8.png'),
      ParallaxImage('Layer_0000_9.png'),
    ], baseSpeed: Offset(100, 0), layerDelta: Offset(20, 0));
    _parallaxComponent.render(c);
  }
}

Here is what my main game class looks like.

class MainGame extends BaseGame with TapDetector, HasWidgetsOverlay {
  BackGround backback;
  Size screenSize;



  MainGame(this.storage) {
    initialize();
  }

  void initialize() async {
    // resize(await Flame.util.initialDimensions());
    backback = BackGround();
  }

  void render(Canvas c) {
    backback.render(c);
  }
}

score 3 · Accepted Answer · answered Aug 22 '21 at 15:31

You don't need to call the render method yourself, it is done for you when a Component is added to the game. So like in the ParallaxComponent example here, you add the component to the game like this:

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/parallax.dart';

class MyParallaxComponent extends ParallaxComponent<ComponentParallaxGame> {
  @override
  Future<void> onLoad() async {
    parallax = await gameRef.loadParallax(
      [
        ParallaxImageData('parallax/bg.png'),
        ParallaxImageData('parallax/mountain-far.png'),
        ParallaxImageData('parallax/mountains.png'),
        ParallaxImageData('parallax/trees.png'),
        ParallaxImageData('parallax/foreground-trees.png'),
      ],
      baseVelocity: Vector2(20, 0),
      velocityMultiplierDelta: Vector2(1.8, 1.0),
    );
  }
}

class ComponentParallaxGame extends BaseGame {
  @override
  Future<void> onLoad() async {
    add(MyParallaxComponent());
  }
}

And two other important thing to note are that components should be initialized in onLoad and not in the constructor, and that you already have a size on the Game class so you don't have to create your own screenSize variable like you do in your example. size is of the Vector2 type, like most of such variables in Flame, and the width can be accessed with size.x and the height with size.y.

It also seems like you might using Flame 0.26.4, I recommend that you use 1.0.0-releasecandidate.13 instead since it is much more mature and it is the code base that is being actively developed (don't fear the releasecandidate tag, we will quite soon release 1.0.0).

Thanks @spydon! It works now and I’ll be looking forward to release 1.0.0 — Cameron Johnson, Aug 23 '21 at 03:21

How do I render a parallax image using the flame game engine with flutter

1 Answers1