🎓Rendering a scene in a created window

1

📄 Requirements

To have a basic understanding on how this plugin gets used

• you followed step 2: Installing This Plugin

• you followed step 3: Enabling This Plugin

• you followed step 4: Working With The Subystem

2

➕ Creating the new assets we need

1. Locate your content browser (If not visible, press CTRL+Spacebar) and create the following list of assets:

   1. Actor - This will be our scene renderer when can place in the level or attach to something

   2. Widget - This will contain our real time rendered scene

   3. Render Target - We will feed this into our renderer to use the rendered scene in a material

   4. Material - From the render target we need to create a material to show it in a widget

2. Click on Save All

3

💻 Setting up the actor

1. Open the actor by double clicking it

2. In your actor, click on “Add”. Then search for “Scene Capture Component 2D” and click on it. Note: If you don’t see the Components tab, hover over “Window” at the very top of the screen and select “Components”

1. Select the Scene Capture Component 2D you just created and select the Render Target we created in step 1 in the details panel

If you don’t follow the tutorial and already have your own scene capture component: Make sure to have the “Capture Every Frame” and “Capture on Movement” bools on true

1. Compile and save the actor

4

💻 Setting up the material

1. Open the material by double clicking it

2. Disconnect this pin

1. In the details panel, hover over the “Material Domain” setting and select “User Interface”

1. Connect “RGB” with “Final Color”

Info: It could happen that now an error shows.

If that is the case, select linear color as the Sampler Type

1. Apply and save the material

5

💻 Setting up the widget

1. Open the widget by double clicking it

2. Add an Canvas Panel to your widget root

3. Add an image to your canvas panel

4. Set the image to cover the whole canvas panel

5. Select the material we created as your image brush

6. Compile and save the widget

6

💻 Setting up the window

1. Go into any blueprint, call the subsystem and from there, call the “Create Window” node.

2. Make the Window Settings struct

3. Click on the arrow to expand the struct to see more settings

4. Make the Advanced Border Settings Struct

5. Make the Size Restriction Settings Struct and expand it

6. Make the Bool Values Struct and expand it

1. Now you can see all the settings for creating a window. If you want to know more about what each settings does, make sure to check out the Window Settings struct

Hint: Add an little delay before creating the window so it isn’t below the main window when it spawns

7

💻 Final Tweaks

1. Spawn the blueprint in your level. You can also dynamically spawn it using the “Spawn Actor from Class” node or you can attach it to anything to have a moving scene. In this example, I am just adding the blueprint to my level and inside the actor blueprint I added the following code so it moves slightly

1. In the blueprint you created the window, right click on the event graph. Search for “Resize Render Target 2D” and select it

2. Connect this node at the end of the other stuff. Select the render target we created earlier and make sure to set the same size as the window

3. Assign an event on resized and also set the render target size there

8

🙏 Final Words

Now we are finished. You can resize the window and the resolution will be the same as the window.

Are you enjoying this plugin? Then don’t forget to leave a review to support the creator!