Changing States Issue

[Ninjadoodle]

Hi guys

 

I have a strange issue, and I'm not sure what's causing it.

I have 5 levels (each one in its own .js file - as they are separate mini-games)

Finishing level1 takes you to level2 and so on.

On the first play through everything works fine.

However, when I finish level5 and loop back to level1, and want to play through again - level1 will not change to level2, and instead just reloads itself.

There are no errors in the console, and I'm not using any level saving features.

Any ideas on what could be causing this?

Thank you in advance!

[LTNGames]

We may need to see some code in order to help you, otherwise we will be just guessing what the problem is. It sounds like there is a variable which determines when you can change to the next level, if there is one you may need to reset it before looping back to level one.

[Ninjadoodle]

Hi @LTNGames

 

Thank you for your reply. Basically I add a listener to a button which then takes you to a specific level. This works fine on the first go but not on the second play through.

 

Here are the functions I use to fade out and change to a specific scene. Even though I'm specifically changing to 'i06_l15', on the second play through it loads 'i06_l03'. This happens even if I try to go from level 5 to level 2 and then proceed. Basically, once the level has been played - if it is visited again, it won't go to the next level.

If it would help, I can put together a stripped down sample.

Thank you again!

fadeOut: function() {

        this.click.play();
        this.proceed.play();

        this.buttonPlay.inputEnabled = false;
        this.buttonPlay.events.onInputDown.remove(this.fadeOut, this);
        game.canvas.style.cursor = "default";

        this.buttonPlay.scale.set(0.9);
        this.add.tween(this.buttonPlay.scale).to( { x: 1, y: 1 }, 250, Phaser.Easing.Elastic.Out, true, 100);

        this.camera.fade('#000000', 1000);
    },



    fadeComplete: function() {

        this.state.start('i06_l15');
        this.game.stage.backgroundColor = '#000000';
    },

 

[DevJ]

Have you tried using "game" instead of "this" like so:

game.state.start('i06_l15');

This is what I am using to return to a previously loaded state, not sure if it makes any difference.

[Ninjadoodle]

Hi @DevJ

Just tried this, and still the same problem. I really have no idea.

Thanks for you help!

[DevJ]

2 hours ago, Ninjadoodle said:

Hi @DevJ

Just tried this, and still the same problem. I really have no idea.

Thanks for you help!

Are you resetting the level's variables on level finish? I mean, since you have completed the level before, it could simply be loading the state, checking if you have completed it, and jumping to the next state if so.  Too see if this is the problem jump to level 5 without completing level 1 and then go back and see if the problem persists.

[symof]

I've had the same issue with game states. The problem is the global variables. These are the variables that you declare outside of the inner state functions. Even if you reset the game state you will still have the same problem.

The fix for it is to use local variables where possible. I assume that you use some variables declared as constants and that is where the issues arises, because those variables do not reset depending on how you set them up. Any and all constants should be declared inside the local functions otherwise they will carry over in a weird way.

http://www.w3schools.com/js/js_scope.asp

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

Global variables are deleted when you close the page.

This is a very important feature of JavaScript. Use local variables where possible,as it will make your life much easier.

 

[Ninjadoodle]

@symof & @DevJ - Thank you for the reply. Just made sure that there are no globals, everything is a property of the state.

 

[symof]

16 hours ago, Ninjadoodle said:

@symof & @DevJ - Thank you for the reply. Just made sure that there are no globals, everything is a property of the state.

 

From my point of view, everything is clearly not a property of the state. I'd start looking into these two functions as they are the most likely culprits based on what I can guess off your code:

this.click.play();

this.proceed.play();

You also have an issue with the other function

fadeComplete: function() {

        this.state.start('i06_l15');
        this.game.stage.backgroundColor = '#000000';
    },

this.game.stage.backgroundColor is never set to #000000 as it is run after the game state change, if you want the background color to changed for the current state you need to change it before the state change.