[UE4] Making a File Manger in Unreal Engine (FileMan Plugin)

hey guys welcome back to another video today we're gonna be talking about making a basic file manager using the fileman plugin which is available for download in the description once fileman is loaded into your plugins folder of your project or engine just go ahead and click your project and let's get started to make sure everything is installed properly go into the plugins folder and scroll all the way down to blueprints inside of the blueprints you should see fileman right here and just click enable make sure it's enabled restart your project and you should be set anyway back to it let's see what we're actually working with in the level blueprint i'm just going to delete everything and select file man we have four nodes right here delete get all files in path read and write so what i'm going to do is i'm going to get all the files in a path and then we're going to expose them on the screen so we can see them edit them and delete them so to do that i'm going to find a good path so let's go back into our files this is actually the origin point that the plugin looks for in a packaged game this origin point is actually the step up from the root directory so you'll have your exe file and then you have a folder that's called your project name inside that project folder that is the root but inside of the engine when we're working as a project this project directory is the root so what that means is we're going to go ahead and create a folder called stuff and i'm going to go ahead and just put a file or two in here so three text files just for testing let's go ahead and get everything get files in path the path is just going to be stuff remember that is the beginning of the route that starts here then it goes to stuff and then it gets the three of the files that are in there so for each we'll bring our begin play back and we'll just print the string this will print the names of the files there they are so if we're actually making a file manager we're going to want to make some ui so in my ui section i'm going to go ahead and create a ui that's going to be called file manager quickly what i'm going to do is i'm going to type overlay we're going to make our file manager inside of an overlay and the overlay is going to be centered in the middle of the screen i'll use an image for the background just drag that into the overlay and size it to fit horizontally and vertically while setting the color to whatever color you want next i'm going to add a scroll box this scroll box is going to be the parent component for where we actually spawn in our files just go ahead and set that to the same settings where horizontally fills and we'll set a padding of maybe 24 each and on the top we're going to do something a little bit extra we'll go ahead and set this to 100. i'm going to wrap this image with a horizontal box and then i'm going to throw a text box into the horizontal box so we can actually select our directory we'll center it fill it and then fill this horizontally so we have a big text box to work with and we'll try to make that look a little bit more pretty in a second but first what we're going to have to do is when the text is committed which means when you press enter or commit in any other way which we're going to use enter by switch we'll get the files in the path and then if this exists branch on enter we'll create those files in the scroll box now before we do that we have to actually make child first file i'm just going to call it file and we'll just load some text set it to a good site create widget and this widget is going to have a name in the variables file name set that to string and we want to make sure this is instance editable and exposed on spawn compile save and grab our file using that file name now what it needs to do is it needs to add this to the scroll box component so we'll say scrolly is our variable we'll take scrolly get it and add child well what do we want to add we want to add the widget that we just created so the name of that one last thing when we enter in new directories what's going to happen is it's going to add everything so before anything happens here what i'm actually going to do is clear the children so we can always have a nice refreshed ui in my level blueprint i'm just going to create that widget get our file manager widget add to viewport and then we can launch our game so now that we're in here we'll just type stuff press enter there's our text blocks i forgot to actually bind those to the file name when this is constructed we'll take our text which we're going to create a variable out of we'll take that variable and then we set our text to the text there we go when it's constructed it sets that to what the value of the string is converts that to the text and then we should be able to visualize the actual files so let's go ahead stuff there we go our file names let's type source there's our source files let's type content and there's our content files i'm going to try to do some prettying up of the file manager before i get into editing and deleting we'll go ahead into our file and make a reference to the file manager which it comes from call it parent do the same thing that you did with file name and expose it on spawn now we have a parent section in our file widget we'll go ahead and set this to self now with this you'll see what i do next i'm going to create a custom event called refresh set that to these and for our actual text value what we're going to get is drag all of this out create a variable called path we'll set this to the path then we run our refresh clean this up a bit now it should refresh when we press enter which means we can go into our files when we do hit delete it'll delete those accurately and next up we're going to go into our file like i said i'm going to try to make it look nice i'll make a button that goes over top of this something i like to do with buttons is just take the opacity down now we have a button that looks like this that's how we'll edit them but how are we going to delete them make another button to the right which is way over here get some nice looking text set the text to delete let's see what that looks like so i have a little delete button on the side just did a little bit cleaning up here that looks pretty nice and now we're pretty much ready to go so this delete what we're going to do we're just going to set this up real fast when it's clicked we're going to delete that file so take our parent get the path and then we're going to append the path to the file name and simply we just type delete file once it is deleted we'll branch then go back to the parent and then we're going to call our refresh that way it refreshes the files to see that that file is now gone so in our stuff and i'm actually going to bring this up on the windows here are our files in windows we're going to delete this file using the deletion we click delete it's now gone we go back to windows it's also gone so that's how deleting works let's go into actually editing i'm just gonna make a small text box multi-line text box that's gonna go on this side and we'll use this for editing the text it's initially going to be set to invisible though so hidden when the file is clicked we'll get our button and we'll reveal that which is going to be called a multi-line editable text get multi-line and set the visibility to visible okay now that that's done we'll go ahead and read the file and we'll set this text to the content of the file and then when it's pressed when enter is pressed so we will bind on text committed create a custom event save text we'll save text or write file my bad we will write the content to the file name now before we do anything i actually just realized our file name is just going to save to the root so what we have to do first is get our path the path actually comes from the parent so we get our path we have to do that append again put your slash then your file name and then you save now going in here we should have something decent stuff click this type hello world this is a test i press enter um actually technically when this is commit we'll just click off of it because that's a better commit method than using um enter that doesn't show up though for some reason let me see why okay yeah so you need to actually drag down here that's why that was my issue i was actually pulling the file without the path name that always throws me off as having the path there but anyway yep going back in here stuff let's open this back up hello i press enter whatever i pull off of that i go back in it still says hello i click off should disappear we'll say goodbye and this one enter again doesn't do that but when we actually open these they open accordingly that's a basic file manager inside of unreal that is how you would go about doing that thank you guys for watching and i hope you enjoy the plugin make sure to subscribe like the video and definitely check out that plugin in the description i will see you guys next time

Channel: Aaron Hunt

Views: 9,188

Keywords: game dev, music, art, film

Id: AtoyZ8Wci00

Length: 10min 12sec (612 seconds)

Published: Thu Oct 22 2020