Phaser 预加载在 HTML5 游戏中不起作用

【问题标题】：Phaser preloading not working in HTML5 gamePhaser 预加载在 HTML5 游戏中不起作用
【发布时间】：2016-03-15 03:24:56
【问题描述】：

我想在游戏开始前有一个很好的带有百分比的预加载器，但是尽管我正在根据示例文档和 api 文档进行操作，但没有出现这样的情况。它是基于 Phaser 框架 JS 库的简单 HTML5 游戏。这是我的代码。可能有什么问题？我没有在 Phaser 库中挖掘我一直没有时间修复损坏的库。我只是在等待开箱即用的东西：

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

【问题讨论】：

    标签： html phaser-framework


    【解决方案1】：

    最好的办法是实际重构它，以便在游戏中拥有多个State。通常，游戏模板将包含 Boot 和 某种Preload（或Preloader）状态，以及菜单（如果需要）和主游戏。粗体文本应该有助于您的搜索。

    如果您想继续走这条路，您可以对您的代码进行一些小的调整。它会起作用，但并不理想。再次，看看States。

    如果您查看您的代码，您会注意到实际连接加载文本更新的功能位于您创建的底部。此时 Phaser 加载器已经加载了图像。

    如果您查看Load events 示例，您会看到与您所拥有的类似的东西，但您会注意到他们手动调用game.load.start()。

    由于您希望立即开始加载，因此您需要尽快完成加载事件绑定。

    从技术上讲，您可以在 preload 中创建您想要的任何内容，但 Phaser 不保证您将拥有正在加载的任何资产。但这对于简单的 Phaser.Text 对象无关紧要。 

    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']);
}

    所以基本上我们在加载资产之前添加文本对象，然后挂钩到加载器。

    在您的create 函数中，您可以删除我们添加到preload 的那四行。

    您需要进一步调整它，但我再次强烈建议您查看Phaser's State functionality。 :) Interphase 的第一卷也很好地概述了功能。

    【讨论】：

    • 感谢您的提示。我只是想通过在 loadComplete() 上构建其余构造函数然后通过 update() 继续来绕过这个东西；不工作：函数 loadComplete() { text.setText(""); //toto je neustaly refresh, takze tu nemozem vybudovat pociatocna(); //nefunguje ani hotovo=true;如果（hotovo==true）pociatocna（）； //ani ked tu dam break; nezastavi 到 sluckovanie 的 ponechanim pociatocna(); kde pociatocna je konstruktor hry //a dalej by kontrolu jednoducho prebral update(); ficala //pouzit 州的 hra... :-( }
    【解决方案2】：

    解决了，我是这样做的：

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

    【讨论】：

    • 为了让其他人可以从您的问题和答案中受益，您可能只想在此答案中添加相关的添加/更改，和/或附上关于您更改的内容和原因的注释。 loader.gif 是什么样的？它现在实际上只是一个进度条吗？
    • 我没有看到标记为已接受按钮阅读此stackoverflow.com/help/accepted-answer
    猜你喜欢
    • 2015-04-17
    • 2019-11-04
    • 1970-01-01
    • 2020-03-13
    • 1970-01-01
    • 2021-09-28
    • 1970-01-01
    • 2018-11-30
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode