Synchronize a button click?

🌵 Needle Engine
1

How do I synchronize a button click in network room?

Original Post on Discord

by user 684154017479524352

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

3

Here is what I found for you :brain: Discord

4

Hello Matmat, to synchronize a button click event across a network room in Needle Engine, you’d typically follow these steps:

  1. Ensure that your project has a SyncedRoom component present and properly configured for networking.
  2. Add an Interactable component to the button GameObject that will respond to user input.
  3. Use the SyncedTransform component to synchronize the state of the GameObject across the network.
  4. Listen for button click events and when one occurs, send a network message with this.context.connection to other clients in the room.
  5. Handle the network message on the receiving clients to execute the button click logic.

Here’s a sample Typescript code snippet illustrating this process:

*thread_9ro3PREBqkzpOvsOCbLgveDx*
5

typescript
import { Behaviour, SyncedRoom, Interactable, Connection } from “@needle-tools/engine”;
import { Object3D } from “three”;

export class SyncedButtonClick extends Behaviour {
private room: SyncedRoom;

@serializable(Object3D)
public buttonObject: Object3D;

awake() {
    this.room = this.gameObject.getComponent(SyncedRoom);
    const interactable = this.buttonObject.getOrAddComponent(Interactable);
    interactable.onClick = () => this.onButtonClick();
}

private onButtonClick() {
    if(this.room.isOwner) {
        const message = { action: 'buttonClick', objectId: this.buttonObject.uuid };
        this.context.connection.sendMessage(message);
        this.performButtonClick();
    }
}

update() {
    this.context.connection.onMessageReceived = (sender, message) => {
        if(message.action === 'buttonClick' && message.objectId === this.buttonObject.uuid) {
            this.performButtonClick();
        }
    };
}

private performButtonClick() {
  // Logic for what happens when the button is clicked
  // e.g., open a door, start an animation, etc.
}

}

*thread_9ro3PREBqkzpOvsOCbLgveDx*
6

In this code:

  • @serializable(Object3D) is used to bind the buttonObject from the editor.
  • awake method configures the SyncedRoom and sets up the click listener on the Interactable component.
  • onButtonClick send a message to all clients if the current client is the owner.
  • update method listens for incoming messages.
  • performButtonClick contains the actual button click logic to be performed.

Remember, this code assumes that you have set up networking appropriately and that Interactable and SyncedRoom components are in place. You might need to adapt the message handling and state synchronization to fit the specifics of your project.

4 messages left GPT 4
thread_9ro3PREBqkzpOvsOCbLgveDx

7

You could also use the @syncField decorator on e.g. a number field or string and use the changed callback to recognize when the button was clicked by someone Typescript Decorators | Needle Engine Documentation

8

Another example: Script Examples | Needle Engine Documentation

9

Here is how the configurator sample uses syncfields to network your selection: needle-engine-samples/package/Runtime/Configurator/Scripts/Configurator~/Configurator.ts at 387cac4a35027055adf38475411e931de7c3f800 · needle-tools/needle-engine-samples · GitHub

10

thank you :cactus: for the extensive information.I’m excited to see if I can get this built.

by user 684154017479524352