Open your text editor. And with the resources you've downloaded, if you've not already downloaded them, then now's the time. And take a look at and folder v1, file, game dot j s. And then the beginning of that, we're going to be looking at this section here, which is all about creating a preloader. 3d assets tend to be, you know, pretty large, and we're going to be very keen on supporting mobile in this course. And so the first thing we're going to do is create a loading bar. We're going to give it the assets that we're going to load in which in this case is just our animations and our girl character.
So we created a little simple Java's crypt array, which is the name of Allah, SPX assets with a language to define where we find them. If you're using the default for this course and you're not moved anything around, then we have a v one folder. And in the same folders, the V one folder is an assets folder. And in the assets folder is the SPX folder, which has got a lot of animations. And it's got the environment for the game. We created a little options object.
It's going to have a property which has assets which is an array is going to have a property which is a function that gets called When the preload is completed, and in this instance is going to call in it from the game. Remember in the pre loader, this will refer to the pre loader, so we need to make sure that we still game as a variable and use that in our function. And it's going to call in it and once it's called in there, it's going to call that animate animator will be called anything up to 60 times a second depending on the speed of your device using the names array, and the for each method of an array, then we can call a function which will be provided with a property which is each one of these names and we append a path. So that's the asset path with SPX forward slash, and then the animation with dot SPX added to it.
So by the time we've run that, the assets is going to have each one of these prefixed by dot dot forward slash assets forward slash, FX, girl, dash walk.fx. So the full path to that particular asset and then using this options object, we create a pre loader. So let's have a look at the pre loaded class. Here's the pre loaded class. It first creates a property of the past Reload, which is the assets, then work through the array of assets passed as being passed in, it creates a property of the assets, which is this path and defines how much have been loaded and whether or not the loading for that particular asset is complete. And then it calls load of this class for that particular asset, it defines the look of the loading bar, which is easily edited here.
And, and then in the low class, it loads in its, it creates an XML HTTP request to load in that particular asset. And in the progress for that particular HTTP request, it assigns the amount that's been loaded on what the total and size of the asset is. So, that's coming We'll all be used in the progress for the loader. So we can work out how much has been loaded of all those multiple assets to display the bar. You don't particularly need to know the information. And probably the most important thing is to be able to edit that to change the colors of it, the width of it, whether or not it's got rounded edges, etc.
And you'll need to know how to actually call it in the first place I defined in your assets, and what happens once the pre loading is finished. To see it working, go to your web server for Chrome. Make sure the folder you're pointing to is the resources for the game that we've just, you've just downloaded or you downloaded earlier. Go to it, you should have a folder this time. Last treasure, go into that choose v1. There you can see the pre loader working.
And it should load in that. And once she's initialized, she'll start doing the animations. And you can actually use the onscreen joystick to, to move around. So that's the first stage in your creative this game, creating the preloader that allows the user to see that all the assets have been downloaded from the internet.