Jump to content

Problem with game states Phaser


AramCP
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :P

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!

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