thewelshmanc

Members
  • Content Count

    1
  • Joined

  • Last visited

About thewelshmanc

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. thewelshmanc

    How to modify gravity from user input?

    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.