Jump to content

Why is this weird thing happening with Arcade physics?


TacoCoder
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...