Problem with collision detection for sprites

Phaser 3
1

Hi there!

I’ve got problem with collision detection for my sprites. The thing is that collisions somewhat are working but not as expected. When player (red object) is colliding with blue object from his left side, red object collides properly with the blue one. But when red object is colliding with the blue right side, red object jumps to the left side of the blue one suddenly.

Weird thing is also with box collision. It looks like only top-left corner of the box is properly colliding with player. Otherwise player just fly trough under the crate instead of stopping before the crate.

Here is the gif showing described situations > GIF
Demo is hosted on heroku > Demo
And full source code on gitlab > source code

Thanks in advance!

2

I am investigation your code right now. What did you expect of it. is player is red?

can red ball just collide with others crate and blue ball? What did you expect?

3

I’m expecting that player (red one) is stopped by crate when colliding with it. Now it’s stopping only in collision with top-left corner of the crate which is wrong.

And about blue ball - it looks like collisions are not working properly either. When red approaches blue from the right side of the blue one when collides the red one jumps over the blue. Red ball should be stopped by blue.

4

Usually you need to use velocities for correct collisions, e.g.,

if (this.keys.W.isDown) {
  this.body.setVelocityY(-1);
}
5

It looks like setVelocity helps here a lot! Thanks.

Now the problem is with red ball jumping over blue one when collision occurs from the right side of the blue ball. And with the crate collision also when approaching from the right side of it.

You can see how collision is detected with blue ball here > Blue ball collisions
And here is GIF with crate colissions > Crate collisions

6

like: com-video-to-gif ?

7

If red ball it’s not jumping over blue one on collision then yes, something like that.

But it would be better if red ball stops on blue one when colliding with it rather than sliding around.

8

I tried to start over with minimum setup. Here’s the whole source code:

import Phaser from 'phaser';
import player from './assets/player.png';

const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    backgroundColor: '0xffffff',
    parent: 'game',
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
            gravity: 0
        },
    }
}

const game = new Phaser.Game(config);

function preload() {
    this.load.image('player', player);
}

function create() {
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.player.setCircle(16);
    this.player.setTint(0xff0000);

    this.enemy = this.physics.add.sprite(200, 200, 'player');
    this.enemy.setCircle(16);
    this.enemy.setTint(0x0000ff);

    this.physics.add.collider(this.player, this.enemy);

    this.keys = this.input.keyboard.addKeys('W,S,A,D');
}

function update() {
    this.player.setVelocity(0);

    if (this.keys.A.isDown) {
        this.player.setVelocityX(-100);
    } 
    if (this.keys.D.isDown) {
        this.player.setVelocityX(100);
    }
    if (this.keys.W.isDown) {
        this.player.setVelocityY(-100);
    } 
    if (this.keys.S.isDown) {
        this.player.setVelocityY(100);
    }
}

And this is what’s happening currently > Presentational GIF

As you can see, pushing the blue ball by red one is somehow broken. Pushing blue one to the right side in straight line is ok. But pushing down, up or left is not working correctly. Red ball slides around blue one or jumps over it from right to left.

9

I found the “solution”. Downgrading phaser from 3.19.0 to 3.16.2 fixes the collision problem. It means that something changed in 3.17.0 because the 3.16.2 is the last version where collision behaves correctly.