State switch does not complete, jumps back

[mlaibow]

I am seeing strange behavior trying to switch states.

I have a state called Game in a file called game.js.

This state loads and runs correctly. It is preceded by a boot state and a preload state. Switching from Boot to Preload to Game works fine.

 

Once I user does something, I call game.state.start("MainUI"); within the Game states update function.

The MainUI state starts, the preload function executes correctly, the create function executes correctly. The shutdown function in the Game state also works correctly. 

However, after completing the create function in "MainUI" it does not move on to the update function, it jumps back to the create function of the "Game" state. 

 

So it never really switches to the new state, it starts to, runs the preload and create from the new state, and then current state gets back to Game and it runs the Game state from the beginning in its entirety.

 

I have no idea why this is happening. Any thoughts would be appreciated. What can cause a simple state switch to not complete and jump back to the calling state?

 

Thanks. Some code below.

 

Setup:

var game = new Phaser.Game(1920, 1080, Phaser.CANVAS, 'game_div');game.state.add('Boot', Boot);game.state.add('Preload', Preload);game.state.add('Game', Game);game.state.add('MainUI', MainUI);game.state.start('Boot');

Call in game.js:

game.state.start("MainUI");

Everything works up to that point, MainUI loads and runs its preload followed by create.

MainUI is currently very simple, I am just trying to get the state transition working. It never gets to console_in or update. It immediate switches state back to Game and runs it from its top after completing the MainUI create function.

define([    'phaser'], function (Phaser) {'use strict';    function MainUI(game) {gameC = game;        console.log('MainUI Constructor');    }var gameC;var consoleSnakes;var consoleGroup;var console_tween;var kbBase, kbPlate, dispBase, facePlate;var loaded_flag;MainUI.prototype = {            constructor: MainUI,                        start: function(game) {            },            preload: function(){             loaded_flag = 0;             consoleGroup = this.add.group();             consoleSnakes = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loading_snakes', 5);             consoleSnakes.scale.set(1);             consoleSnakes.smoothed = false;             consoleSnakes.anchor.setTo(0.5, 0.5);             consoleSnakes.alpha = 1;             var anim = consoleSnakes.animations.add('slither');                anim.play(10, true);             anim.setFrame(this.game.snakes_frame, true);                             this.game.load.image('console_base', 'assets/console/MainUI_Base.png');                this.game.load.image('console_display', 'assets/console/MainUI_Display.png');                this.game.load.image('console_faceplate', 'assets/console/MainUI_Faceplate.png');                this.game.load.image('console_keyplate', 'assets/console/MainUI_KeyboardPlate.png');                this.game.load.image('console_energy_disc', 'assets/console/MainUI_EnergyDisc.png');                this.game.load.image('console_energy_shutter', 'assets/console/MainUI_EnergyShutter.png');                this.game.load.image('console_energy_shadow', 'assets/console/MainUI_EnergyShadow.png');                            console.log("preloaded");            },            create: function(){                kbBase = consoleGroup.create(this.game.world.centerX, this.game.world.centerY, 'console_base');                kbBase.anchor.setTo(0.5, 0.5);                //keys, key selection button, lights                kbPlate = consoleGroup.create(this.game.world.centerX, this.game.world.centerY, 'console_keyplate');                kbPlate.anchor.setTo(0.5, 0.5);                dispBase = consoleGroup.create(this.game.world.centerX, this.game.world.centerY, 'console_display');                dispBase.anchor.setTo(0.5, 0.5);                //energy disc, shutter, shadow                //display components                facePlate = consoleGroup.create(this.game.world.centerX, this.game.world.centerY, 'console_faceplate');                facePlate.anchor.setTo(0.5, 0.5);                //buttons                                consoleGroup.alpha = 1;                this.game.add.tween(consoleSnakes).to( { alpha: 0 }, 750, Phaser.Easing.Exponential.Out, true, 10);                console_tween = this.game.add.tween(consoleGroup).to( { alpha: 1 }, 1000, Phaser.Easing.Exponential.In, true);                console_tween.onComplete.add(MainUI.prototype.console_in, this);                console.log("created");                                            },            console_in: function() {             loaded_flag = 1;                console.log("console_in");                         },                        update: function() {             if(loaded_flag == 1) {             console.log("loaded");             loaded_flag = 2;             }            },                        shutdown: function() {                         }    };    return MainUI;});

 

 

 

 

[mlaibow]

Since this was my first post, it needed to be cleared by the moderator.

In that time, I fixed my problem.

 

What happened was that in a previous state I used the Loader with an onComplete event, with the following call:

           

this.game.load.onLoadComplete.add(Preload.prototype.preloaded, this);

this adds a signal that does not automatically go away when you start another state, even if you use the preload function in that new state, it still uses the same instance of Loader and that signal fires and calls the function.

took a while to figure it out, but then it was an easy fix with in the new state:     

this.game.load.onLoadComplete.removeAll();