Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Stuck on transition between preload to menu state

Falborian

By Falborian,
in Phaser 2

 Share

Recommended Posts

Falborian Newbie

Falborian

Posted
Posted

Trying to make smooth transition between the states (using Perplexing Technology tutorial), but it gets stuck at preload state:

Here is how it looks:

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Da Game</title>

    <script type="text/javascript" src="js/phaser.min.js"></script>
    <script type='text/javascript' src="js/boot.js"></script>
    <script type='text/javascript' src="js/load.js"></script>
    <script type='text/javascript' src="js/menu.js"></script>
    <script type='text/javascript' src="js/play.js"></script>
    <script type='text/javascript' src="js/game.js"></script>
</head>
<body>

</body>
</html>

game.js 
  

var game = new Phaser.Game(800, 600, Phaser.AUTO, '');

game.state.add('boot', bootState);
game.state.add('preload', preloadState);
game.state.add('menu', menuState);
game.state.add('play', playState);

game.state.start('boot');

boot.js 

var bootState = {
    create: function() {
        game.physics.startSystem(Phaser.Physics.ARCADE);

        game.state.start('preload');
    }
};

preload.js 

var preloadState = {

    preload: function() {

        var loadingLabel = game.add.text(80, 150, 'Loading...',
                                                {font: '30px Arial', fill: '#ffffff'});

        game.load.image('envelope', 'assets/sprites/envelope.png');
        game.load.image('title', 'assets/sprites/title.png');
        game.load.image('helpButton', 'assets/sprites/helpbutton.png');
        game.load.image('playButton', 'assets/sprites/playbutton.png');
        game.load.spritesheet('dog', 'assets/sprites/dogsprite.png', 32, 32);
        game.load.spritesheet('player', 'assets/sprites/postman.png', 23, 43);
    },
    create: function() {
        game.state.start('menu');
    }
};

menu.js 

var menuState = {

    create: function () {
        var nameLabel = game.add.text(80, 80, 'Lorem Ipsum game',
                                            {font: '50px Arial', fill: '#ffffff'});

        var startLabel = game.add.text(80, 80, 'Lorem Ipsum game',
                                                'press "W" key to start',
                                            {font: '25px Arial', fill: '#ffffff'});

        var wKey = game.input.keyboard.addKey(Phaser.Keyboard.W);

        wKey.onDown.addOnce(this.start, this);
    },

    start: function() {
        game.state.start('play');
    }
};

and play.js 

var playState = {

    create: function() {

    game.stage.backgroundColor = '#124184';
    player = game.add.sprite((Math.random() * 777), (Math.random() * 557), 'player');

    player.animations.add('left', [4, 5, 6, 7], 7, true);
    player.animations.add('right', [8, 9, 10, 11], 7, true);
    player.animations.add('up', [12, 13, 14, 15], 7, true);
    player.animations.add('down', [1, 2, 3], 7, true);

    game.physics.arcade.enable(player);

    for (var i = 0; i < 1;) {
        dog = game.add.sprite((Math.random() * 768), (Math.random() * 568), 'dog');
        if (player.x - 32 < dog.x && dog.x < player.x + 23) {
            dog.kill();
            i = 0;
        } else if (player.y - 32 < dog.y && dog.y < player.y + 43) {
            dog.kill();
            i = 0;
        } else {
            i++;
        }
    }

    dog.animations.add('left', [3, 4, 5], 7, true);
    dog.animations.add('right', [6, 7, 8], 7, true);
    dog.animations.add('up', [9, 10, 11], 7, true);
    dog.animations.add('down', [0, 1, 2], 7, true);

    game.physics.arcade.enable(dog);

    envelope = game.add.sprite(((Math.random() * 714) + 50), ((Math.random() * 523) + 50), 'envelope');

    envelope.scale.setTo(0.6, 0.6);

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

    player.body.collideWorldBounds = true;
},

update: function() {
}
};

I have no idea what is the problem and why the game window gets stuck at preload state (with simple "Loading..." text I've put, not reacting to anything). What is the problem?
Thanks for feedback in advance! :)

Link to comment
Share on other sites
spinnerbox Newbie

spinnerbox

Posted
Posted

Use Firebug or press F12 for errors and describe them here. Also it would be nice in preload state to monitor the loading progress and switch to menu state once all assets are loaded or if some error appears while loading print the error in console.

Especially the loading events. Also check the Loader class.

Here is how my Preloader state looks like. You could pick up some stuff for you: 

window.Artm.namespace('Preloader', window.Artm.Screen, (function(artm) {
    'use strict';
    var gameObject = null,
        thisObject = null;

    return {

        init: function() {
            thisObject = this;
            gameObject = artm.gameObject;

            artm.enableDebugMode();

            artm.artmPreloader = artm.createArtmPreloader();

            thisObject.initScreen();
            thisObject.createLogTextField();
        },

        preload: function() {

            artm.loadAudio('ERROR_SOUND', null, ['assets/audio/error.ogg', 'assets/audio/error.mp3']);
            artm.loadAudio('CLICK_SOUND', null, ['assets/audio/buttonClick.ogg', 'assets/audio/buttonClick.mp3']);
            artm.loadAudio('WAVE_COMPLETE_SOUND', null, ['assets/audio/waveComplete.ogg', 'assets/audio/waveComplete.mp3']);
            artm.loadAudio('GAME_COMPLETE_SOUND', null, ['assets/audio/gameComplete.ogg', 'assets/audio/gameComplete.mp3']);

            artm.loadSpriteSheet('GUIDE_BUTTONS_SHEET', null, 'assets/images/UI/guideButtonsSheet.png', 100, 40, 8);
            artm.loadSpriteSheet('SOCIAL_BUTTONS_SHEET', null, 'assets/images/UI/socialButtonsSheet.png', 152, 61.5, 4);
            artm.loadSpriteSheet('SMALLER_BUTTONS_SHEET', null, 'assets/images/UI/smallerButtonsSheet.png', 100, 25, 22);
            artm.loadSpriteSheet('STANDARD_BUTTONS_SHEET', null, 'assets/images/UI/standardButtonsSheet.png', 154, 39, 30);

            artm.loadAtlasJSONHash('OTHER_GUI_ASSETS_ATLAS', null, 'assets/images/UI/otherGuiAssetsSheet.png', 'assets/settings/otherGuiAssetsHash.json');

            thisObject.load.onFileError.add(function(error) {
                var artmObject = this;

                thisObject.logTextField.text += 'Error loading file: ' + error;
            }, artm);

            thisObject.load.onFileStart.add(function(param) {
                var artmObject = this;

                thisObject.logTextField.text += 'Loading files, percent: ' + param + '%';
            }, artm);

            thisObject.load.onFileComplete.add(function(progress, cacheKey, success, totalLoaded, totalFiles) {
                var artmObject = this;

                artmObject.artmPreloader.preloaderTop.clear();
                artmObject.artmPreloader.preloaderTop.beginFill(artm.Const.Graphics.DARK_GRAY_COLOR, 1);
                artmObject.artmPreloader.preloaderTop.drawRect(2, 2, progress, 11);
                artmObject.artmPreloader.ready = true;

                thisObject.logTextField.text += 'Finished loading file: ' + JSON.stringify(arguments);
            }, artm);

            thisObject.load.onLoadStart.add(function(param) {
                var artmObject = this;

                thisObject.logTextField.text += 'Started loading files: ' + param;
            }, artm);

            thisObject.load.onLoadComplete.add(function() {
                var artmObject = this;

                thisObject.logTextField.text += artmObject.GameMessages.FINISHED_LOADING_FILES_MSG;
            }, artm);

            thisObject.load.onPackComplete.add(function() {
                var artmObject = this;

                thisObject.logTextField.text = artmObject.GameMessages.FINISHED_PACKING_FILES_MSG;
            }, artm);
        },

        update: function() {
            if (artm.artmPreloader.ready === true) {
                artm.artmPreloader.loadingTween = gameObject.add.tween(artm.artmPreloader.loadingObjects).to({
                        alpha: 0
                    },
                    artm.Const.FADE_DURATION, artm.Const.TWEEN_LINEAR,
                    true);
                artm.artmPreloader.loadingTween.onComplete.add(function() {
                    var artmObject = this;

                    if (artmObject.debugMode()) {
                        artmObject.gameObject.state.start(artmObject.OptionsScreen.KEY);
                    } else {
                        artmObject.gameObject.state.start(artmObject.MainMenuScreen.KEY);
                    }

                    artmObject.gameObject.state.clearCurrentState();

                }, artm);
                artm.artmPreloader.ready = false;
            }
        },

        shutdown: function() {
            gameObject = null;
            thisObject.clearScreenState();
        }
    };
}(window.Artm)));

 

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

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