(click anywhere to close)
OPEN MENU

[Phaser] Awesome Preloaders

category: Games | course: Phaser | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Boot.js
2. Preloader.js

As your game reaches larger and larger sizes (due to more media and lots of code added), it's going to take a while to load. However, you don't want to wait 10 seconds, watching a black screen doing nothing, before a new screen loads. Therefore, implementing a preloader can be nice!

When implementing this preloader, you actually want 2 states before the main menu: Boot and Preloader.

Boot.js: this state loads the images needed for the preloader (the loadingBar, shouldn't take more than a second).

Preloader.js: this state displays the loadingBar, while loading the media for the game.

Boot.js

In Boot.js, you can do the following:

var Scenes = {};

//Receiving the game variable
//Another option: set the game variable as a global variable in the main html file
Scenes.Boot = function (game) {
	this.game = game;
};

Scenes.Boot.prototype = {

	preload: function () {
		//Load images for a full loader and the empty one
		this.load.image('loaderFull', 'assets/UI/loaderFull.png');
		this.load.image('loaderEmpty', 'assets/UI/loaderEmpty.png');
	},

	create: function () {
		//Start the preloader-state
		this.game.state.start('preloader',Scenes.Preloader);
	},
	
}

This would also be the place to adapt (scale) your game to which device is using it. Learn about that in the Phaser Multiple Devices Tutorial

NOTE2: Learn about all the media (image, spritesheet, audio, etc.) you can load in the Phaser Graphics/Design Tutorial 

Preloader.js

Then, in Preloader.js:

Scenes.Preloader = function (game) {
    this.game = game;
};

Scenes.Preloader.prototype = {
    preloadBar: Phaser.Sprite,
    loaderEmpty: Phaser.Sprite,

    preload: function () {
    	//Display an empty loader
        this.loaderEmpty = this.add.sprite(300, 300, 'loaderEmpty');

        //Create the full loader
        this.preloadBar = this.add.sprite(300, 300, 'loaderFull');
        //And let Phaser adjust it's size according to the loading progress
		this.load.setPreloadSprite(this.preloadBar);
    },
    
    create: function () {
    	//Start the main menu once done loading        
        this.game.state.start('mainMenu', Main.MainMenu);
    },

}

And now you should have a well working preload-system. The user knows it's loading, how much is already loaded, and it looks great. Well, assuming you use great-looking art work, obviously

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)