Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by ArcadeHype

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.

1 decade ago by dominic

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's .angle already is in radians, otherwise just use .toRad() to convert (it'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'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't have to set .accel when you set .vel, and I'm not sure what the bulletOffSet was for.

1 decade ago by ArcadeHype

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.

1 decade ago by dominic

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.

1 decade ago by ArcadeHype

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.
Page 1 of 1
« first « previous next › last »