Why is this weird thing happening with Arcade physics?

[TacoCoder]

Hi

I'm writing a endless runner with typescript+phaser. I haven't made much progress yet, right now it only generates an infinite platform and has a running player that can jump.

Now its the jumping I'm having issues with... when the game starts, the bottom of the player (which is its Y anchor) is at 400, which is the top of the platform. The player runs along fine and has no issues what so ever till I jump. Once the player lands after jumping, it starts jumping up and down (a little bit, only noticeable by looking at its Y through console.log), and the collision bool (from game.physics.arcade.collide) starts to switch between true and false every frame. Also, after landing a jump the players Y is a little bit under the platform top. Here is the code:

/// <reference path="defs/phaser.d.ts" />

class Game {
    game: Phaser.Game;

    player: Phaser.Sprite;
    platform: Phaser.Group;

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: this.preload, create: this.create, update: this.update })
    }

    preload() {
        this.game.load.atlasJSONHash('player', '/assets/player.png', '/assets/player.json');

        this.game.load.image('grass_left', '/assets/grass_left.png');
        this.game.load.image('grass_middle', '/assets/grass_middle.png');
        this.game.load.image('grass_right', '/assets/grass_right.png');
    }

    create() {
        this.game.physics.startSystem(Phaser.Physics.ARCADE);

        // Create player
        this.player = this.game.add.sprite(20, 400, 'player');
        this.player.anchor.set(0.5, 1);
        this.player.animations.add('jump', [3]);
        this.player.animations.add('walk', [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
        this.player.animations.play('walk', 20, true);
        this.game.physics.arcade.enable(this.player);
        this.player.body.gravity.y = 400;
        this.player.body.bounce.y = 0;
        this.player.body.velocity.x = 200;

        // Create platform
        this.platform = this.game.add.group();
        this.platform.enableBody = true;
        var block = this.platform.create(0, 400, 'grass_left');
        block.body.immovable = true;
        for(var i = 0; i < 10; i++) {
            block = this.platform.create((i + 1) * 70, 400, 'grass_middle');
            block.body.immovable = true;
        }

       this.game.world.setBounds(0, 0, 999999999999999999, 600);
    }

    update() {
        if(this.platform.right < this.game.camera.x + 800) {
            var block = this.platform.create(this.platform.right, 400, 'grass_middle');
            block.body.immovable = true;
        }

        console.log(this.player.y);

        var onPlatform = this.game.physics.arcade.collide(this.player, this.platform);

        if(!onPlatform) {
            this.player.animations.play('jump', 20, true);
        } else {
            this.player.animations.play('walk', 20, true);
        }

        // Input
        var cursors = this.game.input.keyboard.createCursorKeys();

        // Jump
        if(onPlatform && cursors.up.isDown && this.player.body.touching.down) {
            this.player.body.velocity.y = -450;
        }

        this.game.camera.x = this.player.x - 200;

    }
}

window.onload = () => {
    var game = new Game();
}

Here is some values each frame after landing a jump:

Frame 1

Player Y: 397   Collision with platform: false

Frame 2

Player Y: 397.1111111111111    Collision with platform: true

Frame 3

Player Y: 397   Collision with platform: false

Frame 4

Player Y: 397.1111111111111    Collision with platform: true

 

Hopefully you can help me, I've been bashing my head on it for hours now, and its starting to hurt!

Thanks in advance

[drhayes]

It sounds like you care about those two values because that's what you're gating your jumps on: if the y is too big, or collision is false, no jump possible.

Why not change that around? On first collision with a platform, set a boolean to true (you could use the |= operator to set it). That boolean stays true until the player hits the jump key. It won't turn true again until the player hits a platform. I've seen this called the "sticky" bit before.

[TacoCoder]

6 hours ago, drhayes said:

It sounds like you care about those two values because that's what you're gating your jumps on: if the y is too big, or collision is false, no jump possible.

Why not change that around? On first collision with a platform, set a boolean to true (you could use the |= operator to set it). That boolean stays true until the player hits the jump key. It won't turn true again until the player hits a platform. I've seen this called the "sticky" bit before.

Thanks for the reply I've taken the jump code from the "Your first game" tutorial, so it should work... I'll try your suggest out and let you know how it goes

[TacoCoder]

6 hours ago, drhayes said:

It sounds like you care about those two values because that's what you're gating your jumps on: if the y is too big, or collision is false, no jump possible.

Why not change that around? On first collision with a platform, set a boolean to true (you could use the |= operator to set it). That boolean stays true until the player hits the jump key. It won't turn true again until the player hits a platform. I've seen this called the "sticky" bit before.

Also not really... I don't really care about the y value, just posted it there to show what I meant by moving up and down. And jumping still seems to work fine, its more animations that are an issue.

[samme]

I'm not sure I see it (I don't know your asset dimensions though):

 

[TacoCoder]

44 minutes ago, samme said:

I'm not sure I see it (I don't know your asset dimensions though):

 

Yeah, the problem is with the animations. When the collision with platform changes every frame, the animation is switched from jump to run quickly every frame. See if you get the varying collision...

-- EDIT --

Just sure the data down the bottom... all looks fine in the codepen. Interesting...

[samme]

Are there gaps between your platforms?

[TacoCoder]

4 hours ago, samme said:

Are there gaps between your platforms?

Yes. Its a group of single blocks together. Also the issue doesn't occur before the first jump.

[Tom Atom]

Hi, are all your player sprites in atlas of exactly the same size?

[drhayes]

I think my "sticky bit" advice still applies. Instead of relying on y velocity or body.touching to determine animation state you rely on the sticky bit instead..?