> ## Documentation Index
> Fetch the complete documentation index at: https://xrlive.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> What you will build and how the tutorial is structured

In this tutorial you will build a complete xRLive visual from scratch using Unreal Engine 5 and the xRLive SDK. The result is a **shape visual** — a 3D object whose position, rotation, color, visibility, and mesh the operator can change in real time from the xRLive operator panel, without touching the engine.

<Frame caption="The finished visual running inside xRLive — operator controls on the left, game window on the right">
  <video controls className="w-full aspect-video rounded-xl" src="https://storage.googleapis.com/xr-live-resources/documentation/FirstVisual-result.mp4" />
</Frame>

## What you will build

A live-event visual with a single interactive 3D shape controlled entirely from the xRLive operator panel:

| Control         | Type         | What it does                              |
| --------------- | ------------ | ----------------------------------------- |
| Horizontal move | Slider       | Moves the shape left and right            |
| Vertical move   | Slider       | Moves the shape up and down               |
| Rotation        | Slider       | Rotates the shape on the Z axis           |
| Visibility      | Checkbox     | Shows or hides the shape                  |
| Color           | Color Picker | Changes the shape's material color        |
| Shape           | Dropdown     | Swaps the mesh: Cube, Sphere, or Cylinder |

No audio reactivity is included — this tutorial focuses on the operator-driven control system.

## How the tutorial is structured

The tutorial is split into focused modules. Each one covers one responsibility and builds on the previous one:

<Steps>
  <Step title="Project Setup">
    Create a new Unreal Engine 5 project and create the plugin that will hold your visual's content.
  </Step>

  <Step title="Plugin & Scene Setup">
    Set up the plugin folder structure, create the `BP_Settings` actor that drives the visual, add a mesh component, and configure the xRLive UI panel component with its required widget classes.
  </Step>

  <Step title="Define the Control List">
    Declare the operator controls inside `BP_Settings` — the two categories of controls (movement sliders and shape controls) that will appear in the operator panel.
  </Step>

  <Step title="Wire Slider Controls">
    Connect slider events to Blueprint logic so that moving a slider in the operator panel immediately moves the shape in the game window.
  </Step>
</Steps>

<Note>
  More modules will be added to this series as the tutorial expands — wiring the remaining controls (checkbox, color picker, dropdown) follows the same pattern introduced in **Wire Slider Controls**.
</Note>

## Prerequisites

Before starting, make sure you have:

* **Unreal Engine 5.5** via the Epic Games Launcher
* The **xRLive SDK** plugin available in your UE installation
* Basic familiarity with Unreal Engine Blueprints (placing actors, opening the Blueprint editor, adding nodes)

<Tip>
  You do not need C++ knowledge. Every step in this tutorial uses Blueprints only.
</Tip>

## Key SDK concepts used

This tutorial introduces the following parts of the xRLive SDK for the first time:

| Concept                                       | Where it appears        |
| --------------------------------------------- | ----------------------- |
| `BP_Settings` actor (inherits `XRLive Actor`) | Plugin & Scene Setup    |
| `xrlive_UIpanel` component                    | Plugin & Scene Setup    |
| `UICategories` control list                   | Define the Control List |
| `Find Control by Name`                        | Wire Slider Controls    |
| `Assign On Slider Value`                      | Wire Slider Controls    |

Each concept is explained in context when it first appears. You can also jump directly to the reference pages from the SDK navigation.