Game Engine | Unity |
Tutorial Level | Easy |
Properties | Sync Material |
Project Files |
In this tutorial, we will take a closer look at the No-Code Collaboration Sync Material /wiki/spaces/CSM/pages/881426433 component.
Starting Project
This scene presents a car model with several interactive features. In this tutorial we will be focusing on swapping the base color texture to change the car’s paint body color.
A sports car with 5 available color schemes.
A HUD with 5 buttons corresponding to the 5 color schemes.
No special game logic other than modifying the paint material based on which button is selected.
No physics applied (see: Sync Property Components and Physics)
...
| primaryTab | true |
|---|---|
| colorPalettes | Default |
| an.spaceKey | CSM |
| tabsPageTitle | Unity |
| color | #00875A |
| fixed | false |
| id | g6wcjgbgpu6 |
| backgroundColorPalette | Default |
| headerStyle | Filled |
...
| tabsPageTitle | Unreal |
|---|---|
| colorPalettes | Default |
| an.spaceKey | CSM |
| color | #0052CC |
| id | ikr0f7bi4g |
| backgroundColorPalette | Default |
Installing the Cavrnus Plugin (Unreal Engine)
The Cavrnus Spatial Connector plugin for Unreal has already been installed in this project. For guidance on how to add the CSC-Unreal plugin for your new projects, or to upgrade your plugin to a newer version, see the documentation under “Cavrnus for Administrators”.
| Tip |
|---|
This project comes pre-installed with the Cavrnus Spatial Connector plugin enabled. The next steps will connect a specific map in the project to a Cavrnus server. |
Testing the Demo
To get an idea of what this demonstration will do, load the preconfigured map called “Cavrnized_CarConfigurator”.
In the Content Browser, under Content/Maps, double-click the “Cavrnized_CarConfigurator” level.
In the outliner, scroll down to the “Cavrnus” folder and click the CavrnusSpatialConnector actor.
In the Details panel, configure the settings for the CavrnusSpatialConnector on the Details panel:
Domain Name: cav.dev.cavrn.us
Auth Method: Guest Join Auto
Guest Join Username: <Enter any name here>
Space Join Method: Automatic
Automatic Space Join ID: Reference a valid 24-character Space ID from the Web Console. (NOTE: Refer to the documentation on how to create a new Space and retrieve the Space ID).
...
Click the Play-In-Editor (PIE) button to run the level. (or press Alt-P)
...
Once the Space is connected, you can click any color button to change the color of the car.
...
Click the “Stop Simulation” button to stop PIE. (or press the Escape key).
Click the PIE button again to start the simulation.
...
Note that when the Space loads, the car will return to the last color you selected the last time you were loaded into the Space.
| Tip |
|---|
The Cavrnus Spatial Connector not only allows you to collaboratively edit scene with remote coworkers, but your changes will persist even after all users have left the Space. In the next steps, we will connect a new map to a Cavrnus server. |
Initial Cavrnus Setup
In the Content Browser, under the “Maps” folder, open the CarConfigurateScene level.
Add the CavrnusSpatialConnector instance to the level from the Cavrnus menu on the Unreal Editor Menu bar.
Note that you only need one instance of CavrnusSpatialConnector for a given level.
Setting up Cavrnus in Unity
As described in the Setup Your Scene guide,
...
Domain Name: cav.dev.cavrn.us
Auth Method: Guest Join Auto
Guest Join Username: <Enter any name here>
Space Join Method: Automatic
Automatic Space Join ID: Reference a valid 24-character Space ID from the Web Console. (NOTE: Refer to the documentation on how to create a new Space and retrieve the Space ID).
...
| Tip |
|---|
At this point, the level is now connected to a server and will directly enter a Space with copresence. The next step adds synchronization of level assets. |
Verify Heads Up Display (HUD) Class
This project uses a custom game mode called “BP_CarConfigGM”.
From the World Settings panel, expand the Game Mode rollout.
In the “GameMode Override” field, note the entry says “BP_CarConfigGM”.
This project also uses a custom HUD Class “BP_HUD_CarConfig”.
In the Content Browser, under Content/Widgets, open the Widget Blueprint “WB_CarConfig”.
Note that the HUD Class references “BP_HUD_CarConfig”.
Click the “Browse to Asset in Content Browser” button next to the field.
Open the “BP_HUD_CarConfig” blueprint from the Content Browser.
Under the Component panel in the blueprint editor, note the following components:
SyncTransform_Character
Property Name: Transform
NameTagWidget
CavrnusProperties Container
Add Sync Components to Chess Pieces
For each asset in the hierarchy that requires transform synchronization, add the following components
Sync Transform
Set the Property field to “Transform”. Note that this property is case-sensitive.
CavrnusPropertiesContainer
Set the Container Name field to “Pieces/Dark_Pieces/<asset_name>”, where “asset_name” refers to the name of the object as it appears in the Outliner.
...
| Tip |
|---|
And that’s it! The project is now fully connected to the Cavrnus server, with copresence and shared properties that will be synchronized with other users accessing the same Space. |
| Info |
|---|
It’s worth noting that if you have matching projects in Unity and Unreal where the objects/assets in the corresponding Heirarchy/Outliner match each other in name (case-sensitive), then running the applications in the same Space will synchronize with copresense! |
OK, Let’s Add a Custom Avatar for Fun
Alright, the Cavrnus Spatial Connector comes with a default Avatar, but if you wanna be a bit fun you can Add a Custom Avatar. In this case we’ve already found a fun 3rd party Floating Orb Avatar. Like in the Developer Guide, we’ll start by just giving it a Sync Transform component, like we did the Chess Pieces.
...
Then, in the Cavrnus Spatial Connector, we will set the Remote User Avatar to be this.
...
And now we’re actually done!
Final Product
With the Sync Transform components added, the Avatars and Chess Pieces will move in a synchronized way for both users. This, combined with Voice and Video, will let you play a chess game with whomever else launches this scene!
...
we will setup our Scene for Cavrnus using the dropdown button.
...
Then, as described in that same page, we will set the Cavrnus Spatial Connector to use our server, Login to our account automatically, and Automatically Join a “Chess” space we created in the web.
...