How to sync GameObject.visible with Network?

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.

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

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

Thank you marcel, I will test this!