shoaib-xo commented 1 year ago

flame_tiled:TiledComponent does not render correctly or am I missing something? I have a vanilla simple map (tilesize 128x128) with two tile-layers, ground and objects. The tiles arent rendered at the correct positions. The one thing to note is that the tiles in the layer arent 128x128, however, Tiled renders it correctly.

Current bug behavior

Tiles incorrectly positioned on layer

Expected behavior

Tiles should be rendered as they are in Tiled

Steps to reproduce

https://zapp.run/edit/tilemaperror-z2q06pg2r06

Flutter doctor output

[✓] Flutter (Channel stable, 3.7.11, on Ubuntu 22.04.2 LTS 5.15.0-70-generic, locale en_US.UTF-8)
    • Flutter version 3.7.11 on channel stable at /opt/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f72efea43c (10 days ago), 2023-04-11 11:57:21 -0700
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /usr/lib/android-sdk
    • Platform android-33, build-tools 30.0.3
    • ANDROID_HOME = /usr/lib/android-sdk
    • ANDROID_SDK_ROOT = /usr/lib/android-sdk
    • Java binary at: /opt/android-studio-2022.2.1/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2022.2)
    • Android Studio at /opt/android-studio-2022.2.1/android-studio
    • Flutter plugin version 73.0.2
    • Dart plugin version 222.4560
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio
    • Android Studio at /opt/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code
    • VS Code at /snap/code/current
    • Flutter extension version 3.62.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.2 LTS 5.15.0-70-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.165

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

More environment information

flame version: 1.7.2 Platform version affected: Chrome

Log information

None

More information

Side by side comparison of how the map is rendered in flame and tiled. You can see the tiles are offset and unaligned with the 128x128 tile map.

shoaib-xo commented 1 year ago

I resized all images to be of same size and that fixed the issue. I'm not sure though whether its still something that can be fixed or maybe converted into an improvement task. Tiled seems to work fine with the same tilesets.

spydon commented 1 year ago

I'll convert it to a improvement task. Thanks for creating the zapp link, it makes it much easier to understand the problem. :)

TheMaverickProgrammer commented 2 months ago

Is the issue here just that the tiled layers here used different sizes, while the tiled flame package expects them to be identical?

spydon commented 2 months ago

Is the issue here just that the tiled layers here used different sizes, while the tiled flame package expects them to be identical?

Indeed, that's how I remember it at least.

TheMaverickProgrammer commented 1 month ago

I've investigated this issue and there's a few changes to be ok with in order to guarantee the lib behaves as expected. One of the changes would be to remove the tile width and height parameters and let the parsed TMX document dictate those as it should. The Tiled package already loads the width and height of the tiles in the Layer.parse(...) function.

It will also impact the tileStack() feature which takes in tile coordinates. But with every layer having potentially different tile dimensions, this will not align in those cases. We would need to provide word pixel (x,y) values and let each recursive layer in that function divide that layer's width and height by that layer's world coords in order to obtain the correct "stacked" tile for that layer.

spydon commented 1 week ago

@TheMaverickProgrammer were you working on a way to solve this? :)

TheMaverickProgrammer commented 1 week ago

@TheMaverickProgrammer were you working on a way to solve this? :)

Hi. I have recently returned home since the hurricanes. I am fine but still getting settled and unpacking my things. However, as soon as I am able, I can return to this and the other tickets I was working on.

There is a high-risk breaking change necessary to resolve this issue with the tileStack() method:

We would need to provide world pixel (x,y) values and let each recursive layer in that function divide world coords by that layer's width and height in order to obtain the correct "stacked" tile for that layer.

If you're ok with this, then it can be completed quickly.