Jump to content

How to modify gravity from user input?


thewelshmanc
 Share

Recommended Posts

I'm trying to modify the gravity of my game when a user types a number into a box. The game starts off with 400 as the gravity but it needs to be lowered in order to jump over an obstacle. I've tried changing both the sprite and the game's gravity with the line:

player.body.gravity.y

player being the sprite or using:

this.physics.arcade.gravity.y

but neither of these seem to work.

Here's the full Javascript file:

var config = {
    type: Phaser.AUTO,
    width: 600,
    height: 800,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 600 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
var platforms;
var hintText;
var gravityValue;

if(document.getElementById('gravityChange') != null) {
    document.getElementById('gravityChange').style.display = "none";
}

function preload () {
    this.load.image('background', 'assets/images/background.jpg');
    this.load.image('platforms', 'assets/images/platform.png');
    this.load.image('ground', 'assets/images/floor.png');
    this.load.spritesheet('astronaut', 'assets/images/walkingastronaut.png', {frameWidth: 30, frameHeight: 45});
}

function create () {
    this.add.image(0, 0, 'background').setOrigin(0, 0);
    
    platforms = this.physics.add.staticGroup();

    platforms.create(600, 400, 'platforms'); //top platform
    platforms.create(0, 500, 'platforms'); //middle
    platforms.create(500, 600, 'platforms'); //bottom
    
    var groundX = 0;
    while(groundX < 774) {
        platforms.create(groundX, 750, 'ground');
        groundX += 110;
    }
    
    player = this.physics.add.sprite(50, 675, 'astronaut');
    
    player.setBounce(0);
    player.setCollideWorldBounds(true);
    
    hintText = this.add.text(85, 16, 'Use Arrows Keys to Move', { fontSize: '32px', fill: '#FFF' });
    
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('astronaut', { start: 6, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
    
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'astronaut', frame: 0 } ],
        frameRate: 20
    });
    
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('astronaut', { start: 1, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    
    this.anims.create({
        key: 'up',
        frames: [ { key: 'astronaut', frame: 4 } ],
        frameRate: 20,
    });
    
    this.anims.create({
        key: 'upRight',
        frames: [ { key: 'astronaut', frame: 5 } ],
        frameRate: 20,
    });
    
    this.anims.create({
        key: 'upLeft',
        frames: [ { key: 'astronaut', frame: 9 } ],
        frameRate: 20,
    });
    
    this.physics.add.collider(player, platforms);
    
    cursors = this.input.keyboard.createCursorKeys();
}

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);
    }
    
    if(!player.body.touching.down) {
        if(player.body.velocity.x > 0) {
            player.anims.play('upRight');
        } else if (player.body.velocity.x < 0) {
            player.anims.play('upLeft');
        } else {
            player.anims.play('up', true);
        }
    }
    
    if(player.body.x >= 250) {
        document.getElementById('gravityChange').style.display = "block";
    }
    
    document.getElementById('gravity').addEventListener('change', getInput);
    
    function getInput() {
        gravityValue = document.getElementById('gravity').value;
        player.body.gravity.y = gravityValue;
    }
}

and here's the HTML:

<html lang="en">

	<head>
	
	    <meta charset="utf-8">
	    
	    <title>Phaser Code Camp</title>
	    
	    <style>
    	    body {
    	        margin-top: 50px;
    	        text-align: center;
    	    }
	    </style>
	</head>

	<body>
	    <form name="gravityChange" id="gravityChange" method="post">
	        Gravity: <input type="number" name="gravity" id="gravity">
	    </form>
	</body>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
    <script src="scripts/main.js"></script>
</html>

I'm new to Phaser and have tried looking on Google for this but found nothing.

Link to comment
Share on other sites

16 hours ago, thewelshmanc said:

I'm new to Phaser and have tried looking on Google for this but found nothing.

I think you can use phaser input plugin, instead of using a basic input text of HTML todo don't mess up with the DOM, it works as a phaser object you only need to search how to use it on phaser3

Link to comment
Share on other sites

  • 3 weeks later...
 Share

  • Recently Browsing   0 members

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