Background Image Layer

Questions
1

I’m using Flutter with Flame both with the latest versions. Trying to set a background image for the game. In Tiled, I created a Tiled Map with a width of 120 and height of 68 using 16x16 Tile size. I then added an Image layer with a image (1920x1080). The image fills the entire map as I would expect.

In flutter I load the map using levelGrid = await TiledComponent.load('level2.tmx', Vector2.all(16));

I set the camera using CameraComponent.withFixedResolution(width: 1920, height:1080 )

Set anchor using camera.viewfinder.anchor = Anchor.topLeft;

The issue is that background image does not fill the screen. It shows in the top left but only fills approx. half the height and width. However, if I create a Tile Layer and add a tile image in each corner they do show in the corners where they should be.

I cant seem to get the background image to display properly and fill the screen but the map does.

Any help would be appreciated.

sample1
sample1800×426 44.6 KB

result
result800×438 25.1 KB

2

This is a question best asked in the community for your engine, since the solution will be specific to it.

It’s possible there is a bug or oversight in the TiledComponent that performs scaling differently for tile layers versus image layers, or perhaps there are different scale settings for these elements that you need to look into.

3

Just in case somebody knows the answer, note that this question was also posted on StackOverflow:

But indeed your chances of finding the answer should be higher in the Flame community.