How to Load Assets in Phaser 3

ACCESS the FULL COURSE here: https://academy.zenva.com/product/html5-game-phaser-mini-degree/?zva_src=youtube-html5md

TRANSCRIPT

In our last video, we finished creating our project template. And in this video, we're gonna go ahead and we're gonna focus on loading in the assets that we'll be using throughout our game. We will also start setting up the rest of the scenes that we'll be using. So let's go ahead and get started. In the project files, you'll see there's a new Assets in a zipped folder. Inside that zip folder, you'll see all the assets we'll be using. You can also get the assets from the Encode Start zipped folder. So go ahead and copy those files into your current project. So before we start loading in all of our assets, we're gonna go ahead and create a few scenes. The first two scenes we're gonna create is a boot scene and a preloader scene. And so the reason we wanna do a preloader scene is it'll allow us to display a loading bar because when we are loading in a lot of assets, it can take a while for Phaser to bring in all of those assets if you have large amounts. And there's also other factors like your players' internet connection and other things like that. So we wanna go ahead and display a loading bar to let the player know that something is happening while all these assets are being loaded. So just for example, we're gonna go ahead and switch back to our GameScene real quick. So we're just gonna go ahead and create us a for loop. So we'll just do variable i equals zero and then i is less than 500. Do i-plus-plus. And what we're gonna do is we're just gonna reload that same logo image we're already using. And so we're just go ahead and we're gonna change the name. We're gonna go ahead and change the key of this asset to include i. And we'll go ahead and we'll save our game.

So you'll see what happens is as Phaser's loading in all of these assets, it doesn't look like there's actually anything happening in our game. So you see it takes a few seconds for our logo to actually appear. And so if you're using large assets like audio files or you're loading in a large number of images, it would leave the players in the dark of what's actually happening. So that's why we want to create a progress bar, so they know something is actually happening. So we're gonna go ahead and we're just gonna remove that code. And we'll go ahead and come back to our index.js file. So next, we're gonna go ahead and come to our Scenes folder and we'll go ahead and create two files. The first will be BootScene.js and the second will be PreloaderScene.js. And in these files, I'm just gonna go ahead and copy the code from our GameScene into each one. And we'll go ahead and we're gonna change, inside BootScene, we'll change GameScene to BootScene and our key ... https://www.youtube.com/watch?v=dHpyyc0BZyQ