How to sync GameObject.visible with Network?

🌵 Needle Engine
1

Good day. We want to sync the GameObject.visible in the network. So when I make an object disappear it is synced to the other users as well.

2

Hi FragstreetBoy,

To sync the GameObject.visible state across the network in Needle Engine, you can utilize the existing networking framework to send visibility changes to other users in real-time. Below is a structured approach on how to achieve that:

  1. Define a Behaviour: Create a custom behaviour that listens for visibility changes and communicates these changes over the network.

  2. Set Up the Networking Logic: Use the appropriate networking methods to broadcast the visibility state when it changes.

  3. Listen for Updates: Register a listener for incoming visibility changes so other clients can update their local visibility state accordingly.

Here’s a basic implementation example in TypeScript:

import { Behaviour, syncField } from "@needle-tools/engine";

class SyncVisibility extends Behaviour {
    @syncField() visible: boolean = true; // Automatically sync this field across the network

    setVisible(isVisible: boolean) {
        this.visible = isVisible;
        this.gameObject.visible = isVisible; // Update local visibility
    }

    awake() {
        // Setting up a listener for visibility change events on the network
        this.context.connection.beginListen("visibilityChanged", this.updateVisibility.bind(this));
    }

    updateVisibility(data: { guid: string, isVisible: boolean }) {
        if (data.guid === this.guid) {
            this.gameObject.visible = data.isVisible; // Update the visibility based on incoming data
        }
    }

    onDestroy() {
        this.context.connection.stopListen("visibilityChanged", this.updateVisibility.bind(this));
    }
}

Explanation:

  • syncField() decorator is used to automatically synchronize the visible property across all clients in the room, so any changes made will be propagated.
  • setVisible() method allows you to change the visibility, which will also update the synchronized property.
  • updateVisibility() receives visibility change notifications from the network and applies them to the local game object’s visibility state.

Usage:

  1. Attach the SyncVisibility component to any GameObject you wish to synchronize visibility for.
  2. Call setVisible(true/false) whenever you want to change the visibility, and it will automatically reflect the changes on other clients.

For more details, you can refer to the networking section in the documentation .

Feel free to ask if you have additional questions or need further modifications to the code!

3 replies left
thread_0kv5Rv6b4j5K13AJLUpoGM7P
Reply to this message to continue the conversation

3

Hi, I created an example on stackblitz.

If you use Unity or Blender you can just copy paste the example NetworkVisibility component in your src/scripts folder for example and add it to the objects that you want to network

(you can open the URL in e.g. 2 windows and click on the cube in one of them. Note that the code in onStart is just an example for stackblitz and has a few hardcoded values)

Let me know if that helps

4

Thank you marcel, I will test this!