Installing the Cavrnus Plugin (Unreal Engine)
As with any Unreal plugin, adding the The Cavrnus Spatial Connector is a simple 3 step process:
Drop the latest version of the CSC plugin into the Plugins folder of your project files.
...
Load the project in Unreal Editor and enable the CSC plugin in the Plugins Manager
...
Restart the Unreal Editor as indicated.
...
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. |
Initial Cavrnus Setup
The first time the project is opened with the enabled plugin, the Cavrnus Spatial Connector dialog box will display to guide the initial setup.
...
Set up your Space - Adds an instance of the CavrnusSpatialConnector to the current map.
Web Console - Open the Cavrnus Web Console in the default browser.
Visit Documentation - Open the online documentation in the default browser. (You’re already here!)
Show when Unreal Editor Starts - Toggle this checkbox off to
Dismiss - Close the dialog.
Click Set up your Space to add an instance of the CavrnusSpatialConnector to the current map.
...
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.
As described in the Setup Your Scene guide, 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. (e.g. 65d51cde823bca2e0f0bc79c)
...
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 “BPBP_MouseDragGameMode”CarConfigGM.
From the World Settings panel, expand the Game Mode rollout.
In the “GameMode Override” field, note the entry says “BP_MouseDragGameMode”CarConfigGM”.
This project also uses a custom Default Pawn HUD Class “BP_MouseGrabPawn”_HUD_CarConfig” that references a custom Widget Blueprint : WB_CarConfig.
Setup the Synchronization workflow
The synchronization of the car color takes place in 3 steps.
Step 1: Update the Journal with a string value that describes the car color selected.
Step 2: Use the Cavrnus SyncMaterial component to update the car material with a texture corresponding to the color in the Journal.
Step 3: Create a texture map that will serve as a reference between the name (string) value of the color in Step 1 with the texture reference in Step 2.
In the
...
Content Browser, under
...
Note that the Default Pawn Class references “BP_MouseGrabPawn”.
...
Click the “Browse to Asset in Content Browser” button next to the field.
...
Open the “BP_MouseGrabPawn” 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
...
Content/Widgets, open the Widget Blueprint “WB_CarConfig”.
Click the “Graph” button on the top right of the Widget Blueprint Editor.
Note that Event stubs have already been placed for this Blueprint.
| Info |
|---|
Before we can post string properties to a space, we first have to confirm that the space has been connected. |
From the Execution Pin of the Event Construct node, attach the function Await Any Space Connection.
This dispatcher is part of the Cavrnus Function Library
Bind a custom Event to the “On Connected” pin of the Await Any Space Connection node.
Give this a logical name, such as “SetCurrentSpaceConnection”.
Right-click the “Space Connection” pin in SetCurrentSpaceConnection and select “Promote to Variable”.
Give the variable a logical name, such as “SpaceConnection”.
From the list of Variables under “My Blueprint”, drag the “Connected?” boolean variable and drop it on the execution pin of the Set Space Connection node.
This will add a Set node for that variable.
Check the box in the Set Connected? node to set it to true.
| Tip |
|---|
Now that the connection to a Space is confirmed, let’s set the behavior for the HUD buttons. |
For each On Clicked event for the 5 button colors, connect a Post String Property Update node to the “True” pin of the branch node.
Space Connection: Drag the “SpaceConnection” variable onto this pin to connect it as a get node.
Container Name: Car
Property Name: CarColor
Property Value: Reference the “Property Value” in the table below
Button Color | Property Value | Texture File Name |
|---|---|---|
White | car-color-white | car-color-white.png |
Black | car-color-black | car-color-black.png |
Red | car-color-red | car-color-red.png |
Blue | car-color-blue | car-color-blue.png |
Yellow | car-color-yellow | car-color-yellow.png |
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. |
...
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!
...
...