Set the maximum and current speed of a car in Phaser

Question

I am making a top-down racing game using the Phaser framework which uses JS. I am having some trouble getting the car to slow down, at the moment it just stops when no button is pressed. I want it to slow down to stopped. Here is my code so far: create: function () {

    //run in canvas mode
    this.game.renderer.clearBeforeRender - false;
    this.game.renderer.roundPixels = true;

    //Add arcade physics
    this.game.physics.startSystem(Phaser.Physics.ARCADE);

    //Add background sprites
    this.game.add.sprite(0, 0, 'background');
    this.game.add.sprite(0, 0, 'track');

    //Add car sprite
    car = this.game.add.sprite(800, 135, 'car-concept');

    //Car physics settings
    this.game.physics.enable(car, Phaser.Physics.ARCADE);

    car.body.drag.set(100);
    car.body.maxVelocity.set(200);
    car.body.maxAngular = 500;
    car.body.angularDrag = 500;
    car.body.collideWorldBounds = true;

    //Game input
    cursors = this.game.input.keyboard.createCursorKeys();
    this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR]);

    //pivot point
    car.pivot.x = car.width * .3;
    car.pivot.y = car.height * .5;
    car.anchor.setTo(0.3, 0.5);

    //scale the car
    car.scale.setTo(0.3, 0.3);
},

update: function () {

    car.body.velocity.x = 0;
    car.body.velocity.y = 0;
    car.body.angularVelocity = 0;

    if(cursors.left.isDown)
    {
      car.body.angularVelocity = -200;
    }
    else if(cursors.right.isDown)
    {
      car.body.angularVelocity = 200;
    }
    if(cursors.up.isDown)
    {
      this.game.physics.arcade.velocityFromAngle(car.angle, -200, car.body.velocity)
      if(this.currentSpeed < this.maxSpeed)
      {
        this.currentSpeed += 10;
      }
    }
    else
    {
      if(this.currentSpeed > 0)
      {
        this.currentSpeed -= 10;
      }
    }
    if(cursors.down.isDown)
    {
      this.game.physics.arcade.velocityFromAngle(car.angle, 200, car.body.velocity)
      if(this.currentSpeed > 0)
      {
        this.currentSpeed -= 30;
      }
    }

},

speed: function()
{
  this.maxSpeed = 100;
  this.currentSpeed = 0;
},

I have looked a few questions on here about the same problem and this is how I got to the point where I am now. I have set the maxSpeed and currentSpeed but for some reason it won't allow me to actually use it. The console in the browser does not give me any errors, so if anyone can guide me on this, that would be great!

Thanks.

Answer 1

The reason it stops dead is because you're moving it with velocity, not acceleration - and are setting velocity to zero in your update loop (this effectively says "stop, now!").

Remove those lines and in your call to velocityFromAngle you should feed that into body.acceleration instead of body.velocity.

Here is an update loop you can use, although you'll need to mix in your currentSpeed settings and such like:

function update() {

    if (cursors.up.isDown)
    {
        game.physics.arcade.accelerationFromRotation(sprite.rotation, 200, sprite.body.acceleration);
    }
    else
    {
        sprite.body.acceleration.set(0);
    }

    if (cursors.left.isDown)
    {
        sprite.body.angularVelocity = -300;
    }
    else if (cursors.right.isDown)
    {
        sprite.body.angularVelocity = 300;
    }
    else
    {
        sprite.body.angularVelocity = 0;
    }

}