New PositionEvent API: deliverAtPoint does not take into account camera transformations

[tibotix]

Current bug behavior

The PositionEvent.deliverAtPoint function uses Component.componentsAtPoint(canvasPosition, renderingTrace) to find all affected components. As canvasPosition does not apply any camera transformation, it is actually not "local" to the rootComponent, as expected by componentsAtPoint (
from here:
/// An iterable of descendant components intersecting the given point. The
/// [point] is in the local coordinate space.
[...]
). This leads to some components not receiving tap/drag events while they definitely should.
A workaround is to transform the point in containsLocalPoint manually, but that shouldn't be the final solution.

Expected behavior

Components in a FlameGame with camera zoom receive tap/drag events while not having to override containsLocalPoint.

Steps to reproduce

The rectangle changes its color if tapped. With zoom: 10 only a tiny portion on the top left corner is sensitive to tap events. When clicking at the middle of the rectangle, nothing happens. With zoom: 1 everything is fine.
Example: https://zfy062sfz06.zapp.page/
Code:

import 'package:flame/components.dart';
import 'package:flame/experimental.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';
import 'package:flame_forge2d/flame_forge2d.dart';

void main() {
  runApp(
    GameWidget(
      game: MyGame(),
    ),
  );
}

class MyGame extends Forge2DGame {
  MyGame() : super(zoom: 10, gravity: Vector2.zero());

  @override
  Future<void> onLoad() async {
    await add(MyButton());
  }
}

class MyButton extends RectangleComponent with TapCallbacks, HasGameRef<MyGame> {
  List<Color> colors = [Colors.blue, Colors.red];
  int colorIndex = 0;

  @override
  Future<void> onLoad() async {
    await super.onLoad();
    size = game.size / 5;
    scale = Vector2.all(1.0);
    toggleColor();
  }

  void toggleColor(){
    paint = Paint()..color = colors[colorIndex++%2];
  }

  // WORKAROUND:
  // @override
  // bool containsLocalPoint(Vector2 point){
  //   return super.containsLocalPoint(game.screenToWorld(point));
  // }

  @override
  void onTapDown(TapDownEvent event){
    super.onTapDown(event);
    toggleColor();
  }
}

Flutter doctor output

Output of: flutter doctor -v
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.10.3, on Microsoft Windows [Version
    10.0.19045.2965], locale de-DE)
    • Flutter version 3.10.3 on channel stable at
      C:\Users\<redacted>\Documents\Flutter\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f92f44110e (3 weeks ago), 2023-06-01 18:17:33
      -0500
    • Engine revision 2a3401c9bb
    • Dart version 3.0.3
    • DevTools version 2.23.1

[...]

More environment information

• Flame version: 1.7.3
• Platform affected: probably all
• Platform version affected: probably all

More information

The old legacy Tap/Drag APIs do not have this problem, as the parameter to containsPoint is first transformed through eventPosition(info) (here).

[spydon]

Unfortunately flame_forge2d is in a bit of a bad state now since it hasn't fully been converted to use the CameraComponent.
The new event system does not take the old Camera into consideration, we're working on fixing it but since we have a lot to do for FlutterCon it probably won't be fixed until mid July or so.
I recommend using an old version of Flame with flame_forge2d until this is solved.