Creating custom loader

In Panda 2, you can easily create your own custom loader. Custom loader makes your game look more professional.

Simple loader

Start by creating new class that extends from Loader class.

game.createClass('MyLoader', 'Loader', {
    init: function() {
    }
});

For this example loader, we will create white bar using Graphics class.

game.createClass('MyLoader', 'Loader', {
    init: function() {
        this.bar = new game.Graphics();
        this.bar.fillColor = '#ffffff';
        this.bar.drawRect(0, 0, 200, 20);
        this.bar.center(this.stage);
        this.bar.addTo(this.stage);
        this.bar.scale.x = 0;
    }
});

Next we want to scale the bar every time a file is loaded. For this we can use onProgress function with percent property.

game.createClass('MyLoader', 'Loader', {
    init: function() {
        this.bar = new game.Graphics();
        this.bar.fillColor = '#ffffff';
        this.bar.drawRect(0, 0, 200, 20);
        this.bar.center(this.stage);
        this.bar.addTo(this.stage);
        this.bar.scale.x = 0;
    },

    onProgress: function() {
        this.bar.scale.x = this.percent / 100;
    }
});

Once every file is loaded, the bar will be on it's full size.

Lastly we need to set our new loader as the default loader for our project. We can do that by setting loader attribute for System class in our game.config.

game.config = {
    system: {
        width: 768,
        height: 1024,
        scale: true,
        center: true,
        resize: false,
        loader: 'MyLoader' // Set new default loader
    }
};

Save and restart, now you should see your new custom loader in action.

Loader with assets

Sometimes you want to use your own assets in your loader to make it look better. This makes things a bit more complicated, but still pretty straight forward.

This solution requires two different loaders. One that loads all assets for your loader, and one that then loads all the other assets for your game.

Let's start by creating new class named PreLoader which extends from Loader class. Also before that, add all assets needed for your loader.

game.module(
    'game.main'
)
.body(function() {
    
// Load loader assets
game.addAsset('logo.png');

game.createClass('PreLoader', 'Loader', {
    init: function() {
    }
});

});

Next add new function onComplete to the class. This function is called, once all the files are loaded.

Inside that function, add all other assets to loading queue with addAsset function. We will left init function empty, so our PreLoader doesn't really show anything to the user.

game.module(
    'game.main'
)
.body(function() {
    
// Load loader assets
game.addAsset('logo.png');

game.createClass('PreLoader', 'Loader', {
    init: function() {
    },

    onComplete: function() {
        // Load game assets
        game.addAsset('background.jpg');
        game.addAsset('player.png');
        game.addAsset('enemy.png');
    }
});

});

Now let's create another loader where will be using our loader assets.

game.createClass('MyLoader', 'Loader', {
    init: function() {
        this.logo = new game.Sprite('logo.png');
        this.logo.center(this.stage);
        this.logo.addTo(this.stage);
        this.logo.alpha = 0;
    },
    
    onProgress: function() {
        this.logo.alpha = this.percent / 100;
    }
});

In this loader, we will create new sprite and place it on center of the screen. Then we will change it's alpha based on the percentage of loaded files.

Next, to get our new MyLoader loader working, we need to launch it from the onComplete function of our first loader.

game.createClass('PreLoader', 'Loader', {
    init: function() {
    },

    onComplete: function() {
        game.addAsset('background.jpg');
        game.addAsset('player.png');
        game.addAsset('enemy.png');

        // Set default loader to MyLoader
        game.System.loader = 'MyLoader';
        // Load start scene with the default loader
        game.system.loadScene(game.System.startScene);
    }
});

Lastly set the default loader class to PreLoader in your game.config

game.config = {
    system: {
        width: 768,
        height: 1024,
        scale: true,
        center: true,
        resize: false,
        loader: 'PreLoader'
    }
};

Now everything should be ready. Here is the complete code for our example.

game.module(
    'game.main'
)
.body(function() {
    
// Load loader assets
game.addAsset('logo.png');

game.createClass('PreLoader', 'Loader', {
    init: function() {
    },
    
    onComplete: function() {
        // Load game assets
        game.addAsset('background.jpg');
        game.addAsset('player.png');
        game.addAsset('enemy.png');

        // Set default loader to MyLoader
        game.System.loader = 'MyLoader';
        // Load start scene with the default loader
        game.system.loadScene(game.System.startScene);
    }
});

game.createClass('MyLoader', 'Loader', {
    init: function() {
        this.logo = new game.Sprite('logo.png');
        this.logo.center(this.stage);
        this.logo.addTo(this.stage);
        this.logo.alpha = 0;
    },
    
    onProgress: function() {
        this.logo.alpha = this.percent / 100;
    }
});

game.createScene('Main', {
    init: function() {
        var player = new game.Sprite('player.png');
        player.addTo(this.stage);
    }
});

});