TiledComponent does not render correctly

[shoaib-xo]

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]

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]

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