Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Update hyperlink targets.
Page TreerootCSM:Cavrnus Knowledge BaseexpandCollapseAlltruestartDepth1

Game Engine

Unreal Engine 5.0

Tutorial Level

Easy

Properties

Sync Material
Sync Color
Sync String
Sync Boolean

Project Files

https://github.com/Cavrnus-Inc/car-configurator-csc-unreal

Installing the Cavrnus Plugin (Unreal Engine)

As with any Unreal plugin, adding the

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.pngImage Removed
  1. Load the project in Unreal Editor and enable the CSC plugin in the Plugins Manager

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

TipThe project now has

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

  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.pngImage Removed
  • 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.

Alternatively, you can add

Testing the Demo

To get an idea of what this demonstration will do, load the preconfigured map called “Cavrnized_CarConfigurator”.

  1. In the Content Browser, under Content/Maps, double-click the “Cavrnized_CarConfigurator” level.

  2. In the outliner, scroll down to the “Cavrnus” folder and click the CavrnusSpatialConnector actor.

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

    1. Domain Name: e.g. <CompanyName>.cavrn.us

    2. Auth Method: Select Guest Join Auto

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

    4. Space Join Method: Select Automatic

    5. Automatic Space Join ID: Reference a valid 24-character Space ID from the Management Console.

      1. You can also input a User Defined Join ID.

image-20240301-203308.pngImage Added
  1. Click the Play-In-Editor (PIE) button to run the level. (or press Alt-P)

  2. Once the Space is connected, you can click any color button to change the color of the car.

  3. Click the “Stop Simulation” button to stop PIE. (or press the Escape key).

  4. Click the PIE button again to start the simulation.

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

  1. In the Content Browser, under the “Maps” folder, open the CarConfigurateScene level.

  2. Add the CavrnusSpatialConnector instance to the level from the Cavrnus menu on the Unreal Editor Menu bar.

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

image-20240301-202250.pngImage Removed

image-20240405-040948.pngImage Added

  1. As described

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

    1. Domain Name:

cav
    1. e.g.

dev
    1. <CompanyName>.cavrn.us

    2. Auth Method: Select Guest Join Auto

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

    4. Space Join Method: Select Automatic

    5. Automatic Space Join ID: Reference a valid 24-character Space ID from the

Web (e.g. 65d51cde823bca2e0f0bc79c)
      1. You can also input a User Defined Join ID.

image-20240301-203308.pngImage Modified
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

Heads Up Display (HUD) Class

  1. This project uses a custom game mode

called “BP
  1. BP_

MouseDragGameMode”
  1. CarConfigGM.

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

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

MouseDragGameMode”
    1. CarConfigGM”.

  1. This project also uses a custom

Default Pawn
  1. HUD Class “BP

_MouseGrabPawn”
  1. _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.

  1. In the

World Settings panel
  1. Content Browser, under

Game Mode, expand the Selected GameMode rollout.
  • 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:

    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.pngImage Removed

    image-20240301-235809.pngImage Removed

    1. Content/Widgets, open the Widget Blueprint “WB_CarConfig”.

    2. Click the “Graph” button on the top right of the Widget Blueprint Editor.

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

    1. From the Execution Pin of the Event Construct node, attach the function Await Any Space Connection.

      1. This dispatcher is part of the Cavrnus Function Library

    2. Bind a custom Event to the “On Connected” pin of the Await Any Space Connection node.

      1. Give this a logical name, such as “SetCurrentSpaceConnection”.

    3. Right-click the “Space Connection” pin in SetCurrentSpaceConnection and select “Promote to Variable”.

      1. Give the variable a logical name, such as “SpaceConnection”.

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

      1. This will add a Set node for that variable.

      2. Check the box in the Set Connected? node to set it to true.

    image-20240405-052509.pngImage Added

    Tip

    Now that the connection to a Space is confirmed, let’s set the behavior for the HUD buttons.

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

      1. Space Connection: Drag the “SpaceConnection” variable onto this pin to connect it as a get node.

      2. Container Name: Car

      3. Property Name: CarColor

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

    image-20240405-052527.pngImage Added

    Tip

    Step 1 is complete. Now let’s use the SyncMaterial component to update the car paint.

    1. Navigate to the “Cavrnus” folder in the Outliner and open the BP_CarController in the Blueprint editor.

    2. The BeginPlay event for this Blueprint is already setup to create a dynamic material instance (MID) and assign it to all of the painted surfaces of the car.

      1. We’re going to insert a synchronization step into this blueprint.

    image-20240405-052424.pngImage Added
    1. In the Components panel, add a SyncMaterial component and CavrnusPropertiesContainer component.

      1. In the CavrnusPropertiesContainer component, set the Container field to “Car”.

    2. In the gap between Create Dynamic Material Instance and Get All Actors of Class with Tag, insert a Set Material Instance node.

      1. Connect the “Return Value” of Create Dynamic Material Instance to the “New Material Instance” of the Set Material Instance node.

      2. Drag the SyncMaterial component from the Components panel onto the “Target” pin for this node to attach a Get node.

    3. From the Get SyncMaterial node above, create a Get Children Components node.

      1. This will return an array of Material Sync components that SyncMaterial references.

      2. To see this list, select SyncMaterial from the Components panel, and then expand the “Material Sync Map” rollout in the Details panel. Each of these Map elements is synchronized at runtime.

    4. Insert a For Each Loop after Set Material Instance.

      1. This will loop through each item in the Material Sync Map.

    5. Insert a Cast to SyncMaterialTextureParam node after the For Each Loop.

      1. The SyncMaterialTextureParam component will synchronize the texture we want to swap in the paint material.

    6. From the “As Sync Material Texture Param” pin, drag a setter for the TextureMap variable.

      1. This variable is a dictionary that stores mapping between texture names and corresponding texture references.

    7. Promote the TextureMap pin to a variable and give it a logical name, such as “CarTextureMap”.

    image-20240405-054059.pngImage Added

    Tip

    With Step 2 complete, all that remains is to define the Texture-Property map as described in the table above.

    1. Select the CarTextureMap variable in the Variables panel.

    2. In the details panel, under “Default Value”, add an element for each button in the HUD, corresponding to car paint colors.

      1. Click the plus sign to add a map element to the Car Texture Map.

      2. Name the element based on the Property Value in the table above.

      3. Select the corresponding Texture File Name as described in the table above.

      4. Repeat this for each item in the table.

    Tip

    And that’s it! The project is now fully connected to the Cavrnus server, with

    copresence and

    shared string properties that

    will be synchronized with other users accessing the same Space

    translate to texture swaps in the car material.

    Info

    It’s worth noting that if you have matching projects in Unity and/or Unreal where the

    objects/assets in the corresponding Heirarchy/Outliner match each other in name

    texture/property maps match (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.pngImage Removed

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

    image-20240223-105008.pngImage Removed

    And now we’re actually done!

    in real-time!

    Setting Up Copresence

    Copresence in the scene requires a little setup for your Avatars. Fortunately, you can get started very quickly by using existing Character blueprints in the CSC plugin.

    1. In the Details panel, under “Game Mode”, expand the “Selected GameMode” rollout.

    2. Set the “Default Pawn Class” to BP_DesktopFlyModePawn.

      1. Any Cavrnized character blueprint will work. This one is configured for desktops and moves in all directions.

    3. Confirm that all inputs have been defined for your project.

    4. For more information about setting up avatars for copresence using the CSC plugin, see the Avatar Documentation.

    Final Product

    With the Sync

    Transform components

    Material component 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.pngImage Removed

    not only can you synchronize the texture references, scalar and vector parameter in materials can be shared as well! Opacity, roughness, emissivity, any property that can be referenced as a data point or string value can be shared in real-time and stored in a persistent Space!

    ColorSwap_1.gifImage Added