Virtual Camera Component Quick Start

The Virtual Camera Component is the base architecture that provides the foundation for building custom virtual cameras in Unreal Engine.

Choose your operating system:

Windows

macOS

Linux

Overview

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

With the VCamComponent, a user 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.

1 - Required Setup

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

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

    Plugins menu

  2. Search for the Virtual Camera , Live Link , and Remote Session plugins and enable them.

    Virtual Camera

    Live Link

    Remote Session

  3. Restart the editor.

Section Results

You are now ready to start creating your virtual camera.

2- Creating a Virtual Camera

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

    Drag the Cine Camera Actor

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

    Select the CameraComponent

  3. Click the Add Component button and search for and add the VCam component.

    Search for VCam

    Make sure the VCam component is a child of the CameraComponent.

  4. Click the selection to add the component.

  5. Feel free to move the Cine Camera actor in your scene and adjust the Current Camera Settings to your liking. In the example below, we moved the camera to frame the meerkat in the scene and adjusted the camera to always keep the subject in focus.

    Adjust the camera

    You can learn more about adjusting the camera settings by going to the Using the Cine Camera Actors documentation page.

  6. Select the camera actor, then select the VCam component in the component hierarchy.

    Select the VCam component

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

    Virtual Camera properties

The properties are as follows:

Property

Description

Enabled

This toggle enables and disables the entire Virtual Camera Component.

Live Link Subject

This is the subject used via the Live Link plugin. The camera uses the subject's transform to position the camera in the scene.

Lock Viewport to Camera

The viewport will be rendered from the point of view of the virtual camera.

Disable Component when Spawned by Sequencer

Disables the Virtual Camera Component when spawned by a Sequence.

Target Viewport

This is the viewport that will be used by the component to render its view.

Output Providers

Contains a list of all output device destinations.

Modifier Context

An object that contains arbitrary data that is shared between all Modifiers.

Modifier Stack

Contains a list of all Modifiers added to the component.

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

Modifiers can manipulate the camera by adding custom effects and behaviors to simulate real life camera behaviors. You can create custom modifiers with Blueprints or C++ and add them to the stack to layer different effects.

The Modifiers in the stack will be executed in the order which you add them, so be mindful of how you add your Modifiers.

Creating your First Modifier

  1. Right-click inside the Content Browser and select the VCam Modifier under the Virtual Camera category.

    Create the virtual camera modifier

  2. Name your Blueprint VCM_Sine, then double-click it to open it.

    Name the Blueprint VCM_Sine

  3. Inside the Event Graph , you will notice two default nodes — Event On Initialize and Event On Apply . The Event On Initialize node will be called once when the Modifier is added to the Modifier stack. This node is similar to the Construction Script node in Blueprints. The Event On Apply node will be executed every frame, similar to the Event Tick node in Blueprints.

    Default nodes

  4. Inside the Event Graph , right-click and search for and select Now to add the node to the graph.

    Now node

  5. Drag from the Return Value pin and select Promote to variable . Name the variable StartTime .

    Create the StartTime variable

  6. Connect StartTime to the Event On Initialize node as seen below.

    Connect StartTime to Event On Initialize

  7. On the Event On Apply node, drag from the Camera Component pin and search for and select Get World Location to create the appropriate node.

    Select Get World Location

  8. Right-click on the Get World Location node's Return Value pin and select Split Struct Pin .

    Select Split Struct Pin

  9. Drag from the Camera Component pin and search for and select Set World Location . Connect the node to Event On Apply , as seen below.

    Select Set World Location

  10. Right-click on the New Location pin from the Set World Location node and select Split Struct Pin . Connect the X and Y values as seen below.

    Select Split Struct Pin

  11. Drag the StartTime variable into the Event Graph and select Get StartTime . As before, add a Now node to the graph.

  12. Subtract the values of both nodes and drag from the resulting pin and search for and select Get Total Seconds , as seen below.

    Select Get Total Seconds

  13. Drag from the Get Total Seconds node and search for and select float * float .

    Select float * float

  14. Right-click on the Event Graph , then search for and select Get Pi . Connect the Pi node to the multiplication node.

    Select Get Pi

    Connect Pi to the multiplication node

  15. Click on Add pin on the multiplication node to add another input.

  16. Create a new float variable called FrequencyScale and connect it to the multiplication node. Compile the Blueprint and enter 1 as the default value for FrequencyScale .

  17. Drag from the multiplication results and search for and select Sin (Radians) , as seen below.

    Select Sin (Radians)

  18. Drag from the Sin node and search for and select Map Range Clamped .

  19. Create two float variables named Wave Minimum and Wave Maximum and connect them as seen below.

    Map Range Clamped

  20. Compile the Blueprint and set the default value of Wave Minimum to -10 . Then, set the default value of Wave Maximum to 10 .

  21. Right-click in the Event Graph and search for and select the Addition node. Connect the Z value from the Get Actor Location node with the result of the Map Range Clamped node as seen below.

  22. Connect the result of the addition node to the Z value of the Set Actor Location node.

    Add Z values

  23. Go to the Variables section and click the eye icon for all float variables to make them public, as shown below.

    Set variables to public

  24. Compile and Save the Blueprint.

Adding the Modifier to the Stack

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

  1. Select your camera actor and inside the component hierarchy, select the VCam component.

  2. Click the plus sign on the Modifier Stack to add an entry to the list.

    Add modifier to the stack

  3. Add the name Sine Movement and uncheck the Enabled checkbox.

    Add the name Sine Movement

  4. Click on the dropdown arrow for Generated Modifier and select VCM_Sine from the list.

    Select VCM_Sine from the list

  5. Check the Enabled checkbox to see the modifier in action. You should now see your camera actor moving in your scene.

    VCC_SineMovement.gif

  6. While your Modifier is active, you can expand the Generated Modifier row and see your public variables exposed. You can now modify these values and see the changes happen instantly.

    Expand the Modifier public variables

Section Results

In this section you learned how to create a custom camera modifier by using Blueprints. You learned about the On Initialize and On Apply events, and how you can use them to create custom behaviors.

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

4 - Using the Input System

The current input events implementation is a placeholder and will be replaced by a more advanced version in the future.

The Virtual Camera Component can use editor input events directly inside Modifiers to provide additional control to the user.

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

Goals

Our goal for this section will be to add a key input to our Modifier that will allow us to enable and disable the effect by pressing a single key.

Creating an Input Event

  1. Open the VCM_Sine Blueprint.

  2. Drag from Event On Apply , and create a Branch node. Connect the True pin to the SetWorldLocation node.

  3. Create a new boolean variable and call it Active . Connect this variable to the Branch node as seen below.

    Add the Active branch

  4. Compile and Save.

  5. Right click on the Event Graph then search for and select the function Get VCamInputSubsystem .

    Get VCam Subsystem

  6. Drag from the VCam Input Subsystem node then search for and select the Bind Key Up Event .

    Bind KeyUp Event

  7. Drag from the red Delegate pin and search for and select Add Custom Event . Name the new custom event ToggleActivation .

    Add Custom Event

    Toggle Activation

  8. Drag the Active variable to the Event Graph and select Set Active . Connect the ToggleActivation execution pin to the Set Active node.

  9. Drag another Active variable to the Event Graph and select Get Active . Drag from the Get Active node then search for and select Not . Connect the Not node to the Active pin as seen below.

    Toggle the Active variable

  10. On the Bind Key Up Event node, click on the keyboard icon and press the S key to bind it to the event. Alternatively, you can press the dropdown arrow and select the desired key from the list.

    Bind S key

    S key bound

  11. Return to your scene and while the VCM_Sine Modifier is active, press S to toggle the effect on and off.

  12. Since this event executes every time the user presses the S key, it can cause conflicts when the user presses the key for other purposes. For example, if the user renames an asset in the Content Browser and uses the letter S, it will execute your event. To prevent this, you can add an additional safeguard to your code.

  13. Add a Branch node between the ToggleActivation event and the Set Active node, as shown below.

    Add a Branch node

  14. Drag from the Key Event pin then search for and select the Get Input from Key Event function.

    Get input event

  15. Drag from the node then search for and select the Is Shift Down function.

    Add the Is Shift Down node

  16. Finally, connect the node to the Branch , as seen below.

    Connect the node to the Branch

  17. Your event will now execute only when the Shift key is down and you press the S key.

Section Results

In this section you added an input event that executes when the S key is pressed. This event enables and disables the effect of your Modifier. In addition, you added the Shift key as a safeguard to prevent conflicts when the user presses the S key for another purpose.

5 - Adding Output Providers

The Output Provider system is used to route 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 Output Providers list is always executed in order, starting from the top.

Let's take a look at the available Output Providers that come with the Virtual Camera Component.

Viewport Output Provider

This Provider will output the virtual camera's view directly to the main viewport in the editor.

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

    Add a Provider to the list

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

    Viewport Output Provider

  3. You can now see the shared properties among the different Providers:

    Property

    Description

    Is Active

    Enables and disables the Provider.

    UMG Overlay

    UMG widget that is overlaid on top of the image output.

    Use Override Resolution

    Sets a custom resolution to 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. As an example, click on the UMG Overlay dropdown and search for and select TestUMG to add a test widget to the viewport.

    Add Test UMG

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

    Set Output Provider to Active

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

    UMG overlay

Unreal Remote Output Provider

This Provider outputs the main editor viewport to a remote device connected via the Remote Session protocol. Any compatible device connected with this method can be used for this purpose.

Next you will configure your project to connect an external device using Remote Session.

  1. Open Settings > Project Settings .

    Open your Project Settings

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

    Unicast Endpoint

  3. Go to the Rendering section and under Default Settings , set your Frame Buffer Pixel Format to 8bit RGBA .

    Frame Buffer Format

  4. Restart the editor.

iOS Device Setup

  1. Download the Unreal Remote 2 app from the App Store to your ARKit enabled iOS device and launch the app.

    iOS Device

  2. Enter the IP address of your computer and tap the Connect button to try and establish a connection.

Connecting your device

  1. Tap on Connect on the Unreal Remove 2 App.

  2. Select the VCam component on your virtual camera actor, and select the Unreal Remote Output Provider from the Output Provider dropdown list.

    Select Remote Output Provider

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

    Screen mirrored on your device

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 select the Output Config , which is used to specify the output parameters.

Output Config

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

Composure Output Provider

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

Composure Plugin

For more information on how to use the Composure Plugin, please visit the Real-Time Compositing with Composure documentation page.

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 via the Remote Session protocol.

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 the Unreal Engine by going to the Virtual Camera Actor Quick Start .

Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Dismiss