Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Phaser not executing properly


ui20dev
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
 
    },
Link to comment
Share on other sites

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 = {}

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...