Camera doesn't follow player in Flutter Flame

Question

This is my first attempt at making a game in Flame engine, Flutter. However, I'm facing problems with the camera, it doesn't move even when I set it to follow. I have tried to move the camera follow code to the update function but it throws an error.

Furthermore I can't find any more documentation on how to implement this on the official Flame docs.

Here's my main game code. Feel free to ask for the other parts of the code if necessary.

import 'dart:async';
import 'dart:math';
import 'package:flame/events.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:whirlybird/components/obstacle.dart';
import 'package:whirlybird/components/player.dart';

class GameScreen extends StatelessWidget {
  const GameScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return GameWidget(
      game: MainGame(),
    );
  }
}

class MainGame extends FlameGame with HorizontalDragDetector, HasCollisionDetection, TapDetector {
  @override
  Color backgroundColor() => Colors.white;

  double birdX = 50;
  double birdY = 500;
  double birdSpeed = 0;
  late double touchDownX;
  late double screenWidth;
  late double screenHeight;

  late final Obstacle obstacle;
  late final Player player;

  @override
  bool get debugMode => kDebugMode;

  @override
  void onRemove() {
    Flame.images.clearCache();
    Flame.assets.clearCache();
  }

  @override
  FutureOr<void> onLoad() async {
    // Load assets
    screenWidth = size[0];
    screenHeight = size[1];

    final random = Random();
    for (int i = 0; i < 10; i++) {
      final x = random.nextDouble() * (size[0] - 10) + 10;
      final y = random.nextDouble() * (size[1] - 10) + 10;
      add(Obstacle(positionVector: Vector2(x, y)));
    }
    player = Player(positionVector: Vector2(birdX, birdY), collisionCallback: flap);
    add(player);
    player.position = Vector2(birdX, birdY); // Jump

    camera.follow(player);

    return super.onLoad();
  }

  void flap() {
    birdSpeed = -5;
  }

  @override
  void onHorizontalDragDown(DragDownInfo info) {
    touchDownX = info.raw.globalPosition.dx;
  }

  @override
  void onHorizontalDragUpdate(DragUpdateInfo info) {
    double touchX = info.raw.globalPosition.dx;
    double deltaX = touchX - touchDownX;
    birdX += deltaX;
    touchDownX = touchX;
  }

  @override
  void update(double dt) {
    birdY += birdSpeed;
    birdSpeed += 0.1;

    player.position = Vector2(birdX, birdY);
    super.update(dt);
  }
}

Any help would be greatly appreciated! Thanks!

Answer 1

Where did you implement your camera ?

If you're using the latest version of flutter flame (flame: ^1.4.0), you should first define a camera and then add your camera to the world:

final map = await TiledComponent.load('level2.tmx',Vector2.all(16))..debugMode=true;
final world = World(children: [map,]);
await add(world);
final camera = CameraComponent.withFixedResolution(
  width: 1280/2,
  height: 370,
  world: world
);
       await add(camera);

And only then you came make your camera follow your player

player = Player(positionVector: Vector2(birdX, birdY), collisionCallback: flap);
await world.add(player);
player.position = Vector2(birdX, birdY); // Jump
camera.follow(player);