Santiago

Sprite vs Group Collision doesn't work Phaser

Recommended Posts

Hello, I've got this code: 

create: function () {

        this.cursor = game.input.keyboard.createCursorKeys();
        this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);
        game.world.setBounds(0, 0, 1920, 0);


        //Fisicas
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.height = 1000;
        //fondo
        game.stage.backgroundColor = "#00FFFF";


        //codigo de plataformas        
                    
        this.platforms = game.add.group();
                
        this.platforms = game.add.sprite(0, 553, 'plataforma');
        this.platforms = game.add.sprite(-400,300, 'plataforma');
        
        game.physics.arcade.enable(this.platforms);
        this.platforms.body.immovable = true;
        
    //    this.platforms = game.add.sprite(700,300, 'plataforma');
        
       // this.platforms = game.add.physicsGroup();
        
        


        //tipo
        this.player = game.add.sprite(125, 100, 'tipito');
        this.player.anchor.setTo(0.5, 1);
        game.camera.follow('tipito');


        game.physics.arcade.enable(this.player);
        this.player.body.gravity.y = 800;
        //this.player.body.collideWorldBounds = true; (PRODUCE BUG CON game.world.setbounds)


        //animaciones    
        this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true);

        //this.player.animations.play('correr', 10, true);

//game.physics.arcade.collide(this.player, this.platforms);
    },



    update: function () {

        //this.walkVelocityR = this.player.body.velocity.x = 200
        //this.walkVelocityL = this.player.body.velocity.x = -200
        //this.jumpVelocity = this.player.body.velocity.y = -400

        game.physics.arcade.collide(this.player, this.platforms);
       
        //this.platforms.body.checkCollision.down = false;
        game.camera.follow(this.player);

                
        if (!this.player.inWorld) {
            this.playerDie();
        }
        
        
                
        if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.x = 200;
            this.player.body.velocity.x = -200;
            this.player.body.velocity.y = -700;

        } 
        
        else if (this.cursor.right.isDown && this.cursor.left.isUp) {
            //this.cursor.left.enabled = false;
            this.player.body.velocity.x = 200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = 1;
            
            this.a = 2;
            //console.log("este es a = " + a);
            
        } 
              
        else if (this.cursor.left.isDown && this.cursor.right.isUp) {
            //this.cursor.right.enabled = false;
            this.player.body.velocity.x = -200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = -1;
            
             
        } 
        
       
        
        else if (this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.y = -700;
        }
        
        else {
            this.player.body.velocity.x = 0;
            this.player.animations.stop();
            this.player.frame = 4;
        }
        
                
        /*/if(this.cursor.right.justUp){
            this.cursor.left.reset();
        }
        
        if(this.cursor.left.justUp){
            this.cursor.right.reset();
            
            
        }/*/

        //var style = { font: "65px Arial", fill: "#ff0044", align: "center" };
        //this.text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"})

        //this.text.anchor.set(0.5);
    },
    
    render: function (){
      //game.debug.inputInfo(32,32);
      game.debug.key(this.cursor.right, 50,50)    
    },

    playerDie: function () {
        
        this.player.kill();
        this.start()
        //game.time.events.add(1000, this.start, this)
        
    },
    
    start: function (){
        game.state.start('play');
    }

 

as you can see, I created a group which has two platforms sprites, the problem is when the collision between the player and the group occurs, just apply to the last one I created, the rest the player just avoid them. I don't know what is my mistake, please tell me if this is ridiculous or I'm an idiot.

Share this post


Link to post
Share on other sites


The main problem is that you are overriding your this.platforms object by saying:

  this.platforms = game.add.group();            // first im a group object
  this.platforms = game.add.sprite(0, 553, 'plataforma'); //but now im a sprite object
  this.platforms = game.add.sprite(-400,300, 'plataforma');//then im the again a sprite object but somewhere off screen
  game.physics.arcade.enable(this.platforms); //you are enabling only one sprite for arcade physics
  this.platforms.body.immovable = true;

The second problem is, that you are never adding any platforms to your groups using group.add or group.addMultiple. To fix this, you do the following:

this.platforms = game.add.physicsGroup(); //this was correct in your code
                
this.platform1 = game.add.sprite(0, 553, 'plataforma');// platform left
this.platform2 = game.add.sprite(400,400, 'plataforma');//platform right
this.platform3 = game.add.sprite(200,400, 'plataforma');//platform in the middle
                
this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]); //add all platform to the platforms group
this.platforms.setAll('body.immovable',true); //make them all immovable 
this.platforms.setAll('scale.x',4); //scale their x (I dont have your sprite so you might not need to do this)

the group.setAll() method allows you to set some properties for all objects in your group, so it makes everything more convenient.

Working code:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render ,start :start});

var player;
var enemy;
var spaceBar;

function preload() {
     game.load.baseURL = '//examples.phaser.io/';
    game.load.crossOrigin = 'anonymous';
    //game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_color_40x60.png', 40, 60);
    game.load.image('dude', 'assets/sprites/phaser-dude.png');
}

function create() {

        this.cursor = game.input.keyboard.createCursorKeys();
        this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);
        game.world.setBounds(0, 0, 1920, 0);


        //Fisicas
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.height = 1000;
        //fondo
        game.stage.backgroundColor = "#00FFFF";


        //codigo de plataformas        
                    
        this.platforms = game.add.physicsGroup();
                
        this.platform1 = game.add.sprite(0, 553, 'plataforma');
        this.platform2 = game.add.sprite(400,300, 'plataforma');
        this.platform3 = game.add.sprite(200,400, 'plataforma');
                

        this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]);

        this.platforms.setAll('body.immovable',true);
        this.platforms.setAll('scale.x',4);

    
        //tipo
        this.player = game.add.sprite(125, 100, 'dude');
        this.player.anchor.setTo(0.5, 1);
        game.camera.follow('tipito');


        game.physics.arcade.enable(this.player);
        this.player.body.gravity.y = 800;
        //player.body.collideWorldBounds = true; (PRODUCE BUG CON game.world.setbounds)


        //animaciones    
        this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true);

        //player.animations.play('correr', 10, true);

//game.physics.arcade.collide(player, platforms);
}

function update() {
  
        //walkVelocityR = player.body.velocity.x = 200
        //walkVelocityL = player.body.velocity.x = -200
        //jumpVelocity = player.body.velocity.y = -400

        game.physics.arcade.collide(this.player, this.platforms);
       
        //platforms.body.checkCollision.down = false;
        game.camera.follow(this.player);

                
        if (!this.player.inWorld) {
            playerDie();
        }
        
        
                
        if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.x = 200;
            this.player.body.velocity.x = -200;
            this.player.body.velocity.y = -700;

        } 
        
        else if (this.cursor.right.isDown && this.cursor.left.isUp) {
            //cursor.left.enabled = false;
            this.player.body.velocity.x = 200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = 1;
            
            a = 2;
            //console.log("este es a = " + a);
            
        } 
              
        else if (this.cursor.left.isDown && this.cursor.right.isUp) {
            //cursor.right.enabled = false;
            this.player.body.velocity.x = -200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = -1;
            
             
        } 
        
       
        
        else if (this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.y = -700;
        }
        
        else {
            this.player.body.velocity.x = 0;
            this.player.animations.stop();
            this.player.frame = 4;
        }
        
                
        /*/if(cursor.right.justUp){
            cursor.left.reset();
        }
        
        if(cursor.left.justUp){
            cursor.right.reset();
            
            
        }/*/

        //var style = { font: "65px Arial", fill: "#ff0044", align: "center" };
        //text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"})

        //text.anchor.set(0.5);
}

function render() {
      //game.debug.inputInfo(32,32);
      game.debug.key(this.cursor.right, 50,50)    
      this.platforms.forEach(function(platform){game.debug.body(platform)});
}

function playerDie(){
        this.player.kill();
        start()
        //game.time.events.add(1000, start, this)
  
        
}

function start(){
          game.state.start('play');

}

Also im not sure that your start() function will work (missing 'play' state in your code?), but you will have to check that yourself.

Share this post


Link to post
Share on other sites
8 hours ago, samid737 said:


The main problem is that you are overriding your this.platforms object by saying:


  this.platforms = game.add.group();            // first im a group object
  this.platforms = game.add.sprite(0, 553, 'plataforma'); //but now im a sprite object
  this.platforms = game.add.sprite(-400,300, 'plataforma');//then im the again a sprite object but somewhere off screen
  game.physics.arcade.enable(this.platforms); //you are enabling only one sprite for arcade physics
  this.platforms.body.immovable = true;

The second problem is, that you are never adding any platforms to your groups using group.add or group.addMultiple. To fix this, you do the following:


this.platforms = game.add.physicsGroup(); //this was correct in your code
                
this.platform1 = game.add.sprite(0, 553, 'plataforma');// platform left
this.platform2 = game.add.sprite(400,400, 'plataforma');//platform right
this.platform3 = game.add.sprite(200,400, 'plataforma');//platform in the middle
                
this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]); //add all platform to the platforms group
this.platforms.setAll('body.immovable',true); //make them all immovable 
this.platforms.setAll('scale.x',4); //scale their x (I dont have your sprite so you might not need to do this)

the group.setAll() method allows you to set some properties for all objects in your group, so it makes everything more convenient.

Working code:


var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render ,start :start});

var player;
var enemy;
var spaceBar;

function preload() {
     game.load.baseURL = '//examples.phaser.io/';
    game.load.crossOrigin = 'anonymous';
    //game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_color_40x60.png', 40, 60);
    game.load.image('dude', 'assets/sprites/phaser-dude.png');
}

function create() {

        this.cursor = game.input.keyboard.createCursorKeys();
        this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);
        game.world.setBounds(0, 0, 1920, 0);


        //Fisicas
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.height = 1000;
        //fondo
        game.stage.backgroundColor = "#00FFFF";


        //codigo de plataformas        
                    
        this.platforms = game.add.physicsGroup();
                
        this.platform1 = game.add.sprite(0, 553, 'plataforma');
        this.platform2 = game.add.sprite(400,300, 'plataforma');
        this.platform3 = game.add.sprite(200,400, 'plataforma');
                

        this.platforms.addMultiple([this.platform1,this.platform2,this.platform3]);

        this.platforms.setAll('body.immovable',true);
        this.platforms.setAll('scale.x',4);

    
        //tipo
        this.player = game.add.sprite(125, 100, 'dude');
        this.player.anchor.setTo(0.5, 1);
        game.camera.follow('tipito');


        game.physics.arcade.enable(this.player);
        this.player.body.gravity.y = 800;
        //player.body.collideWorldBounds = true; (PRODUCE BUG CON game.world.setbounds)


        //animaciones    
        this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true);

        //player.animations.play('correr', 10, true);

//game.physics.arcade.collide(player, platforms);
}

function update() {
  
        //walkVelocityR = player.body.velocity.x = 200
        //walkVelocityL = player.body.velocity.x = -200
        //jumpVelocity = player.body.velocity.y = -400

        game.physics.arcade.collide(this.player, this.platforms);
       
        //platforms.body.checkCollision.down = false;
        game.camera.follow(this.player);

                
        if (!this.player.inWorld) {
            playerDie();
        }
        
        
                
        if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.x = 200;
            this.player.body.velocity.x = -200;
            this.player.body.velocity.y = -700;

        } 
        
        else if (this.cursor.right.isDown && this.cursor.left.isUp) {
            //cursor.left.enabled = false;
            this.player.body.velocity.x = 200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = 1;
            
            a = 2;
            //console.log("este es a = " + a);
            
        } 
              
        else if (this.cursor.left.isDown && this.cursor.right.isUp) {
            //cursor.right.enabled = false;
            this.player.body.velocity.x = -200;
            this.player.animations.play('correr', 5, true);
            this.player.scale.x = -1;
            
             
        } 
        
       
        
        else if (this.jump.isDown && this.player.body.wasTouching.down) {
            this.player.body.velocity.y = -700;
        }
        
        else {
            this.player.body.velocity.x = 0;
            this.player.animations.stop();
            this.player.frame = 4;
        }
        
                
        /*/if(cursor.right.justUp){
            cursor.left.reset();
        }
        
        if(cursor.left.justUp){
            cursor.right.reset();
            
            
        }/*/

        //var style = { font: "65px Arial", fill: "#ff0044", align: "center" };
        //text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"})

        //text.anchor.set(0.5);
}

function render() {
      //game.debug.inputInfo(32,32);
      game.debug.key(this.cursor.right, 50,50)    
      this.platforms.forEach(function(platform){game.debug.body(platform)});
}

function playerDie(){
        this.player.kill();
        start()
        //game.time.events.add(1000, start, this)
  
        
}

function start(){
          game.state.start('play');

}

Also im not sure that your start() function will work (missing 'play' state in your code?), but you will have to check that yourself.

I did the same as you told me but the Chrome console throws:  Cannot read property 'setAll' of undefined, I tried everything, I don't know what to do now!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.