Jump to content

Stuck on transition between preload to menu state


Falborian
 Share

Recommended Posts

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

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

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