First off it might be best to start by reading my post on getting started, and the state manager in general with phaser. Phaser is a very complex project, but is well worth the investment of time to study it. In this post I am covering how I go about getting a basic loading screen working okay involving a progress bar, and more than one State object.
So I like the idea of breaking things down into many states that interrelate to each other. At a minimum if there are some images I want to use, I will have a Boot, Load, and Game states. Where Boot is the very first state that is started, then I progress to Load, and once the Load state fires it’s create method I can go on to whatever is next.
As such I work with something like this.
As things get completed each of these states might be pulled onto there own *.js files, but the will need to be loaded in a manner in which Phaser.Game is called last.
I load all of my assets in the preload state, I can use game.load.image to build a query of files. The create method of the Load state will not fire until all of the assets are loaded.
This is an event that is fired every time a file is loaded, or fails to load. I can used the add method to attach more than one event to it if I want just like with el.addEventListener. The values that are passed to the handler are progress, key, success, loaded, and total.
In this loader I am not doing anything with handling the possibility that an asset may fail to load, but doing so can be done with that boolean if I have something in mind with that.
This is one event that can be used to update the information on some kind of load screen, in this loader I am just displaying a simple bar that will fill the whole of the screen when done.
The idea I hand in mind with this post is to just have a quick simple post on how to get started with loader in phaser, and maybe not go down a rabbit hold covering every little detail about it. Doing so should deserve it’s own septate post on that matter. For the time begin there is the official API docs on Phaser.loader
So there is the idea of updating the progress bar based on the total amount of data that has downloaded so far rather than a file count. Displaying some kind of message during the boot state, displaying a percentage and so forth.
Still so far I like this approach at Setting up a load state. I am still rapidly developing my collection of posts on phaser, as such I will most likely come back and touch base on this again. Just want to have something on this for starters, it’s important.