Sign in to follow this  
thewelshmanc

How to modify gravity from user input?

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/phaser@3.14.0/dist/phaser.js"></script>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.14.0/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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.