Switch back to the state before

[Jonniboy]

Hello,

a few days ago I started a small game project with Phaser for a task at our school.

Everything works fine without any understanding problems, but what's the thing with the states? I think they are very useful for my case to create a menu and so on, but I can't get them to work nicely.

Here is my code, a bit shortened:

	var ASSET_PATH = 'assets/game/';

	var bootState = function(game) {};
	
	bootState.prototype = {
	
		preload: function() {
		
		    this.load.image('logo', ASSET_PATH + 'phaser.png');
		    this.load.image('spaceship_1', ASSET_PATH + 'spaceship_1.png');
		    this.load.image('starfield', ASSET_PATH + 'starfield.png');
			
		},
		
		create: function() {
		
                    this.state.start('menu');
			
		}
	}
	
	var menuState = function(game) {
	    this.nameLabel;
	    this.startLabel;
	    this.wkey;
	};
	
	menuState.prototype = {
  
		create: function () {
			
			this.nameLabel = this.add.text(80, 80, 'SpaceFight', { font: '50px Arial', fill: '#ffffff' });
			
			this.startLabel = this.add.text(80, this.world.height-80, 'press the "W" key to start', {font: '25px Arial', fill: '#ffffff' });
			
			this.wkey = this.input.keyboard.addKey(Phaser.Keyboard.W);
			
			this.wkey.onDown.addOnce(this.start, this);
		},
		
		start: function() {
		
			this.state.start('play');
			
		}
		
	};
	
	var playState = function(game) {
		this.starfield;
		this.spaceship;
		this.esckey;
	};

	playState.prototype = {
		
		create: function() {
		
			this.starfield = this.add.tileSprite(0, 0, 800, 600, 'starfield');

			this.spaceship = this.add.sprite(this.world.centerX, this.world.centerY, 'spaceship_1');
			this.spaceship.anchor.setTo(0.5, 0.5);
			this.spaceship.scale.setTo(0.1, 0.1);
			this.spaceship.rotation = -67.5;
			//this.spaceship.rotation = 0.5;
			this.physics.arcade.enable(this.spaceship);
			
			this.esckey = game.input.keyboard.addKey(Phaser.Keyboard.X);
			this.esckey.onDown.addOnce(this.stop, this);
			
		},
		
		update: function() {
		
			if (this.physics.arcade.distanceToPointer(this.spaceship, this.input.activePointer) > 10)
			{
				this.physics.arcade.moveToPointer(this.spaceship, 600);
			}
			else
			{
				this.spaceship.body.velocity.set(0);
			}
			
		},
		
		stop: function() {
		
			this.state.start('menu');
		
		}
		
	};
	
	var game = new Phaser.Game(800, 600, Phaser.AUTO, '');
	game.state.add('boot', bootState, true);
	game.state.add('menu', menuState);
	game.state.add('play', playState);

The code works at the first try: At first it loads the required game data, then it calls the menu and if I press w, I can play the (at this point) minimalistic game. But if I press x to get back to the menu, the menu appears to be there (because I can press w to play again), but there is a black screen.

I read something about a function to switch from state to state at a very clean way, but I don't get it working. Do you have any idea?

Thanks in advance.

Regards, Jonniboy

[Zeterain]

I actually tried your code out and it works fine for me. I'm able to load the menu, switch to the game, and switch back. I see the text on the menu every time. I'm using Phaser 2.4.6.

Are you getting any console errors?

[Jonniboy]

Obviously I had Phaser 2.4.5 in which such a bug occurs.

The bug is fixed in the new version, so downloading the new version fixed my problem. I haven't noticed that there was a new version somehow. Big fail from me, sorry for this.

I think it's connected with this bug: https://github.com/photonstorm/phaser/issues/1310

Regards, Jonniboy