Creating custom loader tutorial

[enpu]

Want to make a custom loader for your game? Here is a tutorial on how to do that:

https://www.panda2.io/tutorials/loader

[Wolfsbane]

Necro bump.  @enpu

I don't know if this is a bug or not, but the first addAsset logo is actually necessary for this to work. If you don't call this first (i.e. call addAsset at least once) then all the other addAssets don't work. Well, I don't know if they don't work or not, but I can't use them in-game.

I didn't do any deep debugging into why this is, but this is a curious FYI. I guess the first call sets up some kind of state (global state??) which is used in subsequent calls, so if the first addAsset is tucked inside the scope of a local method, all the assets are loaded within that scope. 

 

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

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);
    }
});

});

 

Edit: Otherwise, great example!

[enpu]

I'm not entirely sure if i understand you correctly. But there is no point on having preloader if you are not adding any assets to loading queue before that.

[Wolfsbane]

That's.. I didn't think of that. Fair enough.

It's an interesting FYI. I'm trying to think of a scenario where I'd want to do a Pre-loading-type action that wouldn't involve loading assets. (Maybe some kind of websocket/network set up? )