SpriteBatch not work in Chrome

[unger1984]

Description

doc/examples/sprite_batch not work in flutter web (Chrome). Crashed on render method of SpriteBatch

Development environment

Flame version:

branch develop

======== Exception caught by rendering library =====================================================
The following UnimplementedError was thrown during paint():
UnimplementedError

When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49  throw_
lib/_engine/engine/html/canvas.dart 521:5                                     drawAtlas
packages/flame/sprite_batch.dart 73:11                                        render
packages/flame/components/sprite_batch_component.dart 21:17                   render
packages/flame/game/base_game.dart 113:6                                      renderComponent
...
The following RenderObject was being processed when the exception was fired: GameRenderBox#4579d
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=500.0, h=966.0)
...  size: Size(500.0, 966.0)
RenderObject: GameRenderBox#4579d
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=500.0, h=966.0)
  size: Size(500.0, 966.0)
==========================================================================================

Flutter doctor:

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.7 19H15 darwin-x64, locale ru)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.1.1)
[✓] Chrome - develop for the web
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3)
[✓] VS Code (version 1.51.1)
[✓] Connected device (3 available)

Runtime

This issue is related to running on which platform? (Select all that apply)

• Android :android:
• iOS 🍎
• Web :browser:

Minimal reproducible code (Required for bugs)

https://github.com/flame-engine/flame/tree/develop/doc/examples/sprite_batch

[erickzanardo]

SpriteBatch uses an API that is not available on web, I wonder if we should add an assert on it to check if this is running on web. Or if we could somehow implement the Spritebatch API without using drawAtlas. Any thoughts @wolfenrain ?

[unger1984]

flutter/flutter#32217 canvas.drawAtlas added to the ToDo list with priority 5

[wolfenrain]

SpriteBatch uses an API that is not available on web, I wonder if we should add an assert on it to check if this is running on web. Or if we could somehow implement the Spritebatch API without using drawAtlas. Any thoughts @wolfenrain ?

This is still my plan indeed, haven't gotten around on implementing it. It has some problematic caveats with it because of the RSTransforms that are used internally by the SpriteBatch. We cant reuse the transforms for other draw calls. So we need to introduce a different way of caching the original values.

The RSTransform only keeps the values that it calculates based on the arguments that go into its constructor. But we need the original arguments. One idea is wrapping the RSTransform into our own class that saves both the transform and the original values, so we can use either one of them depending on the platform.