Phaser not executing properly

[ui20dev]

Hi, I have a problem getting my code to execute.

I want to run my code like this but it doesn't work. (the ideal code also used in examples etc.)

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render });

 

    preload: function() { 

 

        game.stage.backgroundColor = '#4f90cd';

        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);

        game.load.image('pipe', 'assets/pipe.png');

        //this.game.load.image('ground',  'assets/ground.png')

        //this.game.load.image('stars',  'assets/stars.png')

 

    }

 

    create: function() { 

 

        pipes = game.add.group();

        var pipe = pipes.create(130, -100, 'pipe');

        pipe = pipes.create(420, -150, 'pipe');

        var doubleflappy = game.add.sprite(60, 350, 'doubleflappy');

    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);

    doubleflappy.animations.play('flapping');

 

   doubleflappy.body.bounce.y = 0.7;

   doubleflappy.body.collideWorldBounds = true;

   doubleflappy.body.gravity.y = 900;

 

    }

 

    update: function() {

 

        if (game.input.activePointer.isDown){

        jump();

        }

 

    }

 

    function jump() {

    doubleflappy.body.velocity.y = -350;

    }

 

 

 

 

It works like this but not when I include the parts market with red.

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div');

 

var main_state = {

 

    preload: function() { 

 

        game.stage.backgroundColor = '#4f90cd';

        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);

        game.load.image('pipe', 'assets/pipe.png');

        //this.game.load.image('ground',  'assets/ground.png')

        //this.game.load.image('stars',  'assets/stars.png')

 

    },

 

    create: function() { 

 

        pipes = game.add.group();

        var pipe = pipes.create(130, -100, 'pipe');

        pipe = pipes.create(420, -150, 'pipe');

        var doubleflappy = game.add.sprite(60, 350, 'doubleflappy');

    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);

    doubleflappy.animations.play('flapping');

 

   doubleflappy.body.bounce.y = 0.7;

   doubleflappy.body.collideWorldBounds = true;

   doubleflappy.body.gravity.y = 900;

 

    },

 

    update: function() {

 

        if (game.input.activePointer.isDown){

        jump();

        }

 

    },

 

    function jump() {

    doubleflappy.body.velocity.y = -350;

    }

};

 

// Add and start the 'main' state to start the game

game.state.add('main', main_state);  

game.state.start('main');

 

 

I don't want to use the:

 

game.state.add('main', main_state);  

game.state.start('main');

 

but without it, nothing even runs...

I really need some help here. I am very new. Trying to learn by using bits and pieces I pick up in my own little learning project.

 

[ui20dev]

Btw. would be happy if someone could tell me to properly show code.

[XekeDeath]

It works like this but not when I include the parts market with red.

 

Your jump function doesn't work because you are adding it to a state object, but not calling it on the state object. Use this.jump() instead.

 

I don't want to use the:

 

game.state.add('main', main_state);  

game.state.start('main');

 

but without it, nothing even runs...

You want the game to run your state without adding the state to the game. This will not work. You do not need this part in the first (green) code you pasted because you are adding the state at the very top:

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render });

But in the blue code, you are creating a state object separately, and the lines you don't want to use are the ones that add it to the game.

[ui20dev]

 

Your jump function doesn't work because you are adding it to a state object, but not calling it on the state object. Use this.jump() instead.

 

You want the game to run your state without adding the state to the game. This will not work. You do not need this part in the first (green) code you pasted because you are adding the state at the very top:

 

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render });

But in the blue code, you are creating a state object separately, and the lines you don't want to use are the ones that add it to the game.

 

 

The odd thing though is that the green code, does not work, even I the out the red parts. But you think it should work?

 

 

Your jump function doesn't work because you are adding it to a state object, but not calling it on the state object. Use this.jump() instead.

 

You want the game to run your state without adding the state to the game. This will not work. You do not need this part in the first (green) code you pasted because you are adding the state at the very top:

 

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render });

But in the blue code, you are creating a state object separately, and the lines you don't want to use are the ones that add it to the game.

 

 

I would be happy if you could write how the jump part should be done. I can learn faster from comparing that with what I have done so far.

[XekeDeath]

update: function() {    if (game.input.activePointer.isDown)    {        this.jump();    }},jump: function(){    doubleflappy.body.velocity.y = -350;},

The clues as to why things do not work will be in the console. Always check there when you have problems.

[ui20dev]

update: function() {    if (game.input.activePointer.isDown)    {        this.jump();    }},jump: function(){    doubleflappy.body.velocity.y = -350;},

The clues as to why things do not work will be in the console. Always check there when you have problems.

 

 

Thanks for the reply. could you tell me the html code for displaying code in this forum? That would be great.

 

Btw. I implemented it but got this error: 

 

Uncaught ReferenceError: doubleflappy is not defined game.js:55

 

This is line 55:

 

"doubleflappy.body.velocity.y = -350;"

 

Any ideas? I thought I defined it. It worked for gravity etc. I don't get the logic.

 

Another thing that confused me greatly is the use of "this." in your code. How does it define what this is? This is a key concept no tutorials bother explaining. Why use it? What does it do? Anything that would demystify that would be great. I saw less milk us eit all over the place and it blew my mind.

[Heppell08]

Vat doubleflappy

Make it global for update to recognise it.

[Heppell08]

Var doubleflappy;

Make it global for update to recognise it.

// edit typo

[ui20dev]

Var doubleflappy;

Make it global for update to recognise it.

// edit typo

Could you be more specific please. I am a noob.

[Heppell08]

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render }); // Declare variables outside functions herevar doubleflappy; // declare bird here    preload: function() {          game.stage.backgroundColor = '#4f90cd';        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);        game.load.image('pipe', 'assets/pipe.png');        //this.game.load.image('ground',  'assets/ground.png')        //this.game.load.image('stars',  'assets/stars.png')     }     create: function() {          pipes = game.add.group();        var pipe = pipes.create(130, -100, 'pipe');        pipe = pipes.create(420, -150, 'pipe');    //doubleflappy is declared above so dont var in here.    doubleflappy = game.add.sprite(60, 350, 'doubleflappy');    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);    doubleflappy.animations.play('flapping');    doubleflappy.body.bounce.y = 0.7;   doubleflappy.body.collideWorldBounds = true;   doubleflappy.body.gravity.y = 900;     }     update: function() {         if (game.input.activePointer.isDown){        jump();        }     }     function jump() {    doubleflappy.body.velocity.y = -350;    }

Look at the comments in the posted code. Should help you out

[ui20dev]

So my guess is I have to make a var in both create and update? It would be nice if there was a pace that would explain this. Hard to understand if you are a noob. Seems to be no place where core principles are explained. I am also learning javascript atm. But I thought  a library or framework should simplify this. I am getting pretty frustrated since no tutorials explain the most important aspects of working with phaser.

[ui20dev]

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div', { preload: preload, create: create, update: update, render: render }); // Declare variables outside functions herevar doubleflappy; // declare bird here    preload: function() {          game.stage.backgroundColor = '#4f90cd';        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);        game.load.image('pipe', 'assets/pipe.png');        //this.game.load.image('ground',  'assets/ground.png')        //this.game.load.image('stars',  'assets/stars.png')     }     create: function() {          pipes = game.add.group();        var pipe = pipes.create(130, -100, 'pipe');        pipe = pipes.create(420, -150, 'pipe');    //doubleflappy is declared above so dont var in here.    doubleflappy = game.add.sprite(60, 350, 'doubleflappy');    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);    doubleflappy.animations.play('flapping');    doubleflappy.body.bounce.y = 0.7;   doubleflappy.body.collideWorldBounds = true;   doubleflappy.body.gravity.y = 900;     }     update: function() {         if (game.input.activePointer.isDown){        jump();        }     }     function jump() {    doubleflappy.body.velocity.y = -350;    }

Look at the comments in the posted code. Should help you out

 

 

I actually got one thing right I wrote the var in the right place but forgot to take it out of the create function... Let me see if this works.

[ui20dev]

I wish I knew how to display code like everyone else but I don't so here goes:

 

 

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div');

 

 

 

var main_state = {

 

var doubleflappy;   (I got this error in the console: Uncaught SyntaxError: Unexpected identifier )

 

    preload: function() { 

 

        game.stage.backgroundColor = '#4f90cd';

        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);

        game.load.image('pipe', 'assets/pipe.png');

        //this.game.load.image('ground',  'assets/ground.png')

        //this.game.load.image('stars',  'assets/stars.png')

 

    },

 

 

    create: function() { 

 

        pipes = game.add.group();

        var pipe = pipes.create(130, -100, 'pipe');

        pipe = pipes.create(420, -150, 'pipe');

 

        doubleflappy = game.add.sprite(60, 350, 'doubleflappy');

    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);

    doubleflappy.animations.play('flapping');

 

   // Add gravity to the bird to make it fall

   doubleflappy.body.bounce.y = 0.7;

   doubleflappy.body.collideWorldBounds = true;

   doubleflappy.body.gravity.y = 900;

 

    },

 

 

 

    update: function() {

        // Function called 60 times per second

 

        // If the bird is out of the world (too high or too low), call the 'restart_game' function

    //if (this.doubleflappy.inWorld == false)

        //this.restart_game();

//},

 

  //if (this.doubleflappy.inWorld == false)

        //this.restart_game();

        

        if (game.input.activePointer.isDown)

        {

        jump();

        }

 

    },

    

    jump: function() {

 

    doubleflappy.body.velocity.y = -350;

 

    },

[Heppell08]

Can you not post which line its referring to? Does it not say error on game.js line ?? 

[ui20dev]

this:" var doubleflappy; "

 

aka line 7

 

 

 

Edit, wrong image before. The error was with this code.

[ui20dev]

Full code: (could you show me the shortcode for displaying code in the forum?)

 

[Heppell08]

to post code in the forum, there is a small symbol that looks like this: <> 

Click that, copy and paste and done for forum posting code.

[Heppell08]

have like this:

var game = new Phaser.Game(480, 800, Phaser.AUTO, 'game_div');var doubleflappy; // it is global herevar main_state = {    preload: function() {         game.stage.backgroundColor = '#4f90cd';        game.load.spritesheet('doubleflappy', 'assets/characters.png', 54, 42);        game.load.image('pipe', 'assets/pipe.png');        //this.game.load.image('ground',  'assets/ground.png')        //this.game.load.image('stars',  'assets/stars.png')    },    create: function() {         pipes = game.add.group();        var pipe = pipes.create(130, -100, 'pipe');        pipe = pipes.create(420, -150, 'pipe');        doubleflappy = game.add.sprite(60, 350, 'doubleflappy');    doubleflappy.animations.add('flapping', [0, 1, 2, 1], 6, true);    doubleflappy.animations.play('flapping');   // Add gravity to the bird to make it fall   doubleflappy.body.bounce.y = 0.7;   doubleflappy.body.collideWorldBounds = true;   doubleflappy.body.gravity.y = 900;    },    update: function() {        // Function called 60 times per second        // If the bird is out of the world (too high or too low), call the 'restart_game' function    //if (this.doubleflappy.inWorld == false)        //this.restart_game();//},  //if (this.doubleflappy.inWorld == false)        //this.restart_game();                if (game.input.activePointer.isDown)        {        jump();        }    },        jump: function() {    doubleflappy.body.velocity.y = -350;    },

because its not global, its inside the main_state = {}

[ui20dev]

Yeah I tried that too bu then it ives me this:

 

[Heppell08]

Jump() will be:

doubleflappy.jump();

[ui20dev]

Arghhhh... that gave me this new shiny error...

 

[XekeDeath]

jump is actually defined on the main_state object, so this.jump().

[ui20dev]

Thanks. Btw could someone tell me how to insert code in the forum so it doesnt look so messy?

[ui20dev]

to post code in the forum, there is a small symbol that looks like this: <> 

Click that, copy and paste and done for forum posting code.

Oh I didint even notice this post, thanks man