Hello World in UBF

This section will guide you through the process of creating your first UBF projects from start to finish. We will apply the fundamental knowledge covered so far and put it into practice by building a simple, functional blueprint inside UBF Studio, previewing it in real-time, and finally exporting it as a UBF bundle for validation.

​

Starter Project 1: Party Time! 🎉

Someone is throwing the biggest party in Fluf World, and everyone is invited!

But there’s a problem… what’s a party without party hats? We need to fix this—fast.

Our task is to create a UBF blueprint that spawns a party hat model and applies a material to it to give it some style. To introduce customization, we will need to expose an input parameter for color, allowing us to generate multiple instances for different hat colors - because no two party-goers should have the same look!

By the end of this project, you’ll have created customizable party hats, learned how to define inputs for dynamic content, and tested your work in the Previewer—all using the power of UBF. Let’s get started!

​

Getting Started: Required Assets

Before we begin building our UBF project, you’ll need a few basic assets to work with.

For this tutorial, we’ll be using a simple 3D model of a party hat. You can download the starter asset pack from the Asset Creator Pack provided to you. Get in touch with customersuccess@futureverse.com to gain access.

Additionally, ensure you have installed compatible versions of UBF Studio and UBF Previewer. For installation instructions, see the Installation and Setup sections for the respective apps:

• UBF Studio - Installation and Setup
• UBF Previewer - Installation and Setup

​

Creating a UBF Project

Let’s begin by launching UBF Studio. When the welcome screen appears, select “Create New Project.”

Next, navigate to a suitable location on your drive and create a new folder to store your project. You can name it whatever you prefer, but for this tutorial, we’ll use “UBF - Party Time.”

Once the folder is created, navigate into it and select “Create Project” to initialize your UBF workspace.

​

Importing Assets & Resources

Studio should now automatically open your newly created project. At this stage, the project is empty, so let’s start adding some content.

First, we need to import the 3D model that we’ll be spawning in our blueprint. To do this, open your file explorer and navigate to your UBF project folder. Inside this directory, create a new folder—let’s call it “Resources” to keep things organized.

Next, extract the contents of the starter pack you downloaded earlier. Open the extracted folder, select all assets inside, and move them to your project’s newly created Resources folder.

Now, switch back to UBF Studio. You should see the Resources folder appear in the Project Explorer, containing the assets we’ll be using shortly.

​

Creating our First Blueprint

Now that we have our assets imported, it’s time to create our first Blueprint. UBF Studio should already have an open workspace tab labeled “New Blueprint”, which is where we will begin defining our blueprint logic.

Step 1: Creating a Scene Node

Before we spawn our Party Hat model, we need to first create a Scene Node. Scene Nodes serve as containers within the 3D scene or level in the end experience, onto which other objects—like meshes—can be spawned.

To do this, open the Node Library and browse the available nodes. The one we need for this task is the Create Scene Node. Select this node to spawn into the blueprint workspace and connect its execution pin to the Build Node - the starting point of every blueprint. This connection tells the blueprint that the first action to execute will be the creation of this Scene Node.

The Scene Node itself has configurable properties, such as Name and Parent, but since these aren’t necessary for our current task, we’ll leave them at their default values.

Step 2: Spawning a Mesh

Next, let’s spawn the Party Hat model. Locate the Spawn Mesh node in the Node Library, select it to spawn it into the workspace, and connect its execution pin to the Create Scene Node.

Now, let’s configure the required input pins for this node:

🚀 Resource Pin – This defines which 3D model will be spawned.

To define which mesh to use, we have two options we can use. We could create an input of type Resource<Mesh> in the blueprint so that blueprint instances can dynamically specify which model to spawn. Alternatively, we can hardcode the model directly into the node.

Since the only thing we want to change between blueprint instances is the color of the Party Hat, but never the actual model, we will opt to hardcode the mesh selection.

Click the Edit (Pencil) Button next to the Resource pin and select the PB_Head_PartyHat mesh—the model we imported earlier.

📦 Parent Pin – This determines the container upon which the spawned mesh should be spawned on.

Hovering over this pin show the expected input type for this pin is a Scene Node. Conveniently, we just created a Scene Node in the previous step.

All we need to do is link the output Node pin from the Create Scene Node and connect it directly into the Parent pin of the Spawn Mesh Node.

⚙️ Mesh Config Pin – We will leave this empty as it is not required. A Mesh Config is used for further specifying how the mesh will be configured at runtime. We won’t go into more detail of how this is done here but if you’d like to dive deeper into the Spawn Mesh node or any other nodes, refer to the UBF Node Documentation section [here].

Go ahead and save your blueprint now - select a location within your project folder and give your blueprint a name - we will use PartyHat.

At this stage, we should now have a functioning blueprint that spawns a Party Hat into the scene - but how do we know this is true and how can we test this is actually the case? We will need to lean on our previewer to validate we are making steps towards our desired outcome.

​

Previewing Our Creation

With UBF Studio still open, we can now launch the UBF Previewer to begin testing our blueprint in real time. Once the Previewer application has loaded, switch to Live Preview Mode by clicking the Live Preview button located in the top-right section of the viewport. A confirmation prompt will appear—simply click Yes to proceed.

At this point, the previewer should be in Live Edit Mode, and a direct connection between UBF Studio and the Previewer should be established. To confirm this, check the connection status displayed in the bottom-left corner of the Previewer screen.

Now, return to UBF Studio, where we’ve been working on our newly created Blueprint. You should now see a Preview Icon appear in the top-left of the blueprint viewport. Clicking this button will execute our Blueprint in the Previewer, rendering the results in real time.

And just like that, our Party Hat appears in the Previewer!

Now, all we need is some color to truly bring our hats to life!

​

Adding a Splash of Color

Now that we’ve successfully spawned the 3D model of our party hats, let’s take things a step further and introduce some color!

In digital rendering, an object’s appearance on screen is determined by a shader—a specialized program responsible for calculating the final color of each pixel based on lighting, materials, and other visual effects. A material acts as a layer on top of the shader, allowing us to define specific properties such as color, texture, and transparency. To give our party hats some life, we need to apply a material to our newly spawned mesh using the Apply Material node.

From the Node Library, find and add the Apply Material node into your blueprint. Next, connect the execution pin from the Spawn Mesh node to the Apply Material node. This establishes the correct execution flow—ensuring the material is applied only after the mesh has been successfully spawned.

The Apply Material node has several key input parameters that we need to configure:

Index Input Pin

This determines which material slot on the mesh renderer should be targeted. Some complex meshes use multiple materials, each occupying a separate slot. Since our party hat mesh only has one material slot, we can leave this at 0 (which targets the first slot).

Renderer Input Pin

Renderer is the component responsible for taking a mesh and a material and combining them into a final visual result.

Because a mesh may contain multiple renderers, the Spawn Mesh node provides an output pin of type Array<MeshRenderer>. In our case, the party hat mesh only has one renderer, so we just need to extract the first element from this array.

To do this, we can use an At Index node:

1. Select the At Index node from the Node Library to spawn it into the blueprint.
2. Drag the Renderers output from the Spawn Mesh node into the Array input of the At Index node.
3. Set the Index input on the At Index node to 0 (to retrieve the first element).
4. Connect the At Index node’s output to the Renderer input of the Apply Material node.

Material Input Pin

This input allows us to specify which material we want to apply to the renderer.

UBF comes with a built-in library of shaders, designed to be generic and adaptable to a wide range of use cases. This library will continue to expand as new requirements arise.

For this example, we need a basic standard shader/material, so we will use a Physically Based Rendering (PBR) material. PBR materials are widely used in modern rendering due to their ability to simulate real-world lighting and material properties. (For more information on PBR, see Physically Based Rendering - Wikipedia).

To create an instance of a PBR material, we need two nodes:

1. Make PBR Properties – Defines the material’s properties such as color, texture, roughness, and metallic attributes.
2. Material Instance – Takes the properties from the first node and generates an actual material instance.

Spawn both of these pure nodes into the graph and connect the Properties output of the Make PBR Properties node to the Properties input of the Material Instance node, then, connect the Material output of the Material Instance node to the Material input of the Apply Material node.

The PBR material offers a variety of customization options to fine-tune the final look of an asset, including support for diffuse textures, emission, normal maps, ORM textures, and direct roughness/metallic adjustments.

The PBR shader supports multiple rendering modes. For this example, we want to manipulate the color dynamically, so we will use the Solid Color mode instead of defining color through a texture.

1. Select “Solid Color” as the render mode at the top of the properties.
2. Set the Base Color to any color of your choice using the color picker.

Next, let’s use some of the resources from the starter pack to populate other PBR properties:

• Enable Normal Maps and ORM Textures.
• Assign the appropriate textures:
  • Normal Map: T_PB_Head_PartyHat_NR_1024
  • ORM Texture: T_PB_Head_PartyHat_ORM_1024
• Set Roughness and Metallic values to 0.5.

With this, we have everything we need to bring our party hat to life—now with color, detail, and material depth! Let’s test it out in the Previewer by pressing the Preview button in the top left of the Blueprint viewport, and watch as our party hat renders with its new material.

​

Dynamic Colors for Maximum Party Impact

Our party hat is looking fantastic, but right now, it’s limited to a single color—whatever we manually set in the Base Color property of the PBR Material Properties node (green in the example above). If we’re going to throw the most exciting party in Fluf World, we need variety—hats in every color imaginable!

To achieve this, we need to remove the hardcoded color and instead make it a dynamic input. This will allow the color to be defined externally—meaning different instances of this blueprint can generate party hats of different colors without modifying the core blueprint.

Navigate to the Inspector Panel on the left side of the Blueprint Viewport and select the Blueprint Inputs menu.

Here, we can add a new input parameter that will allow us to control the color dynamically. Click “Add an Input”, and in the Add Input window, set the Type to Color. Give it a clear and descriptive name, such as PartyHat-Color, and assign it a default value—this will be the color applied when no other value is specified.

With our input parameter in place, we can now integrate it into the blueprint itself to replace the previously hardcoded color.

Inside the Blueprint Viewport, drag and drop the newly created input variable so that we can use it within the graph. Locate the “Base Color” input on the Make PBR Properties node, then connect the output of the Get PartyHat-Color node directly to the Base Color input of the PBR Properties node.

This connection ensures that the base color of the material is now determined dynamically at runtime, instead of being permanently set within the blueprint. By changing the value of PartyHat-Color, we can modify the appearance of the hat without needing to create an entirely new blueprint.

To confirm everything is working correctly, press the Preview button at the top left of the Blueprint Viewport and observe the party hat in the UBF Previewer. At this stage, the hat should be displayed using the default color that was assigned when creating the input.

To further test its flexibility, go back to the Blueprint Inputs menu and change the default color to something different. Press Preview once again, and you should now see the color updated in real-time inside the previewer.

With this simple change, we have successfully transformed our party hat blueprint into a fully customizable asset.

​

Scaling Up the Party—The Power of Blueprint Instances

By exposing color as an input in our blueprint, we’ve unlocked the ability to create multiple party hats, each with a unique color. If we wanted to support a variety of colors, one potential (but highly inefficient) approach would be to duplicate the blueprint multiple times—creating a separate blueprint for each color. While this may seem like a quick solution, it introduces significant duplication and unnecessary maintenance overhead.

Imagine needing to tweak something in the base blueprint, such as adjusting the size or adding a new feature. With multiple copies, we would have to manually update each one—a tedious and error-prone process. Instead, we can leverage Blueprint Instances to efficiently manage variations while keeping everything organized and reusable.

If you haven’t already, take a look at the Blueprint Instances section of this documentation, where we explore their full potential and when to use them.

To create an instance of our Party Hat Blueprint, navigate to the Instances menu in the Blueprint Inspector. Here, you will see an option to Create Blueprint Instance—press this button, and a new instance will be generated.

At first glance, the viewport remains the same, but you’ll notice a key difference—instances do not allow direct modifications to the blueprint’s internal logic. Instead, they expose configurable inputs, allowing us to customize each instance without altering the base blueprint.

Since our PartyHat-Color input is now exposed, we can define a specific color for this instance. Let’s start by creating a Red Party Hat—simply set the color override to red and save the instance.

Now, let’s repeat this process for two more hats—a Yellow Party Hat and a Blue Party Hat—by creating additional instances and overriding their colors accordingly.

And just like that, we’ve successfully created a variety of party hats without duplicating or modifying the original blueprint! This method allows us to scale infinitely, supporting as many variations as needed, all while keeping our project streamlined and efficient. Feel free to open one of your newly created blueprint instances and press the Preview button as you would inside a normal Blueprint - you will be able to see the results of applying your blueprint instance overrides to the base blueprint inside the Previewer.

With our party hats ready to go, it’s time to export our project and take our work into the real world!

​

Sealing the Deal—Packing Up Our Party Hats

​

Starter Project 2: Bear Necessities! 🎩

Fluf World is abuzz with excitement for the upcoming fashion show! Our friend Party Bear has been invited, but there’s a catch—he needs to swap outfits on quickly and seamlessly to keep up with the show’s rapid costume changes!

Our task is to build a modular wardrobe system that allows Party Bear to effortlessly transition between different looks. Each accessory within an outfit will be it’s own blueprint instance and we will learn how we can use nested blueprints to multiple 3D objects working together.

By the end of this project, you’ll have a flexible dressing system for a Party Bear—one that can be easily expanded if he decides to pick up a samurai armor or pirate ensemble next!

So let’s dive in and make sure Party Bear has everything he needs—because when it comes to bear necessities, a well-stocked wardrobe is at the top of the list!