[Unreal Engine] - Import Images During Runtime

in this video I'm going to be showing you how you can use Unreal Engine to upload an image that is on your PC or download an image that is on the web and show it in your game during runtime so what this can be used for is for example if you want your players to upload an image of themselves or upload an image as a profile picture this could be a pretty good way for you to allow them to do that so what I have here is the third person map that is from the template and I have not really done anything except for adding a few uh small models I have and this is just going to be for me to basically help you showcase this but you can use any models you want this is just going to be helpful for me so to do this and to download the image or show the image that is on your PC what you want to do is to Simply first and foremost and decide where you want to show the image so I'm going to just go down here and open the content browser and drag in the plane I have I'm going to just scale it up slightly like this erase it from the ground and rotate it so we can actually see how it looks the second thing I want to do is to Simply go to my content drawer again and just somewhere in here you want to make a material so right click go to material and name this m underscore Test download I'm just going to drag and drop this onto the actual mesh and then I want to go back in here again and I want to go into the material Editor to change the parameters we can use in here so hold down t on your keyboard and press the left Mouse button and you'll get a texture sample you can also right click enter type in texture and get the texture sample from here with the selected now you want to right click on it and go and select this to be converted to a parameter and in the parameter name up here you want to set this to be texture now it doesn't really matter what it says but you'll remember you need to remember what the text you write up here is going to be uh then also since unreal have done some changes to their system you want to set this to be zero um just to make things a bit nicer I'm going to plug this into the base color and I want to select this again and just scroll down until I find the texture and I can apply any texture I want from here I'm going to use the grid texture here that is in the game at the moment but this will be replaced afterwards with something different I'm going to press apply and then press save and see how it looks in the game so it seems that it somehow is been rotated so this one is black and this one is green so I think this may be a bit wrong so I'll try this instead and apply and save and then close down this material editor view because we don't need it anymore from here on out I want to make sure now that I can upload an image or download an image and show it up here so you can do this in many different ways the way I'm going to be doing it is by using the actual level blueprint in here what you want to do is to add an event called begin play so this means when the game starts when this level runs this is going to be executed so from here on out I'm just going to drag this pin and type in download and get the async task download image right here and what I would then want to do is to type a URL that I'm going to be using to actually which type of image I'm gonna get basically so if I head on over to my website here and show you uh this is my website called eliaswick.com if you head over to the portfolio section and shaders and then the post process shaders on this page you can find over a hundred post-process shaders that are available for purchase so if you find something that you like you can just go into the page and then there's a buy button for the actual Shader but on in this case I'm just going to use that image from here so I'm going to go to fog here and let's see let's use let's use this one here so I'm gonna click on it and then right click now I have my PC in Swedish so uh your equivalent would be a copy image link so I'm going to select that and if I just paste this into the URL here right now you'll see that this image is going to be shown now you can close down your web page and just paste this in to the download image node here what we then have is we can continue from this on so do other things and then we have the on success so if it succeeds it'll do something if it fails it'll do something different and then finally down here is the actual text that you'll get from from uh from the download that you do now so in this case what we need to do is we need to assign this texture that we downloaded onto the actual mesh we have in the game so we can just select the mesh and then right click and in the top here you can actually call a function on the statement so we're going to create a reference to the plane we have here now what we can do with this plane is we can drag from here and we can type something called create Dynamic material instance I'm just going to tidy this up and I'm gonna plug this into on success so if it succeeds we want the material to change and in here I'm going to select the source material and that will be the one I made before so it's going to be test download with return value we want to actually change the actual texture and not any of the scalar values or the the vector values so we just pull from the blue pin here and type in texture and then you want to select the one called set texture parameter value from here you want to then go ahead and type in the parameter name that you named it before so this will be texture and then the texture you want to assign it to be the actual value should be the downloaded texture you will be able to see that when this runs this image that we have here is going to be assigned to the actual texture or material basically in the game if I compile and save and then I press the play button here in a couple of seconds once it's downloaded it's going to be shown in the game so it's super simple and that is how how it simply works so to show you again if I press here again wait a few seconds it's downloading once it's downloaded done and it's completed it's going to be shown in the game and that is basically how you can do this now to show you how you can do this for a file that is on your PC I have navigated here over to my section of images I have on my PC I'm releasing an Android game called Bubble pop2 in a few weeks so you can feel free to check that out if you want to but I'm going to use an image here just to Showcase a bit of how it works and how you can do this with a file that's on your PC I simply find an image that you want to be showing in the game I'm going to use this thumbnail as an example and then what you want to do is simply go up here and get the actual image name so this will be the full name of the image that I want I can then go ahead and go in here and it's important that you type in the beginning before you paste this in file colon forward slash three times and then here you can then paste in your actual your actual path now I want to make sure this is looking nice so I'll need to change the slashes so that they are forward slashes instead I'm not sure if this is fully necessary but to keep things tidy this is what I'll do now since this is a file that is on my PC it won't have to download in the same way as we downloaded an image that was online so this will be a lot quicker and you might not even see a change in the game so again it's changed and let's play and there you go here's the image and that's the one that is on my PC now a good thing to note about this if you allow your players to upload an image that is on their PC or allow them to download an image that is on the web then they might actually upload things that are not going to be too visually nice always like profile pictures may include you know naked stuff and things you may not want to see so uh be wary that if you allow your players to upload anything that's on their PC or anything that's online then things might spiral out of control anyhow thank you for watching this video I hope you enjoyed it and I'll see you next time bye

Channel: Elias Wick

Views: 14,546

Keywords: Upload Images During Runtime, Download Image During Runtime, Custom Images, Modding Unreal Engine, Unreal Engine, UE5, UE4, Shader, Shaders, Post Process Shaders, Post Process, Shader Graph, Materials, HLSL, GLSL, Unreal Engine Marketplace, Elias Wick, Unity, Blender, 3Ds Max, Maya, Tutorial, Lesson, Game Development, Game Dev, Indie Game Dev, Rendering, Animation, Tech Artist, 3D Artist, Programmer, 3D Environment, Photoshop, ZBrush, Megascans, Substance Painter, Substance Designer, Adobe

Id: 3RDFEKDHRAk

Length: 9min 20sec (560 seconds)

Published: Thu Aug 25 2022