Tutorial Overview

In this tutorial we'll cover how to load images from a hosting service such as Dropbox or Google Drive into your Unreal Engine project after it's been packaged. The tutorial is broken down into 3 steps. First well cover how to set up a blueprint and material that can download and display a web hosted image in your levels. Then we'll cover how to use Dropbox or Google Drive to host your image files and generate URL links for each image file. Last, we'll connect Chauncey to your Unreal Engine project allow the image URLs to be sent form the Chauncey Debug (Web Control Interface).

While the majority images or textures that make up your game will conventionally be imported and using the Unreal Editor and distributed with the packaged application, streaming textures into your game from the web at runtime comes with a few benefits across multiple use cases.

To name a few:

• Hosting large image databases on a server will reduce package game size
• Ads within your game can be updated without sending game package updates
• User profile content can be streamed for social activations

This is the step by step process we've employed in client and development lab projects to stream images from the web into unreal. At the end of the tutorial you can find a link to our discord for any questions you may have.

‍

Step 1: Create a UE project we can use to stream in web hosted images

In this first step well create a new Unreal Engine project the actors and logic required so it can download images that are hosted on the web. For this tutorial was created for UE 5.10.

1. Start by creating a new Unreal Engine project using the Games > Blank template.

2. Create a new level named "LV_Image_Streaming" and open it.

3. In the Content Browser, create a new folder under Content and name it "ImageStreaming". Add a new Blueprint Actor and Material to the folder as seen in the image below.

3. Open the new material and add a Texture Sample node to the graph. Right click the Texture Sample node and Convert to Parameter.

4. Rename the parameter to "Texture". Assign a image of your choice as a default texture. We imported this checker image into the project and assigned it as the texture but you can add any image you'd like. Save and compile the material.

5. Next open the new actor Blueprint we created. Use the component panel to add a plane to the blueprint. Assign the material we created to the material slot of the plane. Assign transform values to the Plane as seen in the example. (We set the planes scale values to accommodate 16:9 images). Save and compile the blueprint.

6. Open the construction script and create the construct function seen in the below example. This function will create a dynamic material and assign it to the plane when the blueprint is constructed. Save and compile the Blueprint.

7. Open the Event Graph and create create the function seen in the below example. This function takes URL as a string that will be downloaded and applies the downloaded texture to the texture parameter of the dynamic material on the plane.

• Make sure to set Instance Editable to TRUE for the custom event and the string. This will expose them as editable parameters within the editor.
• Set the parameter name to "Texture" to match the texture parameter we setup in the material.

Save and compile the Blueprint.

8. Drag the blueprint into your level then select the blueprint in the outliner and you should see the exposed controls for Update Image (Button) and Image URL (Text Field).

Step 2: Upload your images to Dropbox or Google Drive.

In this step we'll walk though hosting images on Dropbox and Google Drive. We'll upload the images, generate links for those images, then format those link URLs into a string that will be pasted into your blueprint to stream the images at runtime into Unreal. The process is similar weather you chose to host your images on Dropbox or Google Drive. Chose the image hosting option that you prefer.

Option 1: Using Dropbox to host your images

1. Upload the images you plan to stream to Dropbox
2. Right click one of the images and select "Copy Link"
3. Paste the links to a notepad or other document. You need to modify the links format slightly for the blueprint to load them correctly in Unreal.

Option 2: Using Google Drive to host your images

1. Upload the images you plan to stream to Google Drive
2. Right click one of the images and select "Copy Link"
3. Paste the links to a notepad or other document. You need to modify the links format slightly for the blueprint to load them correctly in Unreal.

4. The links you copied must be formatted. This Unreal Engine published graphic explains the format changes required to links you copy from Dropbox and Google Drive.

5. Once you have the links formatted, navigate to the Unreal level and press "Play" to run your level. Select the blueprint in the outliner and paste one of your new formatted links into the Image URL field and press the Update button. You should now see the image load onto the plane. Based on the images file size, it make take a few seconds for the image to download from your Dropbox or Google.

‍

Step 3: Using Chauncey Live to send image URLs to Unreal from a web control interface

In this step, we connect Chauncey Live to this Unreal Engine project to send the image links as strings to your Unreal Engine project from a web control interface. These steps require you to have a Chauncey Live account and the Chauncey for Unreal plugin installed and enabled within your Unreal Engine project.

This Getting Started tutorial will guide you though Chauncey Live account creation and Chauncey for Unreal plugin usage. We recommended starting with this video before you continue.

1. Use a web browser to log into your Chauncey account. On your project dashboard create a new project.

2. Rename the project then use the blue plus to create a new group containing two channels formatted like the example below:

• Group - "Image Control"
• Channel (String) - "Image URL"
• Channel (Action) - "Update"

These are channels that we'll connect to our Unreal Projects blueprint to remotely send event driven data to our UE project from the web.

3. Next toggle back to the Unreal project and go to Windows > Chauncey Editor

4. Enter your Chauncey username and password and press Log In. This will authenticate your Chauncey account within the Unreal Project establishing a link between the two apps.

5. Close the Chauncey Editor login window then open the blueprint we created. Right click in the event graph to add a new node and in the popover list type "Chauncey". Select Chauncey Subscriber Node from the top of the list.

6. Rename the Subscriber Node to "Image Path" then use the details panel to change the input type to string. Connect the node to set the value of the Image URL string variable.

7. Repeat the previous steps to add another Subscriber Node. Name it "Update" and set the input type to string. Connect the event pin to the Download Image node.

8. Navigate to the content browser right click and create a new Chauncey Binding Asset.

9. Name the Binding Asset and drop it into your level.

10. Open the Binding Asset and use the dropdowns on the right side to select the Chauncey Live project that we created. The Channel List node in the middle will update to display the list of channels within your web project.

11. Right click in the graph to see a list of any Chauncey Subscribe Nodes that were created within your blueprints. Select the "Image Path" an "Update" nodes to add them to the binding asset.

12. By connecting the pins from the main Channel List node to the individual Subscriber Nodes, you create a real time connection from the Chauncey Channels to the Unreal Blueprints Subscribe Events.

13. Back in the level editor, add the Chauncey Binding Asset we created into your level. The asset must exist in the level for the connections to work.
14. With Unreal running in play or preview mode open the Chauncey Editor and navigate to the Debug. Copy and paste your image links to the Image URL control field and press Update to send that value. This process can replicated and modified within your existing projects and will and load textures at runtime, even after a project has been packaged.

For questions or to share your work join our discord!