UI Synchronization

This addons provides classes to synchronize some Unity UI components like buttons, dropdown, scroll view, etc.
We haven't attempted to provide an exhaustive list of synchronized UI elements.
The aim is to show an example of implementation on a few elements, so that you can easily add other components yourself if necessary.

PLAY VIDEO

Fusion UI Synchronization

Implementation

To synchronize a UI :

• add a NetworkObject component on the UI element to synchronize (or on a parent if several UI elements state authority must be managed together). Make sure the parameter Allow State Authority Override is enabled if the UI state authority could switch between users.
• add the corresponding synchronization script on the UI component (UISync_Button for a Button, UISync_Slider for a Slider, etc.)

Components

Button

UISync_Button is used to synchronize Button components.
It listens to the slibbing button onClick event to be notified when the local user interacts with it.
If the local user doesn't have state authority over the component, it requests it if interactions for proxies are allowed (disableInteractionWhenNotStateAuthority == false)
When the local user has the state autorithy on the button, the ButtonClickValue network variable is incremented each time the local user presses the button.

So remote users (proxies) are therefore notified and :
- it displays a visual feedback on the button component,
- it triggers an onButtonTouched event.

Toggle

UISync_Toggle is used to synchronize Toggle components.
It listens to the slibbing toggle onValueChanged event to be notified when the local user interacts with it.
If the local user doesn't have state authority over the component, it requests it if interactions for proxies are allowed (disableInteractionWhenNotStateAuthority == false)
When the local user has state autorithy on the toggle, the ToggleIsOn network variable is updated each time the local user presses the toggle.

So remote users (proxies) are therefore notified and :
- it triggers an onToogleValueChanged event.

Dropdown

UISync_Dropdown is used to synchronize Dropdown components.
It listens to the slibbing dropdown onValueChanged event to be notified when the local user interacts with it.
If the local user doesn't have state authority over the component, it requests it if interactions for proxies are allowed (disableInteractionWhenNotStateAuthority == false)
When the local user has state autorithy on the dropdown, the DropdownValue network variable is updated each time the local user select a new entry in the dropdown.

So remote users (proxies) are therefore notified and :
- the corresponding entry is selected in the dropdown component,
- it triggers an onDropdownValueChanged event.

Slider

UISync_Slider is used to synchronize Slider components.
It listens to the slibbing slider onValueChanged event to be notified when the local user interacts with it.
If the local user doesn't have state authority over the component, it requests it if interactions for proxies are allowed (disableInteractionWhenNotStateAuthority == false)
When the local user has state autorithy on the slider, the SliderValue network variable is updated each time the local user changes the slider value.

So remote users (proxies) are therefore notified and :
- it updates the slider value,
- it triggers an onSliderValueChanged event

ScrollRect

UISync_ScrollRect is used to synchronize ScrollRect components.
It listens to the slibbing scrollRect onValueChanged event to be notified when the local user interacts with it.
If the local user doesn't have state authority over the component, it requests it if interactions for proxies are allowed (disableInteractionWhenNotStateAuthority == false)
When the local user has state autorithy on the scrollRect, the ScrollRectPosition network variable is updated each time the local user interacts with the scrollRect.

So remote users (proxies) are therefore notified and :
- it updates the scrollRect value,
- it triggers an onScrollRectValueChanged event

CanvasGroup

UISync_CanvasGroup is used to set the canvas group interactable parameter based on state authority :
- if user has the state authority, the canvas group is automatically configured to be interactable,
- if user has not the state authority, the canvas group is automatically configured not to be interactable,

By changing and synchronizing the state of canvas groups, it is possible to disable all the interactable components of a UI at once.
Also, it is possible to modify the canvas group visibilty according to the state autorithy (alphaAppliedOnCanvasGroupForStateAuthority and alphaAppliedOnCanvasGroupForProxies parameters).

Demo

Two demo scenes can be found in Assets\Photon\FusionAddons\UISynchronization\Demo\Scenes\ folder.

Both scenes are similar, only the interaction system is different.

• FusionUISync : it uses our XRShared interaction system
• FusionUISync_XRIT : it uses Unity XR Interaction Toolkit

Demo scenes show several UI implementations in a multi-user context :

• all users can interact with an UI in the same time. In this case, the state authority on the UI object will change each time a different user will interact with the UI.
• only the state authority can interact with the UI. In this case, proxies can not interact with the UI until they have requested the state authority. In this demo, users can request the state authority of the UI by pressing an additionnal button, but they could also to so in another way, by grabbing the UI object for example.
• the UI visibilty (alpha) can be differente according to the user status (state authority or proxy).
• users can have a different UI based on their status (state authority or proxy)

The UI shown in demo scenes are for illustrative purposes only and are a modified version of the UI included in the Unity Hands Interaction Demo scene..

Dependencies

• XRShared addon

Download

This addon latest version is included into the Industries addon project

Supported topologies

• shared mode

Changelog

• Version 2.0.0: First release