VanderlyleCrybaby

Overlap/Collider between Tiled Object Layer and Player/Sprite doesn't work in Phaser 3

Recommended Posts

Hello everyone!

I've been a lurker on this site for most of the time and the threads here helped me time and time again to sort things out. 

I'm currently trying to get a simple Jump'n'Run Game going, but I'm struggling with the collectibles.
I'm using a Tiled Object Layer and imported it succesfully into the game. However, the overlap between the objects and the player just isn't working. I've tested the collectPoint1 function on another object and it worked. Also the sprites are all visible in my game. Really, the only problem is the overlap.  


class Level extends Phaser.Scene {

    constructor(){
        super({
            key: 'Level'
             });

    };


    create(){

        let scene = this;

        let map = this.make.tilemap({ key: 'Level1'});

        let player1_config = {...};


        //Player 1
        this.player1 = new Player1(this, player1_config);

        
       //Setting the score-data
        
       this.data.set('player1Score',0);
        

        //Animation of the Coins
        var coinSpin_config = {
            key: 'spin',
            frames: this.anims.generateFrameNumbers('coin', {
                start: 0, end: 7
            }),
            frameRate: 10,
            repeat: -1
        };
        
        this.anims.create(coinSpin_config);
        
        
//Using createFromObjects to display the coins
       this.points = map.createFromObjects('HousePoints', 'point', {key: 'coin'}, this);
        this.points.enableBody = true;
        
       this.anims.play('spin', this.points);
        
        
         //Score-text
         this.scoreText = this.add.text(30, 22, 'Score for ' + this.playerHouse + ': 0');  this.scoreText.setScrollFactor(0);

    };
    
    
      //Collecting Points
    collectPoint1 (player, coin){
        var score = this.data.get('player1Score');
        this.data.set('player1Score', score + 10);
            
        this.scoreText.setText('Score: ' + this.data.get('player1Score'));
        coin.disableBody();
        }


    update(){
        
        this.player1.move();
        
        this.physics.add.overlap(this.player1, this.points, this.collectPoint1, null, this);
      
        }
    }

}

As I'm well aware of this post, I've tried it with map.getObjectLayer as well. Didn't work.

I'm a huge fan of this template, but its structure is so very different to mine that it down't really help me.

.
.
.
.
this.housePoints = this.add.group(null);
        
        const objects = map.getObjectLayer('HousePoints');
        
        let housePoints_config = {
            scene: this,
            collected: false
        }
        
        objects.objects.forEach(
        (point) => {
//Creates a Points Object defined in a Points class (see below)
               point = new Points(this, housePoints_config);
            this.housePoints.add(point);
            
               });

.
.
.
.
.
}

 update(){
        
        this.player1.move();

//This throws the error 'spin is not a function', but that's not my focus
        this.housePoints.spin();

//This overlap doesn't work either
        this.physics.add.overlap(this.player1, this.housePoints, this.collectPoint1, null, this);

      
        }

}

/////////////////////////////////////////////
///This is in another .js file naturally////
///////////////////////////////////////////

class Points extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, config) 
  {
    super(config.scene, config.x, config.y);
    config.scene.physics.world.enable(this);
    this.scene = config.scene;
    this.collected = config.collected;
    this.scene.add.existing(this);
    this.scene.physics.world.enable(this);
      
    var coinSpin_config = {
            key: 'spin',
            frames: this.anims.generateFrameNumbers('coin', {
                start: 0, end: 7
            }),
            frameRate: 10,
            repeat: -1
        };
      
      this.anims.create(coinSpin_config);
      
      
  }
    
   spin(){
        
        this.anims.play('spin', true);
        console.log('point updated');
    }
     
}

I'd be eternally thankful for every tip! Thanks so much, if you decide to take the time to help me.

 

inGame.PNG

tiled-editor.PNG

Share this post


Link to post
Share on other sites

Hey, it's me from the thread you referenced.  I've added my code and added some comments for you

        var overlapObjects = this.map.getObjectLayer('Overlap')['objects']; //my Object layer was called Overlap
        let overlapObjectsGroup = this.game.physics.add.staticGroup({
        
        });
        let i = 0;
        overlapObjects.forEach(object => {
        let obj = overlapObjectsGroup.create(object.x, object.y, 'grass');
            obj.setScale(object.width/32, object.height/32); //my tile size was 32
            obj.setOrigin(0); //the positioning was off, and B3L7 mentioned the default was 0.5
            obj.body.width = object.width; //body of the physics body
            obj.body.height = object.height;

            
        });
        overlapObjectsGroup.refresh(); //physics body needs to refresh
        console.log(overlapObjectsGroup);

        this.game.physics.add.overlap(this.player, overlapObjectsGroup, this.test, null, this);

 

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.