Performance & rendering issue came out after #1982

[Hwan-seok]

Current bug behaviour

After bc2db2b17af997fd529800abe0124b0f8918295f, tiled map performance & rendering issue came out. FPS drops to 0~10s and it renders inappropriate tile.

• On Android you can see the video below

Before bc2db2b17af997fd529800abe0124b0f8918295f

https://user-images.githubusercontent.com/38072762/194514541-f87f3039-a1d3-4b01-a1a7-6dfb9a577a64.mp4

After bc2db2b17af997fd529800abe0124b0f8918295f

https://user-images.githubusercontent.com/38072762/194514568-d22cb2bf-a890-4613-961f-70b642242430.mp4

• On IOS, it immediately crashes with following logs

  
  libc++abi: terminating with uncaught exception of type std::bad_alloc: std::bad_alloc

• thread #10, name = 'io.flutter.1.raster', stop reason = signal SIGABRT frame #0: 0x00000001b7375b38 libsystem_kernel.dylib__pthread_kill + 8 libsystem_kernel.dylib__pthread_kill: -> 0x1b7375b38 <+8>: b.lo 0x1b7375b58 ; <+40> 0x1b7375b3c <+12>: pacibsp 0x1b7375b40 <+16>: stp x29, x30, [sp, #-0x10]! 0x1b7375b44 <+20>: mov x29, sp Target 0: (Runner) stopped. Lost connection to device.

Expected behaviour

Renders right tile and fixes the performance.

Flutter doctor output

Output of: flutter doctor -v

[✓] Flutter (Channel stable, 3.3.4, on macOS 12.6 21G115 darwin-arm, locale ko-KR)
    • Flutter version 3.3.4 on channel stable at /Users/lafity101/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eb6d86ee27 (2 days ago), 2022-10-04 22:31:45 -0700
    • Engine revision c08d7d5efc
    • Dart version 2.18.2
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/lafity101/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • Java binary at: /Users/lafity101/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Users/lafity101/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8609683/Android Studio.app/Contents
    • 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+0-b1504.28-7817840)

[✓] Android Studio (version 2021.2)
    • Android Studio at /Users/lafity101/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526/Android Studio.app/Contents
    • 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+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.1)
    • IntelliJ at /Users/lafity101/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.1)
    • IntelliJ at /Users/lafity101/Library/Application
      Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/222.3739.54/IntelliJ IDEA.app
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2)
    • IntelliJ at /Users/lafity101/Library/Application
      Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/222.3345.118/IntelliJ IDEA.app
    • 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

[✓] VS Code (version 1.71.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • SM A325N (mobile) • RF9R40690PY               • android-arm64  • Android 11 (API 30)
    • iPad (mobile)     • 00008030-00022C403E63C02E • ios            • iOS 15.7 19H12
    • macOS (desktop)   • macos                     • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)      • chrome                    • web-javascript • Google Chrome 105.0.5195.125

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

• No issues found!

More environment information

[spydon]

It looks like it tries to render a non isometric game in an isometric way? @jtmcdole

[jtmcdole]

How many tile images do you have in the tiled map? I'm curious if this is hitting a device limit, even though I've tested with 8k textures

[jtmcdole]

It looks like it tries to render a non isometric game in an isometric way? @jtmcdole

I don't think its isometric rendering, I think it's still orthogonal, I've tested isometric with different sized tiles as well. I'd be curious if @Hwan-seok could any of the following:

1. Share the map if its open source
2. write out the TiledAsset image that is attached to the map.

   final atlas = await TiledAtlas.fromTiledMap(component.tileMap.map),
   final data = await atlas.atlas.toByteData(format: ImageByteFormat.png);
   await File('data.png').writeBytes(data.buffer.asUint8List());

3. provide a repo case

I'm happy to search around for orthogonal tests to kitbash a large map. Does this blow up on Windows?

[Hwan-seok]

This is my map settings

<map version="1.8" tiledversion="1.8.4" orientation="orthogonal" renderorder="right-down" 
  width="112" height="80"
  tilewidth="32" tileheight="32"
  infinite="0" nextlayerid="66" nextobjectid="241"
>

Has 31 tilesets

Each tileset's tilecount is 100~ 4134 as follows

 <tileset firstgid="1" name="some tileset name" tilewidth="32" tileheight="32" tilecount="4134" columns="39">

The sum of tilecount is approximately > 13000

Unfortunately, this is not open source so I cannot explicitly upload it here... But I am ready to figure it out together.

I used macOS and physical devices. Is this answer right for your question?

2. write out the TiledAsset image that is attached to the map.

   final atlas = await TiledAtlas.fromTiledMap(component.tileMap.map),
   final data = await atlas.atlas.toByteData(format: ImageByteFormat.png);
   await File('data.png').writeBytes(data.buffer.asUint8List());

   Is this mean that uploading the data.png here?

[jtmcdole]

Thanks for the info!

At 8K textures, 32x32 individual tiles would fit about 65536 tiles, which is far less than 13,000. It would be helpful to know what the eventual packed texture is. I suspect that if they are all 39 columns wide, that leads to only 6 atlases packed. per row... and about 2 atlas tall, so 6x2x4134 ~= 49500 tiles still packed. It really depends on the shape of each tileset atlas.

1. If you had a list of all the tilesets in the map, just like the <tileset> you listed above, I could recreate at least the packed layout. This isn't sharing the images, just the XML layouts.
2. Are you building using HEAD of Flame?

[Hwan-seok]

Please excuse me that I am not an expert in game programming. So I have less knowledge about the terms.

..., that leads to only 6 atlases packed. per row... and about 2 atlas tall, so 6x2x4134 ~= 49500 tiles still packed

Sorry, but I cannot understand what exactly this means.

1. There was some mistake in counting the tilesets. The number of tileset was 41 and the sum of their tilecount is 15130.

   <tileset firstgid="1" name="..." tilewidth="32" tileheight="32" tilecount="4134" columns="39">
   <tileset firstgid="4135" name="..." tilewidth="32" tileheight="32" tilecount="612" columns="18">
   <tileset firstgid="4747" name="..." tilewidth="32" tileheight="32" tilecount="1760" columns="16">
   <tileset firstgid="6507" name="..." tilewidth="32" tileheight="32" tilecount="1" columns="1">
   <tileset firstgid="6508" name="..." tilewidth="32" tileheight="32" tilecount="252" columns="18">
   <tileset firstgid="6760" name="..." tilewidth="32" tileheight="32" tilecount="156" columns="12">
   <tileset firstgid="6916" name="..." tilewidth="32" tileheight="32" tilecount="90" columns="10">
   <tileset firstgid="7006" name="..." tilewidth="32" tileheight="32" tilecount="88" columns="11">
   <tileset firstgid="7094" name="..." tilewidth="32" tileheight="32" tilecount="169" columns="13">
   <tileset firstgid="7263" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="7363" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="7463" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="7563" name="..." tilewidth="32" tileheight="32" tilecount="380" columns="20">
   <tileset firstgid="7943" name="..." tilewidth="32" tileheight="32" tilecount="209" columns="19">
   <tileset firstgid="8152" name="..." tilewidth="32" tileheight="32" tilecount="1416" columns="24">
   <tileset firstgid="9568" name="..." tilewidth="32" tileheight="32" tilecount="72" columns="8">
   <tileset firstgid="9640" name="..." tilewidth="32" tileheight="32" tilecount="1248" columns="16">
   <tileset firstgid="10888" name="..." tilewidth="32" tileheight="32" tilecount="221" columns="13">
   <tileset firstgid="11109" name="..." tilewidth="32" tileheight="32" tilecount="221" columns="13">
   <tileset firstgid="11330" name="..." tilewidth="32" tileheight="32" tilecount="221" columns="13">
   <tileset firstgid="11551" name="..." tilewidth="32" tileheight="32" tilecount="81" columns="9">
   <tileset firstgid="11632" name="..." tilewidth="32" tileheight="32" tilecount="81" columns="9">
   <tileset firstgid="11713" name="..." tilewidth="32" tileheight="32" tilecount="81" columns="9">
   <tileset firstgid="11794" name="..." tilewidth="32" tileheight="32" tilecount="221" columns="13">
   <tileset firstgid="12015" name="..." tilewidth="32" tileheight="32" tilecount="221" columns="13">
   <tileset firstgid="12236" name="..." tilewidth="32" tileheight="32" tilecount="140" columns="10">
   <tileset firstgid="12376" name="..." tilewidth="32" tileheight="32" tilecount="250" columns="10">
   <tileset firstgid="12626" name="..." tilewidth="32" tileheight="32" tilecount="630" columns="21">
   <tileset firstgid="13256" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="13356" name="..." tilewidth="32" tileheight="32" tilecount="54" columns="6">
   <tileset firstgid="13410" name="..." tilewidth="32" tileheight="32" tilecount="486" columns="18">
   <tileset firstgid="13896" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="13996" name="..." tilewidth="32" tileheight="32" tilecount="64" columns="8">
   <tileset firstgid="14060" name="..." tilewidth="32" tileheight="32" tilecount="99" columns="9">
   <tileset firstgid="14159" name="..." tilewidth="32" tileheight="32" tilecount="140" columns="10">
   <tileset firstgid="14299" name="..." tilewidth="32" tileheight="32" tilecount="348" columns="12">
   <tileset firstgid="14647" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="14747" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <tileset firstgid="14847" name="..." tilewidth="32" tileheight="32" tilecount="96" columns="8">
   <tileset firstgid="14943" name="..." tilewidth="32" tileheight="32" tilecount="88" columns="8">
   <tileset firstgid="15031" name="..." tilewidth="32" tileheight="32" tilecount="100" columns="10">

2. Is this means git HEAD? or something else?

[jtmcdole]

First: Thank you for the report and data!

Running your tileset dimensions through the rectangle packer does show its capable of packing to 8k textures as seen in the bottom image... but either my rendering is wrong or I have a bug / missed test case (totally possible!)

I will try to simulate / reproduce this today on an older pixel phone (either 2xl or 3).

the code to reproduce this is pretty simple

```dart import 'dart:io'; import 'dart:ui'; import 'package:flame/extensions.dart'; import 'package:flame_tiled/src/rectangle_bin_packer.dart'; import 'package:flutter/widgets.dart'; main() async { await WidgetsFlutterBinding.ensureInitialized(); final pack = RectangleBinPacker( // comparator: RectangleBinPacker.compareWidth(a,, ); final fu = Expando('fu'); final reg = RegExp(r'tilecount="(\d+)" columns="(\d+)"', multiLine: true); final matches = reg.allMatches(sets); final canvasRecorder = PictureRecorder(); final canvas = Canvas(canvasRecorder); int totalTiles = 0; final rects = []; for (var match in matches) { final column = int.parse(match[2]!); final tiles = int.parse(match[1]!); totalTiles += tiles; final width = column * 32; final tileheight = tiles / column; final height = tileheight * 32; final rect = Rect.fromLTWH(0, 0, width.toDouble(), height); fu[rect] = { 'column': column, 'tiles': tiles, 'width': width, 'height': height }; rects.add(rect); } rects.sort((b, a) { final height = a.height - b.height; return (height != 0 ? height : a.width - b.width).toInt(); }); canvas.clipRect(Rect.fromLTWH(0, 0, pack.maxX, pack.maxY)); for (final rect in rects) { final packed = pack.pack(rect.width, rect.height); if (packed == Rect.zero) { print("unable to pack"); } else { final paint = Paint()..color = palette[rect.hashCode % palette.length]; canvas.drawRect(packed, paint); final tp = TextPainter( text: TextSpan(text: fu[rect].toString()), textAlign: TextAlign.left, textDirection: TextDirection.ltr, ); tp.layout(maxWidth: rect.width); tp.paint(canvas, Offset(packed.left, packed.top)); } } print(pack.maxX); print(pack.maxY); final bounds = pack.bounds; print(bounds); print(totalTiles); final picture = canvasRecorder.endRecording(); final image = await picture.toImageSafe(bounds.width.toInt(), bounds.height.toInt()); final bytes = await image.toByteData(format: ImageByteFormat.png); final canvasPixelData = bytes!.buffer.asUint8List(); await File('packed.png').writeAsBytes(canvasPixelData); } final palette = [ const Color(0xff2e222f), const Color(0xff3e3546), const Color(0xff625565), const Color(0xff966c6c), const Color(0xffab947a), const Color(0xff694f62), const Color(0xff7f708a), const Color(0xff9babb2), const Color(0xffc7dcd0), const Color(0xffffffff), const Color(0xff6e2727), const Color(0xffb33831), const Color(0xffea4f36), const Color(0xfff57d4a), const Color(0xffae2334), const Color(0xffe83b3b), const Color(0xfffb6b1d), const Color(0xfff79617), const Color(0xfff9c22b), const Color(0xff7a3045), const Color(0xff9e4539), const Color(0xffcd683d), const Color(0xffe6904e), const Color(0xfffbb954), const Color(0xff4c3e24), const Color(0xff676633), const Color(0xffa2a947), const Color(0xffd5e04b), const Color(0xfffbff86), const Color(0xff165a4c), const Color(0xff239063), const Color(0xff1ebc73), const Color(0xff91db69), const Color(0xffcddf6c), const Color(0xff313638), const Color(0xff374e4a), const Color(0xff547e64), const Color(0xff92a984), const Color(0xffb2ba90), const Color(0xff0b5e65), const Color(0xff0b8a8f), const Color(0xff0eaf9b), const Color(0xff30e1b9), const Color(0xff8ff8e2), const Color(0xff323353), const Color(0xff484a77), const Color(0xff4d65b4), const Color(0xff4d9be6), const Color(0xff8fd3ff), const Color(0xff45293f), const Color(0xff6b3e75), const Color(0xff905ea9), const Color(0xffa884f3), const Color(0xffeaaded), const Color(0xff753c54), const Color(0xffa24b6f), const Color(0xffcf657f), const Color(0xffed8099), const Color(0xff831c5d), const Color(0xffc32454), const Color(0xfff04f78), const Color(0xfff68181), const Color(0xfffca790), const Color(0xfffdcbb0), ]; const sets = r''' '''; ```

[spydon]

Can I assign this to you @jtmcdole? :)

[Hwan-seok]

@jtmcdole No problem! Are there any actions that I can help you with?

[jtmcdole]

Can I assign this to you @jtmcdole? :)

Yes. I still havn't reprod the case yet - but I've been really side tracked. I'm interested if forcing only 4K textures would be the correct solution.

[Hwan-seok]

I tested by giving some changes to the size of the bin packer.

The video is from Galaxy Z flip 3.

8192(default)

https://user-images.githubusercontent.com/38072762/210290213-d6d86074-5fb8-46d2-931c-27de16940c15.mp4

4096

• The FPS is slightly increased but still not good.

https://user-images.githubusercontent.com/38072762/210290861-60803df2-4217-4bcd-9ad1-20036990aa46.mp4

2048

• This seems FPS became normal but the packing is failed.
• I found something strange in here. when the character moves (camera position is changing), the FPS is increasing up to 60 as you can see in the video. But when after stabilized, the FPS drops until middle 30s.

https://user-images.githubusercontent.com/38072762/210290853-c82651b1-43fe-472d-9bb5-b3c01fd2c0c0.mp4

[spydon]

@Hwan-seok is it the same behaviour on all platforms?

[Hwan-seok]

@spydon

On IOS, it immediately crashes with following logs

libc++abi: terminating with uncaught exception of type std::bad_alloc: std::bad_alloc thread #10, name = 'io.flutter.1.raster', stop reason = signal SIGABRT frame #0: 0x00000001b7375b38 libsystem_kernel.dylib__pthread_kill + 8 libsystem_kernel.dylib__pthread_kill: -> 0x1b7375b38 <+8>: b.lo 0x1b7375b58 ; <+40> 0x1b7375b3c <+12>: pacibsp 0x1b7375b40 <+16>: stp x29, x30, [sp, #-0x10]! 0x1b7375b44 <+20>: mov x29, sp Target 0: (Runner) stopped. Lost connection to device.

The app immediately crashed after TiledComponent was loaded in the past test. I have some problems with my physical IOS devices currently so I only re-tested on the simulator and YES it also has the problem.

Unfortunately, my project does not contains the web. So I cannot confirm it.

Edit: I also tested in the physical device(IPhone 12 mini) and it immediately crashes with similar logs

* thread #1, queue = 'com.apple.main-thread', stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY (limit=2098 MB, unused=0x0)
    frame #0: 0x000000019926dde0 libdispatch.dylib`voucher_activity_trace_v_2 + 96
libdispatch.dylib`voucher_activity_trace_v_2:
->  0x19926dde0 <+96>:  ldr    w8, [x24, #0x610]
    0x19926dde4 <+100>: cmn    w8, #0x1
    0x19926dde8 <+104>: b.eq   0x19926e27c               ; <+1276>
    0x19926ddec <+108>: str    xzr, [sp, #0x58]
Target 0: (Runner) stopped.

[Hwan-seok]

@jtmcdole I tested in an isolated environment because possibly the problem is in my project. But the issue remains.

The followings are other maps that I tested and they almost don't have an issue. The FPS became nearly normal. Edit: It also drops FPS. But just the amount is less. It shows 20~30 FPS.

1. <tileset firstgid="1" name="meta_tile" tilewidth="32" tileheight="32" tilecount="1" columns="1">
   <image source="..." width="32" height="32"/>
   </tileset>
   <tileset firstgid="2" name="mirasoul" tilewidth="32" tileheight="32" tilecount="322" columns="14">
   <image source="..." width="448" height="736"/>
   </tileset>
   <tileset firstgid="324" name="mirasoul_2" tilewidth="32" tileheight="32" tilecount="210" columns="15">
   <image source="..." width="484" height="450"/>
   </tileset>
   <tileset firstgid="534" name="mirasoul_3" tilewidth="32" tileheight="32" tilecount="130" columns="10">
   <image source="..." width="320" height="417"/>

2. <tileset firstgid="1" name="Room_Builder_32x32" tilewidth="32" tileheight="32" tilecount="8284" columns="76">
   <image source="...." width="2432" height="3488"/>
   </tileset>
   <tileset firstgid="8285" name="music_map_asset_1" tilewidth="32" tileheight="32" tilecount="400" columns="20">
   <image source="...." width="640" height="640"/>
   </tileset>
   <tileset firstgid="8685" name="generic" tilewidth="32" tileheight="32" tilecount="1248" columns="16">
   <image source="...." width="512" height="2496"/>
   </tileset>
   <tileset firstgid="9933" name="basement" tilewidth="32" tileheight="32" tilecount="800" columns="16">
   <image source="...." width="512" height="1600"/>
   </tileset>
   <tileset firstgid="10733" name="meta_tile" tilewidth="32" tileheight="32" tilecount="1" columns="1">
   <image source="...." width="32" height="32"/>
   </tileset>
   <tileset firstgid="10734" name="Modern_Exteriors_Complete_Tileset_32x32" tilewidth="32" tileheight="32" tilecount="4134" columns="39">
   <image source="...." width="1248" height="3392"/>
   </tileset>
   <tileset firstgid="14868" name="fishing" tilewidth="32" tileheight="32" tilecount="432" columns="16">
   <image source="...." width="512" height="864"/>
   </tileset>
   <tileset firstgid="15300" name="hospital" tilewidth="32" tileheight="32" tilecount="1760" columns="16">
   <image source="...." width="512" height="3520"/>
   </tileset>
   <tileset firstgid="17060" name="cafe_map_asset" tilewidth="32" tileheight="32" tilecount="841" columns="29">
   <image source="...." width="958" height="958"/>
   </tileset>
   <tileset firstgid="17901" name="UI_32x32" tilewidth="32" tileheight="32" tilecount="252" columns="18">
   <image source="...." width="576" height="448"/>
   </tileset>
   <tileset firstgid="18153" name="exterior" tilewidth="32" tileheight="32" tilecount="612" columns="18">
   <image source="...." trans="ff00ff" width="576" height="1088"/>
   </tileset>
   <tileset firstgid="18765" name="desk_asset_2" tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <image source="...." width="320" height="320"/>
   </tileset>
   <tileset firstgid="18865" name="celeb_light_h_3" tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <image source="...." width="320" height="320"/>
   </tileset>
   <tileset firstgid="18965" name="board_n" tilewidth="32" tileheight="32" tilecount="100" columns="10">
   <image source="...." trans="ff00ff" width="320" height="320"/>
   </tileset>

[Hwan-seok]

This is for memory usage. Seems memory usage is significantly increased. Also, the graph shows some inclination.

Before

After

[st-pasha]

Based on

stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY (limit=2098 MB, unused=0x0)

it appears that the problem is that the device is running out of memory. Though normally this shouldn't trigger a crash, it probably indicates some problem in the underlying Flutter framework or even lower. So, if there was a way to create an MRE, it would be great to post it to Flutter's repo.

As far as fixing the problem, it might be possible to do it on our side one way or another:

• the TiledAtlas contains a clone() method which creates a copy of the atlas image -- I'm not sure why we decided such copy was necessary, but perhaps it can be avoided after all. At the very least I'd suggest adding a simple print statement inside that method, so that we can see how often the atlas is being copied. If it happens on every game tick for whatever reason, then it would be a big problem...
• I see that @Hwan-seok's atlas contains a large number of tilesets, each containing several hundreds of smaller 32x32 images. As a result, the tilesets end up being packed very loosely in the final image, which is not ideal. A better approach would be to split those tilesets into individual images, so that the final atlas will have almost no gaps at all.
• there is a small problem in TileAtlas.fromTiledMap() constructor, where it doesn't check that the rect returned from RectangleBinPacker has non-zero size. In fact, there is no check that the size of loaded image corresponds to the size of TiledImage -- this could potentially lead to the corruption of the resulting atlas, if we're copying image of incorrect size.

[Hwan-seok]

I finally managed to find what was causing this. This is strongly related to "flips". I mentioned the flips are impacting performance in #1614 and #1714. Here you can see the atlas is expanded to 2x width size when using flips https://github.com/flame-engine/flame/blob/7662118d14701a08ed07b83d31394f29e98ec7f0/packages/flame/lib/src/sprite_batch.dart#L215-L236 Even though the atlas made by RectangleBinPacker has 8k texture, the SpriteBatch makes it to 16k texture if flip exists.

To prove flips are causing this, I replaced the following line to final flips = SimpleFlips.fromFlips(Flips.defaults()); and the problem was gone. https://github.com/flame-engine/flame/blob/7662118d14701a08ed07b83d31394f29e98ec7f0/packages/flame_tiled/lib/src/renderable_layers/tile_layer.dart#L112

Would you assign this to me @spydon?

[spydon]

Well researched @Hwan-seok, assigned it to you!

[spydon]

@Hwan-seok can this issue be closed?

[Hwan-seok]

@spydon TiledAtlas makes the bigger images for SpriteBatch, so I think this issue cannot be fixed by Flame itself but https://github.com/flutter/flutter/issues/120215 will be. Please mark this as a Flutter issue. Thanks!