If the sprites collide, they will pass through

I was studying while modifying the code of “First Game” on the Phaser official page.

If you collide with a high gravity value, you will pass through the ground.

It’s full code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
var config = {
    type: Phaser.AUTO,
    width800,
    height600,
    physics: {
        default'arcade',
        arcade: {
            gravity: { y1800 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        updateupdate
    }
};
 
var game = new Phaser.Game(config);
 
function preload() {
    this.load.image('sky''assets/sky.png');
    this.load.image('ground''assets/platform.png');
    this.load.image('star''assets/star.png');
    this.load.image('bomb''assets/bomb.png');
    this.load.spritesheet('dude''assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
 
var platforms;
var player;
var cursors;
var stars;
var score = 0;
var scoreText;
var bombs;
 
var text;
 
function create() {
    
    text = this.add.text(500500"", {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    });
    
    this.add.image(400300'sky');
    platforms = this.physics.add.staticGroup();
 
    platforms.create(400568'ground').setScale(2).refreshBody();
    player = this.physics.add.sprite(10450'dude').setBounce(0).setCollideWorldBounds(true);
 
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
 
    this.anims.create({
        key: 'turn',
        frames: [{ key: 'dude', frame: 4 }],
        frameRate: 20
    });
 
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
    
    stars = this.physics.add.group({
        key: 'star',
        // repeat: 11,
        setXY: { x12y0, stepX: 70 }
    });
    
    cursors = this.input.keyboard.createCursorKeys();
    
    this.physics.add.collider(player, platforms);
    this.physics.add.collider(stars, platforms);
    this.physics.add.collider(player, stars);
}
 
function update() {
    
    if (cursors.left.isDown) {
        player.setVelocityX(-160);
        player.anims.play('left'true);
    } else if (cursors.right.isDown) {
        player.setVelocityX(160);
        player.anims.play('right'true);
    } else {
        player.setVelocityX(0);
        player.anims.play('turn');
    }
 
    if (cursors.up.isDown && player.body.touching.down) {
        player.setVelocityY(-330);
    }
}
cs

(No modifications other than the create function.)

result


At high gravity values, objects collide with each other and pass through them.

If gravity is 50(Low)
bandicam 2020-02-14 23-08-11-877
good.

Q: How can I prevent my character from crossing the ground?

You shouldn’t have a collider for the player & star objects. You need to use an overlap like the tutorial says.

this.physics.add.overlap(player, stars, collectStar, null, this);

function collectStar(player, star) {
star.disableBody(true, true);
}