TiledWorldMap black screen

[TaylorHo]

Hi, I've noticed an error/bug in TiledWorldMap. Using TiledWorldMap with moveOnlyMapArea: true in the cameraConfig, results in dark parts in the screen.

The edges left and top is ok, but the map doesn't respect the moveOnlyMapArea: true on the bottom and right. In addition, this "dark screen" appears as the map moves (as if it takes a while to load).

I've noticed this in versions > 2.5.0 (the error does not occur in previous versions, even with exactly the same codebase). Also, I'm getting this "error" in all platforms, Linux, Web, Android, etc..

Screenshots showing this:

The map, "taking a while to load".

The moveOnlyMapArea: true not working correctly (the dark screen here is because the map ends).

[RafaelBarbosatec]

Hi @TaylorHo !
Thanks for this report!
I'll analyze this issue.

Beautiful game you are building 😊!

[RafaelBarbosatec]

Hi @TaylorHo.
In the moment i not identify this problem in 2.6.2 version. You could verify if occurs this issue in this version?

[TaylorHo]

Yeah, I've tried with 2.6.2 too.
I'll try to create a minimal reproducible example and share it here.

[TaylorHo]

I've found out what the real problem is!

In my game, I start cameraConfig with zoom: 2 (camera focusing on main player). After that, in onReady (function called in BonfireTiledWidget) I change the zoom to 1 (creating a kind of zoom out effect).

The map does not follow this zoom change. That's why parts of the map seem to take a while to load (because for the map it's as if zoom is set to 2, when in fact it's set to 1). Likewise, moveOnlyMapArea: true doesn't work either, as it's as if the map is zoomed to 2, but it's actually set to 1.

Is there any way to change this, so the zoom change will reflect the map's loading and limit behaviors? Or is it more practical for me to implement this zoom in another way?

Example of the code:

BonfireTiledWidget(
  // ...
  cameraConfig: CameraConfig(
    moveOnlyMapArea: true,
    zoom: 2,
  ),
  onReady: (game) async {
    await Future.delayed(
      const Duration(milliseconds: 1500),
      () {
        game.camera.moveToPlayerAnimated(
          zoom: 1.4,
          duration: const Duration(milliseconds: 1400),
        );
      },
    );
  },
);

And an example of the zoom-out effect:
example.webm

[TaylorHo]

Exploring the code I got a solution!!
I'll open a PR for this, making the changes and explaining why this bug was occurring.

[RafaelBarbosatec]

Awesome! 🚀🤩
Thanks so much! 🤟