Drag item with several SyncedTransform children

🌵 Needle Engine
1

Is there any way for me to gain ownership of all children elements when draging the element around? Currently when user starts dragging something around using DragControls only the first element is acquired which is somewhat cumbersome.

image
image1037×733 38 KB

One way would be to have the room gameobject have SyncedTransform but since I need for the children elements to also have SyncedTransform that would be a quick way to get too many request and desync.

2

Hi Gilderko!

To achieve the desired functionality where you can drag an item along with all its SyncedTransform children while using DragControls, you can consider the following approach:

  1. Listen for Drag Events: When the drag starts, capture the current positions of all children.
  2. Synchronize Movement: During the drag, apply the same transformation to all children based on the movement of the parent.
  3. Sync Ownership: Ensure that when you grab the parent object, you’re also managing the ownership of all children, preventing any desynchronization.

Here’s a basic outline in pseudocode for implementing this:

onDragStart(object parent) {
    // Store initial positions of the parent and all children
    initialParentPosition = parent.position
    initialChildrenPositions = []
    
    for each child in parent.children {
        initialChildrenPositions.push(child.position)
    }
}

onDrag(object parent, float deltaX, float deltaY) {
    // Update parent position based on drag
    parent.position.x += deltaX
    parent.position.y += deltaY
    
    // Move all children accordingly
    for index in 0 to parent.children.length {
        child = parent.children[index]
        child.position.x = initialChildrenPositions[index].x + (parent.position.x - initialParentPosition.x)
        child.position.y = initialChildrenPositions[index].y + (parent.position.y - initialParentPosition.y)
    }
}

onDragEnd(object parent) {
    // Finalize position sync
    syncPositionsWithServer(parent)
}

In code, here is how you might implement this logic in a Needle Engine context:

import { DragControls, SyncedTransform } from "@needle-tools/engine";

// Setup Drag Controls
const controls = new DragControls(objectsToDrag, camera, renderer.domElement);

controls.addEventListener('dragstart', (event) => {
    onDragStart(event.object);
});

controls.addEventListener('drag', (event) => {
    const deltaX = ...; // Calculate delta based on drag behavior
    const deltaY = ...;
    onDrag(event.object, deltaX, deltaY);
});

controls.addEventListener('dragend', (event) => {
    onDragEnd(event.object);
});

// Define your functions `onDragStart`, `onDrag`, and `onDragEnd` as described above

Make sure to handle synchronization with your server after the drag ends to maintain data consistency. If you’re experiencing ownership issues with SyncedTransform, you might have to implement manual syncing in the onDrag method to ensure all children follow the parent.

If you have further questions or details about the setup (like versions or specific behaviors), feel free to share!

1 replies left - Get a PRO license for more AI replies.
thread_QinHB0hfK4aSlX57XTc76ETn
Reply to this message to continue the conversation