Move player by 32 pixels with collision

[barilo]

Hello, I have a group and it moves by the following code :

 for (var i = 0; i < this.gameObject.snakeGroup.length; i++) {
     this.gameObject.snakeGroup.children[i].x +=32;
 }

To check if the group is colliding with the walls, I use :

this.game.physics.arcade.collide(this.gameObject.snakeGroup,this.gameObject.wallsLayer,function(){
    this.gameObject.gameIsFinished=true;
}.bind(this));

But this only work with the velocity. So as I need to use the .x += 32, I ask you how can I check the collision.

I search on this topic but I can't find a solution.

[samme]

Use arcade.overlap instead.

[barilo]

51 minutes ago, samme said:

Use arcade.overlap instead.

I have already tried it but since the beginning of my game, Phaser considers the overlap function to true whereas it consider the collide function to false for that case : (the car in red goes to the right of the screen)

 

[barilo]

@samme do you have another idea ?

[samme]

No, that's strange.

You can see overlaps with https://github.com/samme/phaser-plugin-debug-arcade-physics .

Make sure you haven't placed the group objects within the wall right when they're created.

[barilo]

I haven't placed my group objects within the wall.

So, to give you more informations, I made my game  with :

/*
// Create's function
*/

this.game.physics.startSystem(Phaser.Physics.ARCADE);
        
// Tiled
this.gameObject.map = this.game.add.tilemap('background');
this.gameObject.map.addTilesetImage('textures', 'textures');
this.gameObject.backgroundLayer = this.gameObject.map.createLayer('Background');
this.gameObject.wallsLayer = this.gameObject.map.createLayer('Walls');
        
this.gameObject.map.setCollision(1,true,'Walls');
this.game.physics.arcade.enable(this.gameObject.wallsLayer);

this.gameObject.squareSize = 32;
this.gameObject.snakeGroup = this.game.add.group();
this.gameObject.snakeGroup.enableBody=true;
this.gameObject.snakeGroup.x = 2*this.gameObject.squareSize + 9 * this.gameObject.squareSize;
this.gameObject.snakeGroup.y = 4*this.gameObject.squareSize;

for (let i = 9, j = 0; i >= 0; i--, j++) {
    let snakepart;
    if (j === 0) {
        snakepart = this.game.add.sprite(2*this.gameObject.squareSize + i *  this.gameObject.squareSize, 4*this.gameObject.squareSize, 'snake', 4);
    } else if (j === 9) {
        snakepart = this.game.add.sprite(2*this.gameObject.squareSize + i * this.gameObject.squareSize, 4*this.gameObject.squareSize, 'snake', 14);
    } else {
        snakepart = this.game.add.sprite(2*this.gameObject.squareSize + i * this.gameObject.squareSize, 4*this.gameObject.squareSize, 'snake', 1);
    }
    snakepart._direction = 2;
    this.gameObject.snakeGroup.add(snakepart);
}

//other code...

And I update it with :

if (!this.gameObject.gameIsFinished) {
//Motion function
        for (let i = this.gameObject.snakeGroup.length-1; i > 0; i--) {
                switch(this.gameObject.snakeGroup.children[i]._direction) {
                    case 2:
                    this.gameObject.snakeGroup.children[i].x += this.gameObject.squareSize;
                    this.gameObject.snakeGroup.children[i]._direction = this.gameObject.snakeGroup.children[i-1]._direction;
                    break;
                    case 4:
                    this.gameObject.snakeGroup.children[i].x -= this.gameObject.squareSize;
                    this.gameObject.snakeGroup.children[i]._direction = this.gameObject.snakeGroup.children[i-1]._direction;
                    break;
                    case 1:
                    this.gameObject.snakeGroup.children[i].y -= this.gameObject.squareSize;
                    this.gameObject.snakeGroup.children[i]._direction = this.gameObject.snakeGroup.children[i-1]._direction;
                    break;
                    case 3:
                    this.gameObject.snakeGroup.children[i].y += this.gameObject.squareSize;
                    this.gameObject.snakeGroup.children[i]._direction = this.gameObject.snakeGroup.children[i-1]._direction;
                    break;              
                }
        }

            switch(this.gameObject.snakeGroup.children[0]._direction) {
                case 2:
                this.gameObject.snakeGroup.children[0].x += this.gameObject.squareSize;
                this.gameObject.snakeGroup.children[0]._direction = this.gameObject.direction;
                break;
                case 4:
                this.gameObject.snakeGroup.children[0].x -= this.gameObject.squareSize;
                this.gameObject.snakeGroup.children[0]._direction = this.gameObject.direction;
                break;
                case 1:
                this.gameObject.snakeGroup.children[0].y -= this.gameObject.squareSize;
                this.gameObject.snakeGroup.children[0]._direction = this.gameObject.direction;
                break;
                case 3:
                this.gameObject.snakeGroup.children[0].y += this.gameObject.squareSize;
                this.gameObject.snakeGroup.children[0]._direction = this.gameObject.direction;
                break;
            }

this.game.physics.arcade.overlap(this.gameObject.snakeGroup,this.gameObject.wallsLayer,function(){
                this.gameObject.gameIsFinished=true;
            }.bind(this));
}

If you don't understand something, I can describe the code.

Thanks for your help, collision and overlap are a big mystery for me.

[samme]

Ah, collision and overlap work very differently for Tilemaps.

For a tilemap layer, overlap is true if the sprite overlaps the layer at all, even on an empty tile. You have to use the processCallback or the collisionCallback to check what kind of tile it is.

For collide, first set

this.gameObject.wallsLayer.debug = true;

to see if the collision edges are in the right place.

[barilo]

Ok, I will do some research about the processCallback and collisionCallback.

I get this :