Show Dynamic loading Bar

[Apathy]

Wanted to know if you can show the loading bar progress just like at the beginning with the dynamic loader?

[Ninjadoodle]

I am wondering whether this is possible also, on a per level basis.

 

Thank you in advance!

[enpu]

This should now work correctly on current develop branch.

 

Example:

game.module(    'game.main').body(function() {game.addAsset('sprite1.png');game.createScene('Main', {    init: function() {        // Add new sprite to load queue        game.addAsset('sprite2.png');        // Init new loader        this.loader = new game.Loader('Game');    },    click: function() {        // Start loader        this.loader.start();    }});game.createScene('Game', {    init: function() {    }});});

[Ninjadoodle]

Hi @enpu

 

Awesome work, thank you! Can I still do things like below, or do I have to preload the assets and setup the loader before jumping to the next level? 

 

I tried the below, but no loading bar is showing.

game.module(    'game.level1').body(function() {// LEVEL CODEgame.createScene('Level1', {    backgroundColor: 0x000000,    init: function() {        game.addAsset('level1/worldBg.png');        var loader = new game.Loader();        loader.onComplete(this.loaded.bind(this));        loader.start();    },    loaded: function() {       // SETUP WORLD BG        var worldBg = new game.Sprite('level1/worldBg.png');        worldBg.anchor.set(0.5, 0.5);        worldBg.position.set(240, 160);        this.stage.addChild(worldBg);

PS. I'm still getting the animation issue since the update in this topic ...

 

http://www.html5gamedevs.com/topic/9831-few-n00b-gameanimation-questions/

[enpu]

You should preload your assets before changing the scene.

[Ninjadoodle]

Hi @enpu

 

Thank you! I understand how its works now.

 

One thing I've notice tho that it doesn't work the same as when setting a scene ...

 

fader.fadeOut(function() {

    //game.system.setScene('LevelWarmingUp');

    loader.start();

});

 

If I use setScene, the game transitions perfectly "killing" any current tweens etc in the process.

 

Using the loader, I get an error as it jumps to the loading screen, because a tween is still running

[enpu]

Hmm, not 100% sure what you are trying to do there, can you show some more of your code? thanks!

[Ninjadoodle]

Sure

 

Here is an example ...

 

I have a bunch of tween animations running. When I change scene using setScene, there are no errors. If I change scene by using the loader (loading the next scene), I get errors because the game is looking for the tweens lined up. (sorry about the formatting, it doesn't seem to paste correctly).

var hotDog = function() {         game.audio.playSound('audio/harpPass.m4a');         game.audio.playSound('audio/yay.m4a');         dog.hotDog = true;         game.scene.addTween(buttonPlay, {alpha:1}, 250, {delay:0}).start();buttonPlay.interactive = true;buttonPlay.buttonMode = true;game.tweenEngine.stopTweensForObject(boyEyebrow1);game.tweenEngine.stopTweensForObject(boyEyebrow2);game.tweenEngine.stopTweensForObject(boyEye1);game.tweenEngine.stopTweensForObject(boyEye2);game.tweenEngine.stopTweensForObject(boyEar1);game.tweenEngine.stopTweensForObject(boyEar2);game.tweenEngine.stopTweensForObject(boyMouth);game.tweenEngine.stopTweensForObject(boyMouth.scale);game.tweenEngine.stopTweensForObject(boyArm1);game.tweenEngine.stopTweensForObject(boyArm2);game.tweenEngine.stopTweensForObject(boyBody);boyArm2.visible = false;boyArm2b.visible = true;boyMouth.setTexture('levelPerplexingProblems/boyMouth2.png');game.scene.addTween(boyMouth.scale, {x:1, y:1}, 100, {delay:0, easing:'Quadratic.Out'}).start();       var boyBop = function() {        game.scene.addTween(boyEyebrow1, {x:-18*r, y:-43*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyEyebrow2, {x:26*r, y:-43*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyEye1, {x:-16*r, y:-34*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyEye2, {x:24*r, y:-34*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyEar1, {x:-32*r, y:-28*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyEar2, {x:30*r, y:-28*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyMouth, {x:4*r, y:-28*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyArm1, {x:0*r, y:-13*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyArm2b, {x:8*r, y:-13*r}, 125, {delay:0, easing:'Quadratic.In'}).start();        game.scene.addTween(boyBody, {x:0*r, y:-36*r}, 125, {delay:0, easing:'Quadratic.In', onComplete:boyBop2}).start();       }       var boyBop2 = function() {        game.scene.addTween(boyEyebrow1, {x:-18*r, y:-40*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyEyebrow2, {x:26*r, y:-40*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyEye1, {x:-16*r, y:-31*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyEye2, {x:24*r, y:-31*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyEar1, {x:-32*r, y:-29*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyEar2, {x:30*r, y:-29*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyMouth, {x:4*r, y:-25*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyArm1, {x:-20*r, y:-11*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyArm2b, {x:20*r, y:-11*r}, 125, {delay:0, easing:'Quadratic.Out'}).start();        game.scene.addTween(boyBody, {x:0*r, y:-35*r}, 125, {delay:0, easing:'Quadratic.Out', onComplete:boyBop}).start();       }       boyBop();        }        buttonPlay.click = buttonPlay.tap = function() {         game.audio.playSound('audio/clickPlay.m4a');         game.audio.playSound('audio/harpOk.m4a');            buttonPlay.scale.set(0.75, 0.75);            game.scene.addTween(buttonPlay.scale, {x:1, y:1}, 500, {delay:0, easing:'Elastic.Out'}).start();            buttonPlay.interactive = false;            buttonPlay.buttonMode = false;                        fader.fadeOut(function() {                //game.system.setScene('LevelWarmingUp');                loader.start();                     });        }    },