Example of asset loader with progress bar?

[Ninjadoodle]

Hi @enpu

I'm trying to preload an atlas before going to a certain level, and I think I have it working using the basic loader example.

I'm not however sure on how to display a loader bar or percentage as I do this.

Is there an example of this sort of thing somewhere?

Thank you!

[enpu]

@Ninjadoodle

There is percent property in Loader class. Use that to scale your progress bar.

onProgress function is called in Loader every time asset is loaded and percent value changed.

Does that sound clear or do you need full example?

[Ninjadoodle]

@enpu - That sound pretty straight forward  Just wondering tho - since I'm loading a single atlas file, will the percent property actually change, or is it based on per file loading?

[enpu]

@Ninjadoodle

Yes it is based on per file loading. Afaik, there is now way to get loading percentage of single file while it's loading in JavaScript. I might be wrong though, need to do some research.

In your case, if you are loading only one file, the percentage will be 0 at start, and then 100 when the file is loaded. So no really point showing loading bar there. Maybe just show spinning loader sprite or something?

[Ninjadoodle]

@enpu Cool, thanks for the advice, that's what I will do (it's a short load time)

I have one more question about loading. Even tho I've preloaded my atlas, when I enter my scene and start the level, there is a short pause before an object is 'created' and put on the stage. Is there something I can do to fix this?

[enpu]

Can you show what you are doing on your scene's init function?

[Ninjadoodle]

I have it setup so it always uses a stageSetup to do the basic stuff - I also have a bunch of classes in the same scene (above // MAIN CODE)

The pause only seems to happen when it's creating an anim with lots of frames / large images.

PS. init() calls the onBegin function (in setupStage())

// MAIN CODE
game.createScene('Stage02', {
    
    num: 0,
    done: 0,
    goal: 10,
    touched: false,
    
    init: function() {
        
        this.stageSetup = new game.StageSetup();
        this.stageSetup.setupStage();
        this.stageSetup.containers();
    },
    
    mouseup: function() {
        this.stageSetup.mouseUp();
    },
    
    update: function() {
        this.stageSetup.updateStage();
    },
    
    onBegin: function() {
        
        // SHUFFLE ARRAY
        this.order = [];
        for (var i=0; i<24; i++) {
            this.order.push(i);
        }
        
        this.shuffleArray = function(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
        }
        this.shuffleArray(this.order)
        
        // SETUP TIC-TAC-TOE
        this.s02TicTacToeGrid = new game.S02TicTacToeGrid();
        this.s02TicTacToeGrid.sprite.stop(this.order[this.num]);
        
        this.s02TicTacToeHitmap0 = new game.S02TicTacToeHitmap(92, 92, 0);
        this.s02TicTacToeHitmap1 = new game.S02TicTacToeHitmap(160, 92, 1);
        this.s02TicTacToeHitmap2 = new game.S02TicTacToeHitmap(228, 92, 2);
        
        this.s02TicTacToeHitmap3 = new game.S02TicTacToeHitmap(92, 160, 3);
        this.s02TicTacToeHitmap4 = new game.S02TicTacToeHitmap(160, 160, 4);
        this.s02TicTacToeHitmap5 = new game.S02TicTacToeHitmap(228, 160, 5);
        
        this.s02TicTacToeHitmap6 = new game.S02TicTacToeHitmap(92, 228, 6);
        this.s02TicTacToeHitmap7 = new game.S02TicTacToeHitmap(160, 228, 7);
        this.s02TicTacToeHitmap8 = new game.S02TicTacToeHitmap(228, 228, 8);
        
        game.scene.touched = false;
        this.num++;
    },
    
    passed: function(x, y) {
        
        this.done++;
        this.touched = true;
        game.audio.playSound('pop');
        
        this.s02TicTacToeCross = new game.S02TicTacToeCross(x, y);
        this.barGoalFill.sprite.width = this.barGoalFill.sprite.width + (320/game.scene.goal);
        
        if (this.done < this.goal) {
            
            game.Timer.add(250, function() {
                game.scene.s02TicTacToeCross.sprite.remove();
                game.scene.s02TicTacToeGrid.sprite.remove();
                game.scene.s02TicTacToeLine.sprite.remove();
                game.scene.onBegin();
            });
            
        } else {
            
            game.Timer.add(250, function() {
                game.Tween.add(game.scene.mg, {
                    alpha: 0
                }, 500, {
                    delay: 100,
                    easing: 'Linear.None',
                }).start();
            });
            
            this.stageSetup.stagePassed();
        }
    },
    
    failed: function(x, y) {
        
        this.touched = true;
        game.audio.playSound('buzzer');
        
        this.s02TicTacToeCross = new game.S02TicTacToeCross(x, y);
        
        game.Timer.add(250, function() {
            game.scene.s02TicTacToeCross.sprite.remove();
            game.scene.s02TicTacToeGrid.sprite.remove();
            game.scene.onBegin();
        });
    }
});

});

 

[enpu]

Well the the cause of the pause is probably the " creating an anim with lots of frames / large images".

Can you show the code where you do that?

[Ninjadoodle]

@enpu - Yeah I create a 24 frame anim when the mouse is clicked ...

game.createClass('S02TicTacToeGrid', {
    
    init: function() {
        
        this.sprite = game.Animation.fromTextures('s02TicTacToeGrid');
        
        this.sprite.position.set(160, 160);
        this.sprite.anchorCenter();
        this.sprite.scale.set(0.5);
        this.sprite.alpha = 0;
        this.sprite.addTo(game.scene.mg);
        
        game.Tween.add(this.sprite.scale, {
            x: 1,
            y: 1
        }, 350, {
            delay: 0,
            easing: 'Elastic.Out',
        }).start();
        
        game.Tween.add(this.sprite, {
            alpha: 1
        }, 100, {
            delay: 0,
            easing: 'Linear.None',
        }).start();
    }
});

 

[enpu]

So does the pause happen when you click mouse or when you enter the scene? A bit confusing now..

[Ninjadoodle]

@enpu Sorry for the confusion ...

I preaload the atlas before entering the scene ...

I enter the scene and I show a 'ready' sprite ...

you click to start the level ...

this is when the animation gets created / put on the screen (this is where the pause happens)

[enpu]

Can you test and verify it it's this line that causes the pause:

this.sprite = game.Animation.fromTextures('s02TicTacToeGrid');

 

[Ninjadoodle]

Hi @enpu

sorry I don’t understand what you want me to do - do you want me to remove the line or change it to something?

if you’re just asking whether that’s what I think is causing the pause then yes

[enpu]

Well for example comment everything inside that init function. Then uncomment line by line until you find out what line is causing the pause.

[Ninjadoodle]

@enpu I’ve tested this now, and from what I can tell - adding tje animation to the stage is what causes the small pause - almost like it has to be loaded into memory or something. In this case the animation has 24 large frames. If you need me to send you a sample, let me know.

[enpu]

That sounds strange. Would be great if you can send it to me, so i can take closer look.

[Ninjadoodle]

Just sent the file through. The one I’m getting the pause on is level 2.

sometimes the pause seems longer that others. It’s almost like it’s loading the file as it’s creating it ( even though the atlas is preloaded ).

Thank you for looking into it