Phaser 3 Arcade Gravity Isn't working properly no matter what value i set it to

Question

I'm working on a new project in phaser and for some reason the gravity in the game is all messed up, when i attempt to jump i jump like a centimeter. if i change the values nothing changes its always glitched. how can i make it so that i jump and fall normally?

I've had some previous projects and the gravity works just fine, for this project i am using the latest stable release of phaser 3. I honestly cant see what the error is and i've been at it for a while.

there was a lot of code that wasn't relevent to the error so i removed it to make it easier for someone to review this.

game.js

const socket = io();
var config = {
    type: Phaser.AUTO,
    width: 1000,
    height: 550,
    parent: 'master',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: true
        }
    },
    scene: {
        preload: resources,
        create: mechanics,
        update: controls
    }
};
const game = new Phaser.Game(config);

function resources() {
    this.load.image("arena", "../resources/images/arena1.png");
    this.load.image("floor", "../resources/images/floor.png");
    this.load.atlas("warrior", "../resources/images/characters/warrior.png","../resources/images/characters/warrior.json");


}
var warrior;

function mechanics() {

    grasslands = this.add.image(500, 225, "arena").setScale(0.7);


    warrior = this.physics.add.sprite(100, 490, "warrior").setScale(2).setSize(15, 15);
    
    floor = this.physics.add.staticGroup();
    floor.create(500, 545, "floor").setVisible(false);

    this.physics.add.collider(warrior, floor);
    warrior.body.collideWorldBounds = true;
    warrior.body.onWorldBounds = true;
}   




function controls() {
    
    key = this.input.keyboard.addKeys("W,A,S,D");


    if(key.A.isDown) {
        warrior.setVelocityX(-100);
        warrior.flipX = true;


    }else if (key.D.isDown) {
        warrior.setVelocityX(100);
        warrior.flipX = false;
    


    }else if (key.W.isDown && warrior.body.touching.down) {
        warrior.setVelocityY(-330);
    }else{
        warrior.setVelocity(0);
        
    }
}

Answer 1

The problem occurs because of this line warrior.setVelocity(0);. This line, stops the gravity of working, as intended (and hinders jumping), since on scene updates, the velocity is set to 0. Remove that line and add warrior.setVelocityX(0) at the start of the controls function and everything should work fine (if you want/have to keep the if-else block). Or check out my working demo at the end of this answer.

function controls() {
    key = this.input.keyboard.addKeys("W,A,S,D");

    warrior.setVelocityX(0);

    if(key.A.isDown) {
        warrior.setVelocityX(-100);
        warrior.flipX = true;
    }else if (key.D.isDown) {
        warrior.setVelocityX(100);
        warrior.flipX = false;
    }else if (key.W.isDown && warrior.body.touching.down) {
        warrior.setVelocityY(-330);
    }
}

I would only stop the left/right movement, when the player stops pressing the keys ( with setVelocityX(0)), and let gravity take care of stopping the jump/upwards movement.

Here a basic demo:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 160,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 },
        }
    },
    scene: {
        create,
        update
    }
}; 

var cursors;
var player;
var playerStateText;
const SPEED = 250;

var isJumping = true;

function create () {
    cursors = this.input.keyboard.createCursorKeys();
    
    this.add.text(10, 10, 'Use arrow Keys to move!')
    
    let ground = this.add.rectangle(-40, 120, 480, 50, 0xBAF0FF).setOrigin(0);
    player = this.add.rectangle(20, 20, 30, 30, 0xcccccc).setOrigin(0);
    
    ground = this.physics.add.existing(ground);
    ground.body.setImmovable(true);
    ground.body.allowGravity = false;
    
    player = this.physics.add.existing(player);
    
    this.physics.add.collider(player, ground, _ => isJumping = false);      
}

function update (){
    
    if (cursors.left.isDown){
        player.body.setVelocityX(-SPEED);
    } else if (cursors.right.isDown) {
        player.body.setVelocityX(SPEED);
    }
    else {
        player.body.setVelocityX(0);
    }
    
    if (!isJumping && cursors.up.isDown){
        player.body.setVelocityY(-SPEED * .75);
        isJumping = true;
    } 
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>