flame-engine / flame

A Flutter based game engine.
https://flame-engine.org
MIT License
9.29k stars 913 forks source link

Tiled Drawing Offset not working #2915

Closed Mythar closed 7 months ago

Mythar commented 11 months ago

Current bug behavior

Tiles are not rendered in the correct position. Using Drawing Offset (x,y) and Object Alignment in the Tiled Editor has no effect "in-game" I provided a ss of it. (Isometric Staggered)

Image1

Solution:

file: Cache\hosted\pub.dev\flame_tiled-1.17.0\lib\src\renderable_layers\tile_layers\staggered_tile_layer.dart

  if (map.staggerAxis == StaggerAxis.y) {
    offsetX = tx * size.x + staggerX + halfDestinationTile.x;
    offsetY = ty * staggerY + halfDestinationTile.y;
  } else {
     offsetX = tx * staggerX + halfDestinationTile.x;
     offsetY = ty * size.y + staggerY + halfDestinationTile.y;
  }

  // Add this
  offsetX += (tileset.tileOffset?.x ?? 0) * -1;
  offsetY += tileset.tileOffset?.y ?? 0;

  final scos = flips.cos * scale;
  final ssin = flips.sin * scale;

EDIT: Only the x offset needs to be multiplied by -1

spydon commented 11 months ago

Do you want to create a PR with this @Mythar? It looks sensible right @ufrshubham, @erickzanardo, @kurtome?

Mythar commented 11 months ago

I dont know too mush about GitHub, so i dont know what a "PR" is hehe ;)

Object Alignment needs some math to adjust the offset.

You need to adjust offsetX, offsetY the same way in: staggered_tile_layer.dart hexagonal_tile_layer.dart isometric_tile_layer.dart orthogonal_tile_layer.dart

spydon commented 11 months ago

If you'd like to try you could follow this simple guide: https://opensource.com/article/19/7/create-pull-request-github

And don't worry if you make mistakes, we'll help you along the way. :) Also, this one is good to read for how to set up the flame monorepo locally: https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md

kurtome commented 11 months ago

Can you include a link to the Tiled docs for Drawing Offset? I've never used that option

Mythar commented 11 months ago

Can you include a link to the Tiled docs for Drawing Offset? I've never used that option

Tiled docs: https://doc.mapeditor.org/en/stable/manual/editing-tilesets/#tileset-properties

Mythar commented 11 months ago

If you'd like to try you could follow this simple guide: https://opensource.com/article/19/7/create-pull-request-github

And don't worry if you make mistakes, we'll help you along the way. :) Also, this one is good to read for how to set up the flame monorepo locally: https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md

I tried to make a PR, not sure how too fill out all of the template stuff.

spydon commented 11 months ago

I tried to make a PR, not sure how too fill out all of the template stuff.

The only thing you have to change is where it says: "Replace this text." If you're still unsure, just submit it anyways, the text can be changed afterwards. :)

kurtome commented 11 months ago

Based on the docs, it looks like this change should apply to all the tile layers, not just staggered.

Also, I'm not sure I understand why the offset is being multiplied by -1, are you sure that's correct? Definitely will need to add tests either way

Mythar commented 11 months ago

Based on the docs, it looks like this change should apply to all the tile layers, not just staggered.

Also, I'm not sure I understand why the offset is being multiplied by -1, are you sure that's correct? Definitely will need to add tests either way

Yes all layers has to be adjusted. In the Editor, if you set Drawing Offset X to -64; "in game" it will be moved in the wrong direction, unless you *-1

All layers also has to be adjusted to the "Object Alignment", need some math for that ;)

spydon commented 11 months ago

It should only be the y-axis that needs to be multiplied by -1, since that is the axis that is flipped.

Mythar commented 11 months ago

I tested both x and y, they both have to be multiplied by -1. I did not take flips and staggerAxis into account, i just tested on default setup.

kurtome commented 11 months ago

It should only be the y-axis that needs to be multiplied by -1, since that is the axis that is flipped.

I'm pretty sure the Tiled y-axis is the same as Flame (when it's in pixels, when it's in tiles it needs to be multiplied by tile size)

Mythar commented 11 months ago

It should only be the y-axis that needs to be multiplied by -1, since that is the axis that is flipped.

I'm pretty sure the Tiled y-axis is the same as Flame (when it's in pixels, when it's in tiles it needs to be multiplied by tile size)

You are right, only the x offset needs to be multiplied by -1 - my bad, sorry

kurtome commented 11 months ago

It should only be the y-axis that needs to be multiplied by -1, since that is the axis that is flipped.

I'm pretty sure the Tiled y-axis is the same as Flame (when it's in pixels, when it's in tiles it needs to be multiplied by tile size)

You are right, only the x offset needs to be multiplied by -1 - my bad, sorry

The x axis should be the same too, unless there is something special about the staggered layers

Mythar commented 11 months ago

It should only be the y-axis that needs to be multiplied by -1, since that is the axis that is flipped.

I'm pretty sure the Tiled y-axis is the same as Flame (when it's in pixels, when it's in tiles it needs to be multiplied by tile size)

You are right, only the x offset needs to be multiplied by -1 - my bad, sorry

The x axis should be the same too, unless there is something special about the staggered layers

TiledComponent extends PositionComponent, so it might have to do with the position and anchor of the PositionComponent?

I placed it at (0,0) and anchor topLeft