Virtual Camera Component Quick Start

Overview

The Virtual Camera Component (VCamComponent) is the base component that enables building custom virtual cameras in Unreal Engine.

With the VCamComponent, you can drive a Cine Camera inside Unreal Engine by adding custom Modifiers and Output Providers.

Goals

This Quick Start guide is designed to take you through the basic steps of creating a virtual camera using the Virtual Camera Component.

Objectives

After going through this guide, you will learn the following:

• How to place a camera in the scene and add the VCamComponent.

• How to add Modifiers to the camera to customize its behaviors.

• How to add basic key inputs to enable and disable Modifiers.

• How to use different Output Providers.

• How to pass input actions from Modifiers to Widgets using connection points.

• How to customize your button to enable reusing it in different scenarios.

1 - Required Setup

Before you start, you must enable the appropriate plugins inside your project.

1. Click on Settings > Plugins to open the Plugins menu.

2. Search for the Virtual Camera plugin and enable it.

3. Restart the editor.

Section Results

You are now ready to start creating your virtual camera.

2 - Create a Virtual Camera

The Virtual Camera Component works with any Actor that contains a Cine Camera Component. In this example we will be using the Cine Camera Actor for convenience.

1. On the Place Actors panel, select the Cinematic category and click and drag the Cine Camera Actor to your scene.

2. With the Cine Camera Actor selected, go to the Details panel, and select the CameraComponent.

3. Click the Add Component button and search for and add the VCam component. Make sure the VCam component is a child of the CameraComponent.

4. Select the Camera Actor, then select the VCam component in the component hierarchy.

5. You can now see the properties available under the Virtual Camera section.

The properties are as follows:

Section Results

You placed a Cine Camera Actor in your scene and added the Virtual Camera Component. You are now ready to customize your camera by adding Modifiers.

3 - Adding Modifiers

A Modifier is a specialized blueprint class you can add to a virtual camera to create custom effects and behavior. With Modifiers, you can simulate rea-life camera behaviors with Virtual Cameras, such as camera shake, focus adjustments, and exposure changes. You can create a Modifier using Blueprints or C++.

You can add multiple Modifiers to a unique Virtual Camera render Stack, to apply the effects or behaviors to your project's Virtual Camera. The Stack applies and renders the modifiers in order from top to bottom.

Create a Modifier

To create a new VCam Modifier Blueprint:

1. In the Content Browser, click (+) Add, and select VCam > VCam Modifier.

   

2. The Unreal Editor prompts you to add an Input Mapping Context. If you want your modifier to support input by means of Enhanced Input, you must add an input mapping context. If you do not want to use enhanced input, you can skip adding an input mapping context.

   

3. Name your Blueprint VCM_LookAt, then double-click it to open it.

   

Set an Actor Reference Variable

In the Modifier Blueprint, you must define an Actor Reference Variable that references the subject the Virtual Camera tracks.

To set an Actor Reference Variable in the Blueprint:

1. In the My Blueprint tab, navigate to Variables, and click the plus sign (+), and add a new TargetActor variable.

   

2. Change the type of the TargetActorvariable to an Actor Object Reference by selecting the variable type and navigating to Object Types > Actor > Object Reference in the context menu.

   

3. In the Detail panel for the variable, enable the Instance Editable property.

   

4. Save and Compile the Modifier Blueprint.

Create the Blueprint Logic

With a reference variable created, you can now build the Modifier Blueprint logic.

To build the blueprint logic:

1. In the Modifier Blueprint, drag the TargetActor variable into the Event Graph, and select the Get TargetActor option from the context menu.

   

2. Create and connect an Is Valid node to the Target Actor Variables output pin.

   

3. Connect the graph's Event on Apply node to the Is Valid node using the execution pin.

4. From the Event on Apply node's Camera Component pin create and connect a Get World Location node.

   

5. From the Target Actor node create and connect a Get Actor Location node.

   

6. Create a Find Look at Rotation node, and connect it to the Get World Location node's Return Value pin.

   

7. Connect the Return Value pin of the Get Actor Location node to the Target pin of the Find Look at Rotation node.

   

8. Drag from the Camera Component pin of the Event On Apply node and search for and select Set World Rotation.

   

9. Connect the Is Valid pin from the Is Valid node to the Set World Rotation node. Connect the Return Value pin of the Find Look at Rotation node to the New Rotation pin of the Set World Rotation node.

   

10. Save and Compile the Blueprint.

Add a Subject

Your scene must have a subject object for the camera to track. This example uses a simple sphere static mesh object.

To add a subject:

• Drag any basic game object to the level from the Place Actors tab and drop it into the Viewport.

  

Add the Modifier to the Stack

Now you are ready to add your custom Modifier to the Modifier Stack.

1. Select your VCamActor, and inside the component hierarchy, select the VCam component, navigate to Modifier Stack, and click the plus sign (+).

   

2. Enter a name for your Modifier, for example LookAt. Adding a name allows you to reference this Modifier in your Blueprints later on.

   

3. Click on the dropdown arrow for Generated Modifier and select VCM_LookAt from the list.

   

4. Expand the Default section of the Modifier and click on the Target Actor dropdown. Select the Sphere Actor you added to the level.

   

5. Save and Compile your project.

You can now enable the VCam and move the target game object in the Viewport. The camera rotates to track the object.

Change the Behavior of Your Modifier

Right now your Camera always follows the Target Actor you've selected. You can introduce behavior to the Modifier to toggle this behavior on and off using your Blueprint.

To do introduce toggling following on and off:

1. In the Event On Apply node, right-click the Camera Component and select Promote to Variable.

   

2. In the Details Panel, click the Advanced drop down, locate the Camera Component Variable, and check Transient.

   

3. Click and drag this variable into the Blueprint window, click Set Camera Component, and hook it up to the Event on Apply execution pin.

4. In the My Blueprint tab, navigate to Variables, and click the plus sign (+), and add a new ShouldLookAt boolean variable. Drag this variable into the Blueprint window and select Get ShouldLookAt.

5. Drag from the ShouldLookAt variable and select Branch. This lets you use this boolean to turn the Camera's LookAt behavior on and off.

   

6. Connect this Branch after the Set Camera Component and attach True to IsValid

   

7. From the My Blueprints variable window, drag the Camera Component variable and select Get Camera Component.

   

8. Drag from the Camera Component and search for and select Get World Rotation.

   

9. Drag from the Camera Component again and search for Set World Rotation. Connect Get World Rotation to Set World Rotation.

   

10. Connect the False pin from the Branch you created earlier to Set World Rotation.

    

11. Save and Compile your Blueprint. You can now turn the LookAt behavior of your VCam Component on and off through our ShouldLookAt boolean.

In the next section you can read about using Enhanced Input to control your boolean with a keypress to turn the LookAt behavior on and off instantaneously.

Section Results

In this section you learned how to create a custom camera modifier by using Blueprints.

You also learned how to add your custom modifier to the Modifier Stack to manipulate your virtual camera inside the editor.

4 - (Optional) Using Enhanced Input

VCam Modifiers can use Enhanced Input Input Actions to provide additional control to the user.

Here is how you can use this system to add additional functionality to your Modifier.

Goals

The goal for this section is to add an Input Action to the Modifier, which lets you enable and disable the effect by pressing a single key.

Create an Input Event

To create an input event:

1. In the Content Browser, select (+) Add > Input > Input Action. Name your input IA_ToggleActivation and double-click it to open it.

   

2. To add an input mapping context asset, right-click in the Content Browser and select Input > Input Mapping Context.

3. Name your asset IMC_LookAt, and double-click it to open it.

4. To add a new Mapping, press the plus (+). Under Input Actions, select IA_ToggleActivation.

   

5. To activate the Input Action, set an S as the default key.

   

6. Enable the Is Player Mappable property, and set the name to IA_ToggleActivation.

   

7. Open the VCM_LookAt Blueprint by double-clicking it in the Content Browser.

8. Select Class Defaults and add IMC_LookAt to Input Mapping Context.

   

9. Right-click on the Event Graph and search for and select ToggleActivation under the Enhanced Action Events.

   

10. Drag the ShouldLookAt boolean into the Blueprint Window and select Get ShouldLookAt.

    

11. Drag from the ShouldLookAt boolean and search for and select Branch.

    

12. From the EnhancedInputAction ToggleActivation node, connect the Triggered pin to the Branch.

    

13. Drag the ShouldLookAt boolean into the Blueprint Window and select Set ShouldLookAt.

    

14. Attach the Set ShouldLookAt to the True pin, and make sure the checkbox is unchecked on the Set ShouldLookAt node.

    

15. Repeat the step above, and add a second Set ShouldLookAt node and connect it to False. Make sure the checkbox is checked on this Set ShouldLookAt node.

    

16. Save and Compile your Blueprint. It should look something like this.

    

17. Return to your scene and while moving the Sphere Actor in the level, press S to toggle the effect on and off.

    The virtual camera input system executes every time a camera operator presses a key, even when the viewport is not in focus. This can cause conflicts when someone presses the key for other purposes. For example, if someone renames an asset in the Content Browser and uses the letter S, this will execute your event.

18. (Optional) If you would like to rebind the key used for ToggleActivation you can change the default key in IMC_LookAt.

19. Your Camera LookAt behavior now only executes when you toggle activation with the S key.

Section Results

In this section you added an input event that executes when you press the S key. This event enables and disables the effect of your Modifier.

5 - Add Output Providers

The Output Provider system routes the output of the Virtual Camera onto various providers, including viewports, devices using the remote session protocol, the Composure plugin, and various supported video capture cards.

The available output providers are listed below. For instructions on how to add the output provider you need, click the relevant provider name:

• Viewport Output Provider

• Pixel Streaming Output Provider

• Unreal Remote Output Provider

• Media Output Provider

• Composure Output Provider

Viewport Output Provider

The Viewport Output Provider outputs the virtual camera's view directly to the main viewport in the editor.

1. Select the VCam component and click on the + sign next to the Output Providers to add a new Provider to the list.

   

2. Select the Viewport Output Provider option from the list.

   

3. You can now see the shared properties among the different providers, as shown in the table below. As an example, click on the UMG Overlay dropdown and search for and select TestUMG to add a test widget to the viewport.

   Property	Description
   Is Active	Enables and disables the provider.
   UMG Overlay	UMG widget overlaid on top of the image output.
   Use Override Resolution	Sets a custom resolution for the output image. This is especially useful when using external devices with fixed resolutions.
   Override Resolution	This is the fixed resolution used for the output image.

4. Finally, set the Output Provider as Active by clicking on the checkbox.

   

   You should now see an overlay on the main viewport in your scene. This is an example of how you can customize your camera output to fit your specific needs.

   

Pixel Streaming Output Provider

The Pixel Streaming Output Provider is the main output provider for VCam. It outputs the main editor viewport to a remote device connected using WebRTC, including the Live Link VCam app. You can use any compatible device connected with this method, including web browsers.

Pixel Streaming is fully configured on an instance of the Pixel Streaming Output Provider and needs no additional setup, though VCam only supports one stream.

iOS Device Setup Using Remote Session

Download the Live Link Vcam App from the App Store to your ARKit enabled iOS device and launch the app.

Connecting your device

1. Select the VCam component on your virtual camera actor, and select the Pixel Streaming Provider from the Output Provider dropdown list.

   

2. After changing output providers, ensure Is Active is checked on the newly selected output provider. ![i

   

3. Open the Live Link VCam app on your device. To establish a connection, enter the IP address of your computer, and tap Connect.

4. You should now see the main editor viewport mirrored on your device's screen.

Unreal Remote Output Provider

The Unreal Remote Output Provider outputs the main editor viewport to a remote device connected using the Remote Session protocol, such as the Live Link VCam app. You can use any compatible device connected with this method.

To use this output provider, you must configure your project to connect an external device using Remote Session.

1. Open Settings > Project Settings.

2. Under the Plugins category, go to the UDP Message section and set your Unicast Endpoint to your computer's IP address with :0 at the end of the IP to indicate your port number.

   

3. Under the Engine category, go to the Rendering section and under Default Settings click on the arrow to expand the advanced settings. Set your Frame Buffer Pixel Format to 8bit RGBA.

4. Restart the editor.

iOS Device Setup Using Remote Session

Download the Live Link VCam App from the App Store to your ARKit enabled iOS device and launch the app.

Connecting your device

1. Select the VCam component on your virtual camera actor, and select the Unreal Remote Output Provider from the Output Provider dropdown list. Make sure that Is Active is checked on the selected output provider.

   

2. Open the Live Link VCam app on your device. Select the gear icon, and change the Connection Type to Remote Session.

   

3. To establish a connection, enter the IP address of your computer, and tap Connect.

4. You should now see the main editor viewport mirrored on your device's screen.

   

Media Output Provider

The Media Output Provider sends the virtual camera's output to any device supported by the Unreal Media Framework, such as video capture cards from Black Magic and AJA.

Once chosen, you can use Output Config to specify the output parameters.

For more information on how to use the Unreal Media Framework, see the Media Framework documentation.

Composure Output Provider

The Composure Output Provider sends the virtual camera's output to a render target the Composure Plugin can use directly. In addition, you can specify the Composure Layer Targets the camera's view will be rendered on.

Section Results

In this section you learned how to add different output providers to your Virtual Camera component. You can now use your virtual camera to output directly to the editor viewport, or an external device using Pixel Streaming and the Remote Session protocol.

You also learned how to send your output to be processed by the Unreal Media Framework and the Composure Plugin.

6 - (Optional) Passing an Input Action From Modifiers to Widgets using Connection Points

The use of modifier connection points is an experimental feature

In a previous section, you created an Input Action in your modifier and learned to map it to a hardware input. While we developed Enhanced Input around the idea of hardware input, it is also leveraged in Virtual Camera as a method for remapping UMG inputs through the use of Input Injection and VCam Connection Points.

Here is how you can use this system to create a UMG widget you can quickly remap to a modifier without the need for hard references or casts.

Goals

The goal for this section is to create a VCam widget that you can remap to two different pieces of functionality on a modifier, using VCam Connections and Connection Points.

Add Connection Points to Your Modifier

To add connection points to your modifier:

1. Open your VCM_LookAt modifier, and select Class Defaults.

2. Under the VCam Connection Points section, expand Connection Points, and add an element named **Toggle Activation.

   

3. Expand the element, and select your IA_ToggleActivation input action as the Associated Action.

   

4. Compile and Save. You can now activate the Modifier Blueprint using a Connection Point trigger.

Create a VCam Widget

VCam Widgets differ from User Widgets in their ability to accept input and to define connections to modifier connection points.

To create a VCam Widget:

1. In the Content Browser, click (+) Add, and navigate to the VCam section, and select VCam Widget.

   

2. Name your new widget VCW_ConnectionButton. Double-click the asset to open it.

   You will be prompted for an Input Mapping Context but that is not needed here. Providing a context allows your widget to fire Input Action Events in the same way described for Modifiers under Using Enhanced Input.

3. In the Designer, add a button from the Library. Name it ConnectionButton.

   

4. Select Graph to proceed to the Blueprint scripting graphs, and then select Class Defaults.

5. Under the VCam connections section, expand the Connections array, and click the plus sign (+) to add an element

6. .Name this element Button, and expand it to see its properties.

   

   Property	Description
   Required Interfaces	If a connection lists required interfaces, it won't connect to a modifier that does not implement that interface. You can use this to make sure a modifier provides information the widget needs, for example the bounds for a slider. For more information on Blueprint interfaces see the Blueprint Interfaces documentation.
   Optional Interfaces	Optional interfaces are not required for a successful connection. You can use this to store interfaces that a modifier could use to provide optional information, for example the color of a button.
   Requires Input Action	This field defines if a connection requires you to provide an input action in the Associated Action property on the target Modifier Connection Point.
   Action type	If Requires Input Action is enabled, use this property to specify which type of input action is required for a successful connection.
   Manually Configure Connection	This field allows you to specify the target Modifier and Connection Point Name. You can leave this field blank for now. You will need to configure this in the assembled HUD.

7. Toggle the Requires Input Action property to be enabled, and set Action Type to Digital (bool).

   

8. Return to your Event Graph > My Blueprint > > Events, and add an On Clicked event.

   

9. Right-click in the Event Graph, and search for Get Connections under the VCam Connections section.

   

10. Drag off from the Get Connections node, and search for Find. Set the key to be Button, matching the name of your connection.

    

11. Drag off from the output pin, and add Get Connected Modifier > Get Owning VCam Component > Inject Input For Action. Make sure that the output pin of Get Owning VCam Component is connected to the Target input on Inject Input For Action.

    

12. Right-click the Raw Value input and select Split Strut Pin. Set the Raw Value Type of Inject Input For Action to Bool (matching the Action Type defined on your connection), and connect the execution pin of On Clicked to Inject Input for Action.

    

13. Drag off from your Find node and add Get Connected Input Action. Connect the result to the Action pin on Inject Input For Action. This ensures the action you are calling is the same one specified by your modifier's connection point.

    

14. Set the Raw Value X float value to 1. This ensures that when your button is pressed, your Input Action receives a value of True, mimicking a hardware button's down press.

    

15. Compile and Save.

Create a HUD to Manage Your Connections

To create a HUD:

1. Right-click in the Content Browser, and navigate to VCam > VCam Widget. Name your new widget VCW_ConnectionHUD. Double-click the asset to open it.

2. In the Library, find and add your **Connection Button.

   

3. Add the Connection Button widget by dragging it into the Hierarchy, and locate the Details Panel.

4. To prevent the HUD from being a full-screen button when assigned, wrap the VCW_ConnectionButton in a Canvas Panel.

   

   .

5. Under the VCam Connections section, expand Connection Points, and locate your Button connection.

6. Expand the connection, and enable Manually Configure Connection.

   

7. A new Connection Target Settings field appears. Set the Target Modifier to Look At (the name given to the modifier in your modifier stack, as you configured earlier) and set the Target Connection Point to Toggle Activation (the name you gave to the on Connection Point on VCM_LookAt).

8. Save and Compile.

9. Return to the Vcam Component on your scene actor, and add an output provider of any type.

10. Set UMG Overlay to your VCW_ConnectionHUD.

11. On the VCam Component, enable both the Is Active and Enabled checkboxes.

    If these are already enabled, toggle them off and then on again to refresh the Actor.

12. Click your button in the viewport. It should now toggle the activation of your modifier.

13. (Optional) If you want to rebind your button to a new Connection Point, return to the VCW_ConnectionHUD, and change the Target Modifier and Target Connection to match your new desired target.

Section Results

In this section you learned how to use VCam Widgets, Connections, and Connection points to create UMG elements you can remap and reconfigure quickly and easily.

You also learned how to send your output to be processed by the Unreal Media Framework and the Composure Plugin.

Next Steps

Now that you know how to build your own virtual camera, take a look at the pre-built Virtual Camera Actor that comes included in Unreal Engine by going to the [Virtual Camera Actor Quick Start](https://docs.unrealengine.com/5.0/en-US/using-virtual-cameras-in-unreal-engine).

7 - (Optional) Customizing Your Button

You can customize your Virtual Camera button through Connections and the Blueprint interfaces so that the button changes color according to the state of your modifier. You can use this feature to re-use buttons for different purposes, for example by pairing the same button to the record function and the screenshot function, with an individual color representing each.

This is advanced functionality, which requires that you've already [set up your Virtual Camera actor](animating-characters-and-objects\Sequencer\Cameras\VirtualCamera\VirtualCameraComponentQuickStart.

If you customize your button this way, some of its functionality might be different from the standard functions explained in the Virtual Camera Quick Start.

Create a Blueprint Asset

To begin with, create a Blueprint asset that you can connect to your modifier.

To create a Blueprint asset

1. In the Content Browser, right-click and and select Blueprints > Blueprint Interface. Name the new asset BPI_ConnectionButton.

2. To open the asset, double-click it.

3. Rename the existing function to Get Button Color.

   

4. In the Details panel, go to Inputs, and add a new parameter of the type Name, and call it **Connection Point.

   

5. Under the Outputs section, add two new parameters.

6. Create a parameter of the type Linear Color, and name it Color.

7. Create a parameter of type Bool, and name it Success.

   

8. Compile and Save.

Compile Your Blueprint Asset

To generate the asset so that it can be connected, you must select and compile your blueprint asset in your VCam modifier.

To select your asset:

1. Return to your VCM_LookAt modifier.

2. Open Class Settings.

3. Under Interfaces, locate Implemented Interfaces and select **Add.

   

4. Select BPI_ConnectionButton.

   

5. Compile.

Connect Your Button Using a Blueprint

You can now connect your button using a Blueprint. This is where you define which color the button sends for your selected functionality.

To connect your button:

1. In the My Blueprint tab, expand the Interfaces section. You should see your Get Button Color function. To edit it, double-click the function.

   

2. Drag off from your Connection Point output pin, and add a Switch On Name node.

3. Connect the default Return Node to the Default pin on Switch on Name. Make sure that Success is False on this return.

   

4. Select the Switch on Name node. In its Details Panel, add a Pin named Toggle Activation (to match your connection point name).

   

5. Right-click in the graph, and add another Return node. Connect this to the new Toggle Activation pin on Switch on Name.

   

6. Drag your ShouldLookAt boolean into the Blueprint Window and select Get ShouldLookAt.

   

7. Drag off from ShouldLookAt, and add a Select Color node.

8. Set A to be green and B to be red.

   

9. Connect the Return Value of Select Color to the Color pin on the Return node connected to Toggle Activation.

   

Define the Rules

Next, you must define how the widget requests, parses, and applies the information you've just configured above.

To define the rules:

1. Return to VCW_ConnectionButton that you made earlier, and navigate to Class Defaults > VCam Connections > Connections.

2. Expand your Button connection and click the + next to either Required Interfaces or Optional Interfaces and add BPI_ConnectionButton.

   

   • Adding this to Required Interfaces makes it mandatory for your modifier to have implemented BPI_Connection Button for the connection to succeed.

   • Adding it to Optional Interfaces allows the connection to succeed regardless of whether your modifier implemented the interface.

3. Right-click in the graph, go to VCam Connections, and add the Get Connections node.

   

4. Drag off from the Get Connections node and search for Find. Set the key to be Button. Make sure this matches the name of your connection.

5. Drag off from the output pin and add Get Connected Modifier.

6. Drag off from the Return Value of Get Connected Modifier, and add IsValid. Connect The execution pin of Event Tick to Is Valid.

   

7. Drag off from the Return Value of Get Connected Modifier and add Get Button Color (Message) from the BPI_ConnectionButton section.

8. Drag off from the output pin of Find and add a Get Connection Point Name node. Connect the Return Value to the Connection Point input of Get Button Color.

9. Connect the execution pin of Is Valid to **Get Button Color.

   

10. Drag off from the Success Pin and add a Branch.

11. In the My Blueprints tab, go to the Variables section, and drag in your button. Drop it as a Get node and place it near the branch.

12. Drag off from the Get node and add Set Background Color. Connect the Color output pin of Get Button Color to the In Button Color pin of Set Background color.

13. Connect the True execution pin of the branch to Set Background color.

    

14. Compile and Save.

End result

You can now return to the VCam Component of your actor in the world and toggle Enabled on and off to refresh. Your button should now change color according to the state of your boolean.