Background Image Layer #2990
Comments
|
Is the |
|
This is the code which I believe is adding to world.
lass UmfthGame extends FlameGame<UmfthWorld>
with HasGameRef<UmfthGame>, HasCollisionDetection {
UmfthGame({
required this.level,
required this.audioController,
required this.screenWidth,
required this.screenHeight,
required this.ctx,
}) : super(
world: UmfthWorld(level: level),
camera: CameraComponent.withFixedResolution(
width: 1920, height:1080) //2120-1080
);
…________________________________
From: Lukas Klingsbo ***@***.***>
Sent: Monday, January 22, 2024 2:33 AM
To: flame-engine/flame ***@***.***>
Cc: SenexTech ***@***.***>; Author ***@***.***>
Subject: Re: [flame-engine/flame] Background Image Layer (Issue #2990)
Is the TiledComponent added to the world?
—
Reply to this email directly, view it on GitHub<#2990 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AK4LN37AI3OBIGSWTLCXAUDYPYI5DAVCNFSM6AAAAABCEP5UOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBTGQYDSOBWGQ>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
It depends on what you are doing in |
|
The Level is not the TiledComponent. It is an object containing data about the level but I believe you are on to something. I changed the code so that I create and add the cameraComponent to world in the onload method and now the image fills the screen properly. However, the objects created in Tiled in an Object Layer are not displaying in the correct locations. The x and y are offset about 200 pixels so the objects I place in the Object Layer do not line up with what is shown in Tiled. For example, If I place a Rectangle in the object Layer over a specific image element it does not show over this element in the actual game.
…________________________________
From: Lukas Klingsbo ***@***.***>
Sent: Monday, January 22, 2024 7:17 AM
To: flame-engine/flame ***@***.***>
Cc: SenexTech ***@***.***>; Author ***@***.***>
Subject: Re: [flame-engine/flame] Background Image Layer (Issue #2990)
It depends on what you are doing in UmfthWorld, but it looks correct. I guess level is the TiledComponent?
—
Reply to this email directly, view it on GitHub<#2990 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AK4LN33UFNAZPGCYXN5773LYPZKGXAVCNFSM6AAAAABCEP5UOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBTHA4DMMJZG4>.
You are receiving this because you authored the thread.
|
|
Woops. It looks like the change I made did not add the camera but it did remove it. That's why the image display changed. I'm using this code in the onLoad: Now the image displays in the center even though I set anchor to top left. |
|
You should not add the camera to the world, the camera should be added to the game, and have a world that it is observing. class UmfthGame extends FlameGame<UmfthWorld>
with HasGameRef<UmfthGame>, HasCollisionDetection {
UmfthGame({
required this.level,
required this.audioController,
required this.screenWidth,
required this.screenHeight,
required this.ctx,
}) : super(
world: UmfthWorld(level: level),
camera: CameraComponent.withFixedResolution(
width: 1920,
height:1080,
)..anchor = Anchor.topLeft,
);
}Remove all references that you have to |
|
Thanks for the code. I made all the changes you suggested above. However, the ..anchor = Anchor.topLeft for the CameraComponent shows red and I get the error The setter 'anchor' isn't defined for the type 'CameraComponent'
The image's top left corner displays in the center of the screen but I assume it's because I could not add the Anchor above. I tried using the built in camera to set Anchor but it doesn't have the Anchor property/method.
flame_tiled: ^1.18.3
flame: ^1.14.0
…________________________________
From: Lukas Klingsbo ***@***.***>
Sent: Monday, January 22, 2024 9:57 AM
To: flame-engine/flame ***@***.***>
Cc: SenexTech ***@***.***>; Author ***@***.***>
Subject: Re: [flame-engine/flame] Background Image Layer (Issue #2990)
You should not add the camera to the world, the camera should be added to the game, and have a world that it is observing.
class UmfthGame extends FlameGame<UmfthWorld>
with HasGameRef<UmfthGame>, HasCollisionDetection {
UmfthGame({
required this.level,
required this.audioController,
required this.screenWidth,
required this.screenHeight,
required this.ctx,
}) : super(
world: UmfthWorld(level: level),
camera: CameraComponent.withFixedResolution(
width: 1920,
height:1080,
)..anchor = Anchor.topLeft,
);
}
Remove all references that you have to cam and just use the built-in camera which is called camera and is defined when you pass it in the constructor. Also, don't add the camera or the world anywhere, they are added automatically when they are passed in in the constructor.
—
Reply to this email directly, view it on GitHub<#2990 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AK4LN3YE5FKEZUOUCULEFILYPZ44XAVCNFSM6AAAAABCEP5UOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBUGE3TSNJZGE>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
Ah right, the anchor is on the |
|
Okay, I used camera.viewfinder.position = Vector2(1920/2, 1080/2); in the onload and that moved the image to the top left but now I'm back to the original issue of the image not filling the screen. As you can see the background image only extends about half way vertically and horizontally. The small trees are tiles from a Tile Layer in Tiled to indicate the actual bottom of the game screen. The background image is 1920x1080. Sorry to be such a pain.
…________________________________
From: Lukas Klingsbo ***@***.***>
Sent: Monday, January 22, 2024 10:59 AM
To: flame-engine/flame ***@***.***>
Cc: SenexTech ***@***.***>; Author ***@***.***>
Subject: Re: [flame-engine/flame] Background Image Layer (Issue #2990)
Ah right, the anchor is on the viewfinder (if you are going to move the camera later you don't want to set it to something else than center though, so it's better to do camera.viewfinder.position = Vector2(1920/2, 1080/2); in onLoad, but if you do want to change the anchor, just do camera.viewfinder.anchor = Anchor.topLeft; in onLoad instead.
—
Reply to this email directly, view it on GitHub<#2990 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AK4LN36UKBWT6N6WWACT2PLYP2EG3AVCNFSM6AAAAABCEP5UOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBUGMYDSNBWGA>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
Also, in addition to the above the object layer elements(Rectangles) placed in Tiled are not displaying in the correct position in the game. They seem to be off by around 200pixels. For example if I line up a rectangle object with a image element like a platform it shows the rectangle down and to the right in the game but perfect in Tiled |
|
I would suggest that you have a look at the flame_tiled example, since that one also uses a fixed resolution viewport and works fine. |
|
Just to let you know that example did not help. It doesn't use a full screen image. It uses tiles which work fine in my example as well. The issue is when you use a full screen(map) image. Neither the Image Layer or Object layer approach works. I believe this is a bug in Flutter/Flame in that it doesn't support full screen images defined in Tiled |
|
@SenexTech can you try testing this with my branch? You'll need to add this in your pubspec dependency_overrides:
flame_tiled:
git:
url: https://github.com/flame-engine/flame.git
ref: devkage/image-layer-paint-area-fix
path: packages/flame_tiled |
I’m using Flutter with Flame both with the latest versions. Trying to set a background image for the game.
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.
Steps to reproduce
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;
Flutter doctor output
More environment information
The text was updated successfully, but these errors were encountered: