Phaser preloading not working in HTML5 game

2019-09-10 04:54发布

站内问答 / Html5
1848 2 6

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 simple HTML5 game based on phaser framework JS library. This is my code. What might be wrong? I am not digging in phaser library I have no time to repair broken libs all the time. I am just awaiting the things working out of the box somehow: 

<html>
<head>
<meta charset="UTF-8">
<title>0002game</title>
 <script src="phaser.min.js"></script> 
<script>

var game = new Phaser.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;

function preload() {
    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']);
}

function loadStart() {
    text2.setText("Loading...");
}

function loadComplete() {

    text2.setText("Loading Completed.");

}


function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {

    text2.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);

}


function create() {
    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: "#00ffff", align: "center" };

    text = game.add.text(125, 25, "Lod zasiahli: ", style);
    text.anchor.set(0.5);


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


}

function start() {

    music.loopFull(1.0);

}

function cikoniec(){
    if(poc==5){
        alert('Uz ta zasiahlo 5 nepriatelov. Spustam hru znova!');
        location.reload();
    }
}

function update() {


        //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;
            tehla4.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();

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

    }


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

function render() {

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

}

</script>
</head>
<body>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>

2条回答
Rolldiameter
2楼-- · 2019-09-10 05:02

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.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-09-10 05:22

Solved, I did it this way:

<html>
<head>
<meta charset="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>
 <script src="jquery-1.5.2.min.js"></script>
 <script src="modernizr.min.js"></script>
 <script src="phaser.min.js"></script> 
<script>

var game = new Phaser.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;

function preload() {
    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']);

}

function create() {



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



}

function start() {

    music.loopFull(1.0);

}

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

function update() {

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

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

    }


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

function render() {

    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>
    <img src="assets/loader.gif" id="loader">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)