`flame_tiled` does not render on Web with packed tilesets #1888

jtmcdole · 2022-09-05T00:58:30Z

Current bug behaviour

TiledComponent.load() with a tmx file containing an internal (packed) tileset does not render when running Flame on Chrome or Edge targets.

Expected behaviour

It renders on web.

Steps to reproduce

E.g. embedded tileset:

 <tileset firstgid="1" name="flat_hex" tilewidth="60" tileheight="60" tilecount="12" columns="4">
  <image source="../images/tileset/Tileset_Hexagonal_FlatTop_60x39_60x60.png" width="240" height="180"/>
 </tileset>

To get it working:

 <tileset firstgid="1" source="Tileset_Hexagonal_FlatTop_60x39_60x60.tsx"/>

Flutter doctor output

[√] Flutter (Channel stable, 3.3.0, on Microsoft Windows [Version 10.0.19044.1949], locale en-US)
    • Flutter version 3.3.0 on channel stable at C:\Development\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffccd96b62 (6 days ago), 2022-08-29 17:28:57 -0700
    • Engine revision 5e9e0e0aa8
    • Dart version 2.18.0
    • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Development\Android\Sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = C:\Development\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.3.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.3.32825.248
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\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
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] VS Code (version 1.71.0)
    • VS Code at C:\Users\john\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.48.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19044.1949]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 105.0.5195.52
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 105.0.1343.27

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

• No issues found!

More environment information

Flame version: 1.3.0
Platform affected: web

Log information

There are actually no error logs. It fails silently.

More information

It does render on Android and Windows native.

The text was updated successfully, but these errors were encountered:

jtmcdole · 2022-09-05T06:00:05Z

In _RenderableTileLayer._cacheLayerTiles():

        batch.addTransform(
          source: src,
          transform: ui.RSTransform(
            scos,
            ssin,
            offsetX + -scos * anchorX + ssin * anchorY,
            offsetY + -ssin * anchorX - scos * anchorY,
            flip: false,  // <- We don't need Flip here.
            // flip: flips.flip,
          ),
        );

If flip is true, SpriteBatch.addTransform, a synchronous function, calls an unawaited async function _makeFlippedAtlas.

Whatever _makeFlippedAtlas is doing is broken on Web. Even with an unpacked tsx file, if it contains a single tile that's flipped, it will not be rendered. However - is flip: true even needed if the rotation is accounted for? If I remove it from my tree; all of my tilemaps (packed, unpacked tilesets, and loose images) all render.

jtmcdole · 2022-09-05T06:11:00Z

flip is needed (for you guessed it.. flips not rotations) - but _makeFlippedAtlas does not work on web.

spydon · 2022-09-05T08:38:51Z

Have you tried running it in any non-chrome based browsers?

jtmcdole · 2022-09-05T15:18:21Z

The next largest non-chrome browser would be Safari - I'll give it a try on a mobile device and see.

jtmcdole · 2022-09-05T16:07:29Z

Interesting results:

Setup

in order to connect remotely.
flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

Different devices - with flips

Safari iPad Pro

broken beyond recognition

Android

broken (no images)

Chrome

Local host

Broken as described above

Not local host

works?!?! painting order is off for the flipped archway - at least in tiled its rendered behind

Windows

works (ish) - same archway issue

jtmcdole · 2022-09-05T16:09:03Z

Same setup but with flips removed (which is incorrect):

mobile browser show nothing on the screen (all black, including debug windows...)
desktop browsers work with incorrect flipping behavior on local host and ip.

So color me super confused.

spydon · 2022-09-05T16:25:53Z

Any difference on different renderers?
https://docs.flutter.dev/development/platform-integration/web/renderers#command-line-options

jtmcdole · 2022-09-05T16:26:35Z

Last comment:

in _RenderableTileLayer.load - if you pass useAtlas: !kIsWeb to SpriteBatch.load, it at least fixes that issue with localhost.

jtmcdole · 2022-09-05T16:31:25Z

Any difference on different renderers? https://docs.flutter.dev/development/platform-integration/web/renderers#command-line-options

Chrome-desktop with HTML render: no images loaded. FpsTextComponent shows "2" - not 100.
Chrome-android with HTML render: no images loads, FpsTexTcomponent shows "15" - was showing 30 (on other flame games, I was getting 120fps).
Safari on iPad with HTML render: some images broken, isomorphic with individual images loads. Fps 3.

jtmcdole · 2022-09-05T16:40:52Z

--web-renderer canvaskit and useAtlas: !kIsWeb

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0 --web-renderer canvaskit

Chrome Desktop (localhost, ip:port): 100fps (smooth as glass) all images load
Chrome Android (ip:port): ~95fps, all images load
Safari iPad (ip:port): 60fps (smooth), all images load.

jtmcdole · 2022-09-05T16:49:47Z

I'm also not getting bad boundary paints with useAtlas: !kIsWeb whereas before I was getting a sliver of texture painted at the top of tiles at different zoom levels.

I could put up my hacky "codefu is playing with tiled way more than he should be" project if you'd like to see the repos.

spydon · 2022-09-05T18:11:22Z

The sliver you are talking about is probably this issue: flutter/flutter#14288
It should be possible to solve by using this viewport (or using Impeller 😅) #1866

I'm also not getting bad boundary paints with useAtlas: !kIsWeb whereas before I was getting a sliver of texture painted at the top of tiles at different zoom levels.

I wonder if this is a degradation in Flutter then, because we used to have this by default in the code some versions ago if I remember correctly.

jtmcdole · 2022-09-05T20:16:29Z

The sliver problem is not vertical lines, but horizontal. If zoom level is 1, no problems. I think it is more around the non-power-of-2 sprite sheets.

This problem is not present in the !kIsWeb version.

jtmcdole · 2022-09-07T04:15:21Z

It's this bug! flutter/flutter/issues/103803

Closing this as its a Flutter bug for 3.3.0

jtmcdole · 2022-09-07T04:16:08Z

for anyone else on flutter 3.3.0 and testing:

flutter run -d chrome --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --profile

jtmcdole added the bug label Sep 5, 2022

jtmcdole closed this as completed Sep 7, 2022

st-pasha added Flutter issue This problem is likely caused by the Flutter framework and removed bug labels Sep 7, 2022

ASGAlex mentioned this issue Sep 7, 2022

Fix example not running ASGAlex/flame_tiled_utils#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`flame_tiled` does not render on Web with packed tilesets #1888

`flame_tiled` does not render on Web with packed tilesets #1888

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022 •

edited

Loading

jtmcdole commented Sep 7, 2022

jtmcdole commented Sep 7, 2022

flame_tiled does not render on Web with packed tilesets #1888

flame_tiled does not render on Web with packed tilesets #1888

Comments

jtmcdole commented Sep 5, 2022

Current bug behaviour

Expected behaviour

Steps to reproduce

Flutter doctor output

More environment information

Log information

More information

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

Setup

Different devices - with flips

Safari iPad Pro

Android

Chrome

Local host

Not local host

Windows

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

jtmcdole commented Sep 5, 2022

spydon commented Sep 5, 2022

jtmcdole commented Sep 5, 2022 • edited Loading

jtmcdole commented Sep 7, 2022

jtmcdole commented Sep 7, 2022

`flame_tiled` does not render on Web with packed tilesets #1888

`flame_tiled` does not render on Web with packed tilesets #1888

jtmcdole commented Sep 5, 2022 •

edited

Loading