Forums » Help » Rotating a player entity to a specific angle from its current direction

First off, apologies if the question I ask is silly or vague. This is my first post on the board, and I'm having some trouble wrapping my head around how some things work.

I'm currently working on a top/down shooting game (think Geometry Wars). I'm changing the animation angle of my player ship to make it face the direction that the player presses. That works in a very crude way, but what I'd like to do is have the ship rotate from its current position to the new one. So if the ship is traveling upwards and the player presses left, the ship would visually rotate 90 degrees to the left (rather than instantaneously just start facing left). I'd also like to have the animation work diagonally as well, but that might be a separate issue. Here's my current player update function:

update: function() {
		var accel = this.accelSpeed;
		if( ig.input.state('left') ) {
			this.accel.x = -accel;
			//this.currentAnim.angle -= Math.PI/.7 * ig.system.tick;
			this.currentAnim.angle = 4.71238898;
		}
		else if( ig.input.state('right') ) {
			this.accel.x = accel;
			//this.currentAnim.angle += Math.PI/.7 * ig.system.tick;
			this.currentAnim.angle = 1.57079633;
		}
		else {
			this.accel.x = 0;
		}
		if( ig.input.state('up') ) {
			this.accel.y = -accel;
			this.currentAnim.angle = 0;
		}
		else if( ig.input.state('down') ) {
			this.accel.y = accel;
			this.currentAnim.angle = 3.14159265;
		}
		else {
			this.accel.y = 0;
		}
		if( ig.input.state('shoot') ) {
			ig.game.spawnEntity( EntityStandardBullet, this.pos.x, this.pos.y, {flip:this.flip} );
		}
		this.parent();
	}

As you can see, I tested out some code for rotating the ship manually, but I'm not sure how to use that to make it happen automatically based on the direction the ship is moving. Any help would be appreciated!

Not tested but I think this will bring you closer to your goal:

thrust: 0,
rot: 0,
step: 1,

update: function()
{
	// dampening
	this.thrust *= 0.95;
	if (this.thrust < 0.1) this.thrust = 0;
	this.rot *= 0.95;
	if (this.rot < 0.1) this.rot = 0;

	// intents
	if (ig.input.state('ahead')
	{
  		this.thrust += this.step;
	}

	if (ig.input.state('right')
	{
  		this.rot += this.step;
	}
	else if (ig.input.state('left')
	{
  		this.rot -= this.step;
	}

	// orientation
	this.currentAnim.angle += this.rot.toRad();

	// application
	this.accel.x = Math.cos(this.currentAnim.angle) * this.thrust;
	this.accel.y = Math.sin(this.currentAnim.angle) * this.thrust;

	// delegation
	this.parent();
}

Thanks for the reply. I tested out the code a bit... it definitely needs a bit of work, but it's mostly functional right off the bat, so thank you. Unfortunately I don't yet understand how to use it the way I need to... it looks like it's solving the problem by changing to asteroids-like rotation-based controls, which I don't want to do.

Perhaps now that I've thought about it I can better explain what it is I need to know. I want the player to be able to press one of eight directions (up, down, left, right, diagonals) and have the ship move that way. I will also have bullets fired move the direction the ship is facing. However (this is key), since the ship will not immediately be facing the new direction, I imagine it will need to be based on where the front of the ship is rather than simply the ship's velocity on a certain axis.

From what I understand, using .angle to rotate only rotates the current animation, not the actual entity itself. Unless there's a way I can also track where the front end of the animation is facing (initial thought was to use .pivot somehow), I have a feeling there might not really be a way to do this.

To launch a moving entity in the direction the player is facing, here's some more (untested again) code:

// attack
if (ig.input.state('shoot')
{
	// cache
	var cos = Math.cos(currentAnim.angle);
	var sin = Math.sin(currentAnim.angle);

	// our center
	var cx = this.pos.x + this.size.x/2;
	var cy = this.pos.y + this.size.y/2;

	// just in front of us
	var dist = Math.max(this.size.x, this.size.y);
	var x = cx + cos * dist;
	var y = cy + sin * dist;

	// launch
	var b = ig.game.spawnEntity('EntityMissile');
	b.pos.x = x - b.size.x/2;
	b.pos.y = y - b.size.y/2;
	b.vel.x = cos * b.thrust;
	b.vel.y = sin * b.thrust;
}