Fluid strafing (allow diagonal movement)

[GaryS]

Hi Chaps,

I've been playing around with a sprite, trying to get it to strafe in the way that I'd expect - Doom style.

So the issue is that I can set the angle of my sprite, and I'm using velocityFromRotation to move it up, down, left and right in relation to its current angle.
So far, so lovely.

The problem is that I can't move diagonally, which is to say, I need to be able to move up and left at the same time, in relation to the sprite's angle.
I have a function for each movement, up, down, left and right - and since all are using velocityFromRotation, the latest pressed key will override the movement of the first.

Presumably, I could simply create functions for each diagonal as well, though I'm not entirely sure of what I'd pass to the velocityFromRotation method to achieve that - but even if that works, it would then presumably stop me making use of an analogue input type, as the diagonal logic would be hard coded. I'm not using an analogue input, but I'm trying to build my prefabs as 'drop-in' reusable as possible.

Here's my current code:

	Ship.prototype.moveForward = function() {
		// Move the player up
		this.game.physics.arcade.velocityFromAngle(this.angle - 90, this.speed, this.body.velocity);
	}

	Ship.prototype.moveBackward = function() {
		this.game.physics.arcade.velocityFromAngle(this.angle + 90, this.speed, this.body.velocity);
	}

	Ship.prototype.bankLeft = function() {
		// Move the player left
		this.game.physics.arcade.velocityFromAngle(this.angle + 180, this.speed, this.body.velocity);
	}

	Ship.prototype.bankRight = function() {
		// Move the player left
		this.game.physics.arcade.velocityFromAngle(this.angle, this.speed, this.body.velocity);
	}

 

[GaryS]

Nevermind, I found it.

The trick for me, was to record what the sprite is currently doing, and check against that in the function to manually adjust the angle.

So, I'm storing some variables in my update function - they get overwritten in the various movement functions:

this.movement.moving 	        = false;	
this.movement.movingForward     = false;
this.movement.movingBackward    = false;
this.movement.moving 		= false;

Then my movement functions look like this:

// Player movement
Ship.prototype.moveForward = function() {
	// Move the player up
	this.game.physics.arcade.velocityFromAngle(this.angle - 90, this.speed, this.body.velocity);
	this.movement.moving = true;
	this.movement.movingForward = true;
}

Ship.prototype.moveBackward = function() {
	// Move the player down
	this.game.physics.arcade.velocityFromAngle(this.angle + 90, this.speed, this.body.velocity);
	this.movement.moving = true;
	this.movement.movingBackward = true;
}

Ship.prototype.bankLeft = function() {
	// Move the player left
	this.game.physics.arcade.velocityFromAngle(this.angle + 180 - ((this.movement.movingForward ? -45 : 0) + (this.movement.movingBackward ? 45 : 0)), this.speed, this.body.velocity);
	this.movement.moving = true;
	this.movement.bankingLeft = true;
}

Ship.prototype.bankRight = function() {
	// Move the player left
	this.game.physics.arcade.velocityFromAngle(this.angle + ((this.movement.movingForward ? -45 : 0) + (this.movement.movingBackward ? 45 : 0)), this.speed, this.body.velocity);
	this.movement.moving = true;
	this.movement.bankingRight = true;
}

If you're wondering why I'm adjusting the angle by 90 degrees, it's because the sprite faces upwards, while Phaser seems to take 0 degrees as pointing right.