collision Sprite vs Group Collision doesn't work Phaser

Santiago · July 12, 2017

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.

samid737 · July 12, 2017

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.

Santiago · July 12, 2017

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!

Santiago · July 12, 2017

Oh well, I found the conflict, was mine mistake, yours was Ok, thank you very much! I'm actually learning with phaser.

Sign In

collision Sprite vs Group Collision doesn't work Phaser

Recommended Posts

Santiago

Link to comment

Share on other sites

samid737

Link to comment

Share on other sites

Santiago

Link to comment

Share on other sites

Santiago

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity