CODEWITHSUNDEEP
flutterdrag-and-dropflame
Phil Ciraolo
Phil Ciraolo

Reputation: 37

Flutter Flame Drag & Drop

I have a Flutter App with Flame. I need to drag and drop SpriteComponents. I also have a Tiled map added to world that has a SpriteComponent (named cell) added to each Tile. I need to drop other SpriteComponents on the Cell Sprite component and then have it add the dragged component to the children of the Cell component. To find the correct Cell component (under the dragged component) that I'm dropping on, I iterate a List of the Cells with their x/y vales (created during game load) and check against the x & Y values of the component being dropped and return the Cell under the dragged component. This worked fine using the event.canvasPosition.x and y in the DragEnd method (I store the event.canvasPosition in the onDragUpdate method). However I had to add a Camera to make the game display properly and when I do that I can nolonger get correct x/y coordinates from the event.canvasPosition. It seems to be skewed when I drag a component. The dragged component gradually moves away from my finger as I move and when I drop the X/Y is also incorrect.

How do I get a reference to the cell that I am dropping on using flame? If there is a better way to accomplish this I'm all ears. :)

Here is some of the code that I'm using:

 camera = CameraComponent.withFixedResolution(
        world: world, width: 1280, height: 704);

    camera.moveTo(
        Vector2(level.size.x * 0.5, camera.viewport.virtualSize.y * 0.5));

    add(world);
    add(camera);


@override
  void onDragUpdate(DragUpdateEvent event) {
    final cameraZoom =
        (findGame()!).firstChild<CameraComponent>()!.viewfinder.zoom;
    position += event.delta / cameraZoom;
    position.add(event.delta);
   
    dropX = event.canvasPosition.x;
    dropY = event.canvasPosition.y;

    //Also tried position which didnt work
    //dropX = position.x;
    //dropY = position.y;
  }

  @override
  void onDragEnd(DragEndEvent event) {
    super.onDragEnd(event);

    CellBlock? cb = getDroppedOn(dropX, dropY, this);

    if (cb != null) {
      cb.add(MyComponent);
      parent!.remove(this);
    } else {
      //not a cell
      parent!.remove(this);
    }
  }

Upvotes: 0

Views: 605

Answers (1)

spydon
spydon

Reputation: 11512

If you update to Flame v1.11.0 (which was released yesterday) this issue is now solved and the drag deltas are in the correct coordinate space.

Upvotes: 0

Related Questions