Question 289517 in Flutter Question posted in
The official Flutter documentation can be found here.

How to position SpriteComponent relative to Game screen in Flutter Flame Engine?

I have a sprite component that I would like to set as the main background of the Flame game and move an avatar on top of this, with CameraComponent following this avatar. Sprite movements that need to be supported are up, down, left and right. As I needed all these movement directions supported, I could not rely just on ParallaxComponent, which seems like a good choice for side-scrolling games.

Problem I am running into is with placement of the sprite background. If I set it using camera.backdrop, the camera.follow(avatar) doesn’t move the camera. Following is the relevant code that I have tried so far in my onLoad() method:

@override
  Future<void> onLoad() async {
    super.onLoad();
    _avatar.position = size / 2;

    //camera.backdrop = _map;
    camera.viewport = FixedSizeViewport(size.x, size.y);
    camera
          //..viewfinder.visibleGameSize = Vector2(100, 100)
          ..follow(_avatar)
        // ..setBounds(
        //     //Rectangle.fromCenter(center: _map.absoluteCenter, size: _map.size / 2),
        //     Rectangle.fromLTRB(0, 0, _map.size.x, _map.size.y))
        ;

    //_map.position = Vector2(-size.x, -size.y);

    await world.add(_map);
    //var parallax = GameParallaxComponent();

    //parallax.isFullscreen = true;
    //await world.add(parallax);
    //await world.add(SpriteComponent(size: _map.size));

    await world.add(_avatar);
    //world.
    //add(world);
    addWorldCollision();
    // (await MapLoader.readWorldCollisionMap()).forEach((rect) {
    //   initializeCollisionDetection(
    //     mapDimensions: rect,
    //     minimumDistance: 10,
    //   );
    // });

    //camera.viewport = MaxViewport();

    // camera.followComponent(_avatar,
    //     worldBounds: Rect.fromLTRB(0, 0, _world.size.x, _world.size.y));
    //await add(cameraComp);
    //camera.canSee(_avatar);

    //await add(camera);
    //camera.viewfinder.position = _avatar.position;
    //camera.viewport.position = _avatar.position;
  }

I have tried to set camera.backdrop to the background sprite component (_map); but it doesn’t allow camera to move with the _avatar. I am able to set the position of this background sprite component like this – _map.position = Vector2(-size.x, -size.y); But, this paints a black border around the background. I tried to define the camera viewport to control by setting it this way – camera.viewport = FixedSizeViewport(size.x, size.y); However, this doesn’t seem to change that black border much.

Below is an image of how my game renders with the above code.
enter image description here

What is the most optimal way to set background image for Flame based games, when we need the camera to follow an avatar that can move in any direction on this background?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone else stumbling here, trying to find ways to set boundary of the camera component, I used Spydon's advice. Following piece of code helps set the boundary of the camera component, based on a background map SpriteComponent.

    @override
Future<void> onLoad() async {
super.onLoad();

// Add the SpriteComponent for world background (stored in _map variable) 
// and player avatar referenced with a variable in my game class
await world.add(_map); // await was required for my code to work as expected; since camera bounds were dependent on this component to be loaded
await world.add(game.avatar); // await required as the position of avatar was dependent on this component to be loaded

// Position the avatar as needed
game.avatar.position = game.size / 2;

// Set camera component to follow the avatar
camera.follow(game.avatar);
camera.setBounds(Rectangle.fromCenter(
    center: _map.center, size: _map.size - camera.viewport.size));
}

  2. 0

    Add the background as the first component to your world and then you add the player to the world too, then you can have the camera following the player when it is moving in the world. (You can also set the priority of the background to be lower than the priority of the player)

    You can set bounds to the camera with camera.setBounds. Set the bounds to match where the background is in your world.

    camera.backdrop is meant for having a static background meanwhile you move around in the world, that was why that solution did not work for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search