Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Page Tree
rootCavrnus Knowledge Base
expandCollapseAlltrue
startDepth1

Let’s apply the No-Code Collaboration Sync Components to a real world example.

Starting Project

We are going to begin with a simple single-player Chess scene.

  • 32 movable chess pieces on a table.

  • A Reset button in-scene which resets all pieces to their original positions.

  • No special game logic other than moving pieces around on the board.

Cfm tabs page
tabsPageTitleprimaryTabUnitytrue
colorPalettesDefaultprimaryTabtrue
an.spaceKeyCSM
tabsPageTitleUnity
color#00875A
fixedfalse
idg6wcjgbgpu6
backgroundColorPaletteDefault
headerStyleFilled

Setting up Cavrnus in Unity

As described in the Setup Your Scene guide, we will setup our Scene for Cavrnus using the dropdown button.

image-20240223-103934.png

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.

image-20240223-104226.png

Add Sync Components to Chess Pieces

Next we will simply select all the pieces and Add Component Sync Transform in the Inspector.

image-20240223-104545.png

And we’re done! That’s it!

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.

image-20240223-104859.png

Then, in the Cavrnus Spatial Connector, we will set the Remote User Avatar to be this.

image-20240223-105008.png

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!

image-20240223-105311.png
Cfm tabs page
tabsPageTitleUnreal
colorPalettesDefault
an.spaceKeyCSM
color#0052CC
idikr0f7bi4g
backgroundColorPaletteDefault

Installing the Cavrnus Plugin (Unreal Engine)

As with any Unreal plugin, adding the Cavrnus Spatial Connector is a simple 3 step process:

  1. Drop the latest version of the CSC plugin into the Plugins folder of your project files.

image-20240301-182718.png
  1. Load the project in Unreal Editor and enable the CSC plugin in the Plugins Manager

image-20240301-183111.png
  1. Restart the Unreal Editor as indicated.

Tip

The project now has the Cavrnus Spatial Connector plugin enabled. The next steps will connect a specific map in the project to a Cavrnus server.

Initial Cavrnus Setup

  1. The first time the project is opened with the enabled plugin, the Cavrnus Spatial Connector dialog box will display to guide the initial setup.

image-20240301-183902.png
  • 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.

  1. Click Set up your Space to add an instance of the CavrnusSpatialConnector to the current map.

    1. Alternatively, you can add the CavrnusSpatialConnector instance to the level from the Cavrnus menu on the Unreal Editor Menu bar.

    2. Note that you only need one instance of CavrnusSpatialConnector for a given level.

image-20240301-202250.png

  1. As described in the Setup Your Scene guide, configure the settings for the CavrnusSpatialConnector on the Details panel:

    1. Domain Name: cav.dev.cavrn.us

    2. Auth Method: Guest Join Auto

    3. Guest Join Username: <Enter any name here>

    4. Space Join Method: Automatic

    5. Automatic Space Join ID: Reference a valid 24-character Space ID from the Web Console. (e.g. 65d51cde823bca2e0f0bc79c)

image-20240301-203308.png
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 user Copresence Components

  1. This project uses a custom game mode called “BP_MouseDragGameMode”.

    1. From the World Settings panel, expand the Game Mode rollout.

    2. In the “GameMode Override” field, note the entry says “BP_MouseDragGameMode”.

  2. This project also uses a custom Default Pawn Class “BP_MouseGrabPawn”.

    1. In the World Settings panel, under Game Mode, expand the Selected GameMode rollout.

    2. Note that the Default Pawn Class references “BP_MouseGrabPawn”.

    3. Click the “Browse to Asset in Content Browser” button next to the field.

  3. Open the “BP_MouseGrabPawn” blueprint from the Content Browser.

  4. Under the Component panel in the blueprint editor, note the following components:

    1. SyncTransform_Character

      1. Property Name: Transform

    2. NameTagWidget

    3. CavrnusProperties Container

Add Sync Components to Chess Pieces

  1. For each asset in the hierarchy that requires transform synchronization, add the following components

    1. Sync Transform

      1. Set the Property field to “Transform”. Note that this property is case-sensitive.

    2. CavrnusPropertiesContainer

      1. 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.

image-20240301-235315.png

image-20240301-235809.png

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.

image-20240223-104859.png

Then, in the Cavrnus Spatial Connector, we will set the Remote User Avatar to be this.

image-20240223-105008.png

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!

image-20240223-105311.png