Jump to content

Example of asset loader with progress bar?


Ninjadoodle
 Share

Recommended Posts

@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?

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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

});

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...