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:
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.
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.
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).
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.
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:
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.
For questions or to share your work join our discord!