Sprite overlaping with tilemap, overlap not working

[AKApumkin]

I have a simple game, see attached. 

I have a problem with a sprite and overlap collision. The little red square is a sprite. The red square is re-positioned based on if the character is going up, down left or right. Therefore being able to detect what overlap layer it is colliding with, for now I have labeled them all layerSurface, but in the future will give them unique layers based on what is actually there.

The player successful collides with the wall and the surface as its meant to, but I can't get the square to overlap collision detect. Regular collision won't work on the red square as in some cases like the diagram it is moved inside the tilemap. 

Currently the overlap function just spams the hasCollided function regardless of what is happening. 

Any help would be appreciated, or other solutions to solve this issue.

 

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    this.stage.backgroundColor = '#787878';
    // initiallize the tilemap
    map = game.add.tilemap('main_map');
    map.addTilesetImage('otherNew', 'sprite_map');

    //draw the layers 
    map.createLayer('background');
    layerWall = map.createLayer(1);
    layerSurface = map.createLayer(2);

    layerWall.resizeWorld();
    map.setCollisionBetween(0, 100,true, layerSurface,true);
    map.setCollisionBetween(0, 100,true, layerWall,true);


    player = game.add.sprite(600, 600, 'player_image');
    game.physics.arcade.enable(player);
    player.body.collideWorldBounds = true; 

    //Collision suqare sprite 
    squareChild = game.add.sprite(500, 600, 'square');
    game.physics.arcade.enable(squareChild);
    squareChild.body.collideWorldBounds = true; 
    
    //Camera position
    game.camera.setPosition(player.x, player.y);
    game.camera.follow(player);

    //add keyboard functionality
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {

    //check physical collision
    game.physics.arcade.collide(player, layerWall);
    game.physics.arcade.collide(player, layerSurface);
    game.physics.arcade.overlap(squareChild, layerSurface, hasCollided, null, this);
    
    //resets the velocity after a keydown input 
    player.body.velocity.set(0);
    if (cursors.down.isDown)
    {
        player.body.velocity.y = playerVelocity;
        direction = "down";
        moveSquare(34,109);
    }
    else if (cursors.up.isDown)
    {
        player.body.velocity.y = -playerVelocity;
        direction = "up";
        moveSquare(34,-34);
    }

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -playerVelocity
        direction = "left";
        moveSquare(-34,34);
    }
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = playerVelocity;
        direction = "right";
        moveSquare(109,34);
    }
}

function moveSquare(xPos,yPos){
        squareChild.body.x = player.x + xPos;
        squareChild.body.y = player.y + yPos;
        
        //experimental 
        squareChild.body.drag.set(1000);
        squareChild.body.velocity.x = xPos;
        squareChild.body.velocity.y = yPos;
}

function hasCollided(obj1, obj2){
   console.log('yes');
}

 

[AKApumkin]

bump

[AKApumkin]

Managed to sort my problem out by approaching it differently. 

So phaser can't handle overlap and tilemaps with sprites. Or at least i haven't figured out the special configuration function inside the documents or examples to make this work. What happens is if you overlap with a tilemap, even if a specific tile/layer is only say 100x100 and in a fixed position, the overlap method will just return true wherever you are. 

I could have implemented raycasting to detect the specific layers as well, but the geometry and raycasting methods are rather large, and all i wanted was simple collision detection. So i have hacked the following. Its like raycasting, but that red dot you see in the image in the first post, is instead on a direction change put inside the player collision bounds and then a velocity is added to move it into the plate or sink, depending on the direction. I get a callback and can do the appropriate detection. Its not the correct way of doing it, but it does the job. 

So all i really did was adjust the moveObjects to inside the player and added a velocity then stooped moving if the box was beyond a certain point to avoid other collision on tiles. 

 if (cursors.down.isDown)
    {
        //Set the collision square position and the player angle once
        if(direction != "down"){
            moveObjects(squareChild,50,90);
        }
        //move Player
        player.body.velocity.y = playerVelocity;
        //move colision box 
        if(squareChild.body.y < player.body.y + 100){
           squareChild.body.velocity.y = playerVelocity;
        }
        direction = "down";
    }

 

 

 

 

[Salazans]

I just want to add my solution here, for other people facing this issue in the future.

My case is a platformer character falling into lava.
I used Tilemap.getTileWorldXY() to check if there is any tile from the "lava" layer at my character's position:

if( s.map.getTileWorldXY( this.x, this.y, s.map.tileWidth, s.map.tileHeight, "lava" ) ) { this.die(); }

It is not the exact same thing as an arcade.overlap() because it doesn't check the bounds of the sprite, just the anchor point. But it suited me and I suppose this method could be improved for other needs.

Cheers