Skip to content Skip to sidebar Skip to footer

Phaser Preloading Not Working In Html5 Game

I would like to have nice preloader with percentage before game on, but nothing such appearing in spite of I am procceeding according to the Examples docs and api docs. It is simpl

Solution 1:

Your best bet is to actually refactor this so that you have a more than one State in your game. Typically game templates will include a Boot and some sort of Preload (or Preloader) state, as well as a menu (if needed) and the main game. Bold text should help with your search.

If you want to keep going down this path you can make a couple minor tweaks to your code. It will work, but it's not ideal. Again, take a look at States.

If you look at your code you'll notice that the functionality to actually hook up the loading text updates is at the bottom of your create. At this point the Phaser loader has already loaded the images.

If you look at the Load events example you'll see something kind of similar to what you have, but you'll notice that they're manually calling game.load.start().

Since you want the loading to start immediately, you need to get the load event binding done sooner.

Technically you can create whatever you want in the preload, but Phaser doesn't guarantee that you'll have any assets you're loading in. But this doesn't matter for a simple Phaser.Text object.

function preload() {
    text2 = game.add.text(32, 32, 'Loading...', { fill: '#ffffff' });
    game.load.onLoadStart.add(loadStart, this);
    game.load.onFileComplete.add(fileComplete, this);
    game.load.onLoadComplete.add(loadComplete, this);

    game.load.image('sky', 'assets/sky2.png');
    game.load.image('wheelbarrow', 'assets/jet.png');
    game.load.image('brick', 'assets/meteor.png');
    game.load.image('ground', 'assets/ground.png');
    game.load.audio('boden', ['assets/sound.wav']);
}

So basically we add the text object and then hook into the loader, before loading the assets.

In your create function you can remove those four lines we added to preload.

You'll want to tweak it further, but again, I'd highly recommend looking at Phaser's State functionality. :) The first volume of Interphase has a pretty good overview of the functionality as well.

Solution 2:

Solved, I did it this way:

<html><head><metacharset="UTF-8"><title>0001game</title><style>/* This only works with JavaScript, 
           if it's not present, don't show loader */.no-js#loader { display: none;  }
        .js#loader { display: block; position: absolute; left: 100px; top: 0; }
</style><scriptsrc="jquery-1.5.2.min.js"></script><scriptsrc="modernizr.min.js"></script><scriptsrc="phaser.min.js"></script><script>var game = newPhaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

var platforms;
var player; 
var cursors;
var tehla1;
var tehla2;
var tehla3;
var tehla4;
var tehla5;
var poc=0;
var text=null;
var style=null;
var delta = 25;
var postext = 150;
var rychlost=1;
var text2;
var trafil1=false;var trafil2=false;var trafil3=false;var trafil4=false;var trafil5=false;

functionpreload() {
    game.load.image('sky', 'assets/sky.png');
    game.load.image('wheelbarrow', 'assets/wheelbarrow.png');
    game.load.image('brick', 'assets/brick.png');
    game.load.image('ground', 'assets/ground.png');
    game.load.audio('boden', ['assets/sound.wav']);

}

functioncreate() {



    text2 = game.add.text(32, 32, 'Loading...', { fill: '#ffffff' });

    music = game.add.audio('boden');

    //music.play();
    sounds = [music];
    game.sound.setDecodedCallback(sounds, start, this);
    game.world.setBounds(0, 0, 800, 600);

    cursors = game.input.keyboard.createCursorKeys();

    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');
    //var tehla = game.add.sprite(3, 3, 'brick');
     tehla1 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick');
     tehla2 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick');
     tehla3 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick');
     tehla4 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick');
     tehla5 = game.add.sprite((Math.random() * 800), 0.2*game.world.randomY, 'brick');

    //game.add.sprite(0, 0, 'wheelbarrow');//  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;

    // Here we create the ground.var ground = platforms.create(0, game.world.height - 64, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)//ground.scale.setTo(2, 2);//  This stops it from falling away when you jump on it
    ground.body.immovable = true;

    //  Now let's create two ledges//var ledge = platforms.create(400, 400, 'ground');//ledge.body.immovable = true;//ledge = platforms.create(-150, 250, 'ground');//ledge.body.immovable = true;

    player = game.add.sprite(32, game.world.height - 120, 'wheelbarrow');
    //player.body.bounce.y = 0.2;//player.body.gravity.y = 300;//player.body.collideWorldBounds = true;
    style = { font: "25px Arial", fill: "#ff0044", align: "center" };

    text = game.add.text(125, 25, "Trafil roznych tehiel: ", style);
    text.anchor.set(0.5);

    game.load.onLoadStart.add(loadStart, this);
    game.load.onFileComplete.add(fileComplete, this);    
    game.load.onLoadComplete.add(loadComplete, this);       



}

functionstart() {

    music.loopFull(1.0);

}

functioncikoniec(){
    if(poc==5){
        alert('Uz si trafil/a vsetky tehly. Spustam hru znova!');
        location.reload();
    }
}

functionupdate() {

        //if(tehla1.y<game.height) game.add.tween(tehla1).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true);if(tehla1.y<game.height) tehla1.y+=rychlost;
        if(tehla1.y>=game.height) {tehla1.y=game.rnd.integerInRange(20, 200);tehla1.x=game.rnd.integerInRange(20, 500);}

        if(Math.abs(tehla1.y-player.y)<delta && Math.abs(tehla1.x-player.x)<delta && trafil1==false ){
            poc=poc+1;
            postext+=50;
            tehla1.destroy();
            text = game.add.text(postext, 35, "1", style);
            trafil1 = true;         
        }

        //if(tehla2.y<game.height) game.add.tween(tehla2).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true);if(tehla2.y<game.height) tehla2.y+=rychlost;
        if(tehla2.y>=game.height) {tehla2.y=game.rnd.integerInRange(20, 200);tehla2.x=game.rnd.integerInRange(20, 500);}

        if(Math.abs(tehla2.y-player.y)<delta && Math.abs(tehla2.x-player.x)<delta && trafil2==false ){
            poc=poc+1;
            postext+=50;
            tehla2.destroy();
            text = game.add.text(postext, 35, "2", style);
            trafil2 = true;         
        }

        //if(tehla3.y<game.height) game.add.tween(tehla3).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true);if(tehla3.y<game.height) tehla3.y+=rychlost;
        if(tehla3.y>=game.height) {tehla3.y=game.rnd.integerInRange(20, 200);tehla3.x=game.rnd.integerInRange(20, 500);}

        if(Math.abs(tehla3.y-player.y)<delta && Math.abs(tehla3.x-player.x)<delta && trafil3==false ){
            poc=poc+1;
            postext+=50;
            tehla3.destroy();
            text = game.add.text(postext, 35, "3", style);
            trafil3 = true;         
        }

        //if(tehla4.y<game.height) game.add.tween(tehla4).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true);if(tehla4.y<game.height) tehla4.y+=rychlost;
        if(tehla4.y>=game.height) {tehla4.y=game.rnd.integerInRange(20, 200);tehla4.x=game.rnd.integerInRange(20, 500);}

        if(Math.abs(tehla4.y-player.y)<delta && Math.abs(tehla4.x-player.x)<delta && trafil4==false ){
            poc=poc+1;
            postext+=50;
            tehla4.destroy();
            text = game.add.text(postext, 35, "4", style);
            trafil4 = true;         
        }

        //if(tehla5.y<game.height) game.add.tween(tehla5).to({ y: game.height*1.1 }, 1000, Phaser.Easing.Linear.None, true);if(tehla5.y<game.height) tehla5.y+=rychlost;
        if(tehla5.y>=game.height) {tehla5.y=game.rnd.integerInRange(20, 200);tehla5.x=game.rnd.integerInRange(20, 500);}

        if(Math.abs(tehla5.y-player.y)<delta && Math.abs(tehla5.x-player.x)<delta && trafil5==false ){
            poc=poc+1;
            postext+=50;
            tehla5.destroy();
            text = game.add.text(postext, 35, "5", style);
            trafil5 = true;         
        }

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        if(player.x>0) player.x -= 15;
        cikoniec();

    }
    elseif (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        if(player.x<660) player.x += 15;
        cikoniec();

    }


    game.physics.arcade.collide(player, platforms);    
}

functionrender() {

    game.debug.text('Hold left/right to move the player.');

}

</script><script>// Wait for window load
        $(window).load(function() {
            // Animate loader off screen
            $("#loader").animate({
                top: -200
            }, 1500);
        });
</script></head><body><imgsrc="assets/loader.gif"id="loader"><noscript>Sorry, your browser does not support JavaScript!</noscript></body></html>

Post a Comment for "Phaser Preloading Not Working In Html5 Game"