Problem with game states Phaser

[AramCP]

Hi, i have a problem creating a state in phaser. 

The only thing i want to do is just create a intro screen before the game starts. Nothing difficult right?, well, i spend 3 hours today trying to do this ****.

I will show you what i did:

This is the begining of my main js file, where all the code is. As you can see i created two states, one for the intro, and another for the whole game.

var juego = new Phaser.Game(512,400,Phaser.AUTO, 'ejemplo', { preload: preload, create: create, update: update });

juego.state.add('menu', menuState);
juego.state.add('partida', partidaState);

juego.state.start('menu');

Okay, lets take a look to the menu state:

var menuState = function(juego){}
	var intro;
	var cursors;

boot.prototype = {
	preload: function(){
		juego.load.sprite('menuImage', 'assets/intro.gif');
	}

	create: function(){
		intro = juego.add.sprite('menuImage');
		juego.physics.startSystem(Phaser.Physics.ARCADE);
		juego.physics.arcade.enable(intro);
		cursors = juego.input.keyboard.createCursorKeys();
	}

	update: function(){
		if (cursors.up.isDown){
			juego.state.start('partida');
	}
}
}

I dont know if this is correct or not, because there is one thing i never understood, why sometimes you have to put for example "function preload(){}" and other time "preload: function(){}", like where is the difference? Well ofcourse there is a diference because if i type "function preload(){}" it doesnt work. Oh wait, but my code doesnt work anyway :D.

Okay after this lets take a look to the game state: 

var partidaState = function(juego){}

var map;
var layer;
var jugador;
var cursors;

partidaState.prototype ={

preload: function() { 
    juego.load.tilemap('pokemon', 'maperino.csv', null, Phaser.Tilemap.TILED_JSON);
    juego.load.image('tiles', 'tileset.png');
    juego.load.spritesheet('red', 'spritesh.png', 32, 64);

}

create: function() {

After the create function there is all my code, but thats not important right now.

Now i will show you what console says to me i did wrong:

http://prntscr.com/d9yh7x

It says me create function if wrong, but wtf its the same  than the preload one...

Guys i dont understand this, i've seen a lot of tutorials and nothing works in my code, please tell me where i did it wrong if you know...

[icbat]

Your partidaState.prototype ={...} syntax is creating what's called an Object in javascript. There's some documentation here that might help you understand more about them. 

Specifically, you use preload: function() {... (with the colon) because you're defining a property on an object called "preload" with the value "function() {..." The reason you need to do this is to define the state as a whole in one object so you can pass it around. Instead of having two functions called "preload" floating about, you'll instead have a state "menu" that has a preload, update, create, etc. and another state "partida" that has the same property names but different implementations.

To the red in your editor, it looks like you don't have a comma after the preload function, so the javascript interpreter doesn't know that you're finished and is confused by seeing "create: function(){...}"

That may not fix everything here, as it's hard to see everything in context, but hopefully that gets you moving forward again.

 

As an aside, where you have var juego = new Phaser.Game(512,400,Phaser.AUTO, 'ejemplo', { preload: preload, create: create, update: update });, you can remove the last argument (the state object), if you're going to manually move to a state with juego.state.start('menu');  That object can be the initial state to start at, but it looks like you want to start at menu, making that redundant.

 

[nazimboudeffa]

states are essential to have a game working fine and it structures it,

you can try something like this http://asciimulation.link/matrix/

let more time i'll try to do a snippet of it because i have a little bug in the intro

 

[AramCP]

1 hour ago, icbat said:

Your partidaState.prototype ={...} syntax is creating what's called an Object in javascript. There's some documentation here that might help you understand more about them. 

Specifically, you use preload: function() {... (with the colon) because you're defining a property on an object called "preload" with the value "function() {..." The reason you need to do this is to define the state as a whole in one object so you can pass it around. Instead of having two functions called "preload" floating about, you'll instead have a state "menu" that has a preload, update, create, etc. and another state "partida" that has the same property names but different implementations.

To the red in your editor, it looks like you don't have a comma after the preload function, so the javascript interpreter doesn't know that you're finished and is confused by seeing "create: function(){...}"

That may not fix everything here, as it's hard to see everything in context, but hopefully that gets you moving forward again.

 

As an aside, where you have var juego = new Phaser.Game(512,400,Phaser.AUTO, 'ejemplo', { preload: preload, create: create, update: update });, you can remove the last argument (the state object), if you're going to manually move to a state with juego.state.start('menu');  That object can be the initial state to start at, but it looks like you want to start at menu, making that redundant.

 

Thanks man now i understand it better, i will try to do all the things you said to me, then i will pray to God 5 times, and hopefully, it will work. And thanks to people like you who is disposed to help others is why im progressing in my game, rly thanks. 

PD: You can check my game here: http://aramenlared.com/pokemonjs/

[LuizOtavio]

Hi @AramCP

i started with Phaser last week, and, i just cant find a way to change the state in the docs.

so, after open phaser.js and read some code, i found what i was looking for

var game_state = this.instance.state;
game_state.add('menu_screen',{
   preload: menu_screen_preload,
   create : menu_screen_create,
   update: menu_screen_update
});

game_state.start('menu_screen');

and that's the way i change states in my game. Hope help you

 

cheers

[AramCP]

1 hour ago, LuizOtavio said:

Hi @AramCP

i started with Phaser last week, and, i just cant find a way to change the state in the docs.

so, after open phaser.js and read some code, i found what i was looking for

var game_state = this.instance.state;
game_state.add('menu_screen',{
   preload: menu_screen_preload,
   create : menu_screen_create,
   update: menu_screen_update
});

game_state.start('menu_screen');

and that's the way i change states in my game. Hope help you

 

cheers

Looks pretty nice and also a different form for making states, i will try it

But i already solved my problem, i created five diferent states, each one doing different things, and i will create more in the future haha. Btw thanks for sharing that!