Forums » Help » Position bullets with rotating spaceship

Just wondering if someone could give me some ideas on how i can properly position my bullets so they project from the tip of my spaceship. Currently the bullets are being projected from the center of my ship. They are firing in the correct direction based on the angle of my ship but i cant seem to position them correctly as i want.

Not sure if i am being clear enough but you should get a better idea after seeing the demo: http://www.html5gameblogs.com/games/asteroids/

Here is the code i am using to create the bullets:

if( ig.input.pressed('shoot') ) {
	ig.game.spawnEntity(EntityBullet, this.pos.x, this.pos.y);
}

EntityBullet = ig.Entity.extend({
		
		//bullet properties
		size: {x: 18, y: 29},
		animSheet: new ig.AnimationSheet( 'media/bullet.png', 18, 29 ),
		maxVel: {x: 800, y: 800},
		bulletOffSet: 55,
		
		//collision types
		type: ig.Entity.TYPE.NONE,
		checkAgainst: ig.Entity.TYPE.B,
		collides: ig.Entity.COLLIDES.PASSIVE,
		
		init: function( x, y, settings ) {
			
			this.parent( x, y, settings );
			this.vel.x = this.accel.x = Math.cos((ig.game.player.angle*Math.PI/180) + this.bulletOffSet) * this.maxVel.x;
			this.vel.y = this.accel.y = Math.sin((ig.game.player.angle*Math.PI/180) + this.bulletOffSet) * this.maxVel.y;
			
			this.addAnim( 'idle', 0.2, [0] );
			//rotate the angle of the animation sprite
			this.currentAnim.angle = ig.game.player.angle*(Math.PI/180);
			
		},
		
	});

Any help is appreciated, thanks.

Cool looking game!

You need a bit of math to spawn the bullet at a rotated (to the ship's angle) and translated (forward to the ship's nose) point.

// Find the center of Player and move the bullet foward by 20px,
var forward = 20;
var sx = (this.pos.x + this.size.x/2) + (Math.cos(this.angle) * forward);
var sy = (this.pos.y + this.size.y/2) + (Math.sin(this.angle) * forward);

ig.game.spawnEntity(EntityBullet, sx, sy, {angle:this.angle});

This assumes your player&039;s #.angle already is in radians, otherwise just use .toRad() to convert (it&039;s a shorthand for the #*Math.PI/180):

var sx = (this.pos.x + this.size.x/2) + (Math.cos(this.angle.toRad()) * forward);
var sy = (this.pos.y + this.size.y/2) + (Math.sin(this.angle.toRad()) * forward);

Also note that I&039;m passing the player's angle to the Bullet entity in the settings parameter ({angle:this.angle}). This will directly set a #.angle property on the Bullet entity in the this.parent(); init.

init: function( x, y, settings ) {
	this.parent( x, y, settings ); // This will write the .angle property to 'this'

	this.vel.x = Math.cos(this.angle.toRad() * this.maxVel.x;
	this.vel.y = Math.sin(this.angle.toRad() * this.maxVel.y;
	
	this.addAnim( 'idle', 0.2, [0] );
	//rotate the angle of the animation sprite
	this.currentAnim.angle = this.angle.toRad();	
},

Again, mind the .toRad() if you need it. Also, you shouldn&039;t have to set #.accel when you set .vel, and I&039;m not sure what the #bulletOffSet was for.

Hey Dom,

Thanks for the help. I implemented the code you suggested and got an unexpected result..have a look: http://www.html5gameblogs.com/games/asteroids/

Not sure if i missed something or if there is something incorrect in the code.

You should be able to review the latest code here:
http://www.html5gameblogs.com/games/asteroids/lib/game/entities/player.js

Thanks.

Well, the velocity is rotated +90°, so I suggest you rotate it -90° or -Math.PI/2 radians :) You could also rotate the sprites in your spritesheet.

Hey Dom,

I modified the velocity like so:

this.vel.x = (Math.cos(this.angle.toRad()-Math.PI/2) * this.maxVel.x);
this.vel.y = (Math.sin(this.angle.toRad()-Math.PI/2) * this.maxVel.y);

The direction of the bullet is correct now but the bullet still doesn't line up at the tip/nose of my ship.