Question

I’m working on a top down shooter HTML5 game. I’m currently trying to get bullets to fire from my characters facing angle.

My character always faces the mouse position (rotates). So, when I fire a bullet, I need to take the rotation into account.

I’m almost there, the only problem is that the bullets initiate where my actual mouse position is, although – it moves in the correct facing direction.

I believe my math is off within my velocity variable:

var b = new Rectangle( this.x + (this.width / 2) - 4, this.y + (this.height / 2) - 4, 8, 8);

var velocityInstance = new Vector2(0, 0);
velocityInstance.x = input.mouseX - (this.localX + this.width/2);
velocityInstance.y = input.mouseY - (this.localY + this.height/2);

var bulletInstance = new Bullet(velocityInstance, b, this.bullets.length + 1);

this.bullets.push(bulletInstance);
this.shotBullet = true;

‘this’ refers to my Player. localX/Y is the centre position of my character (he’s always in the center of the screen, and the scene moves around him).

Would appreciate if someone could check this for me. Thanks!

—— EDIT ——

Here is my Bullet function:

Bullet = function(vel, rectangle, index){

    this.velocity = vel;
    this.rect = rectangle;
    this.index = index;

    this.Update = function(){
        this.rect.x += this.velocity.x;
        this.rect.y += this.velocity.y;

        //Collisions
        for(var c = 0; c < GameObjects.length; c++){
            if(this.rect.Intersects(GameObjects[c])){
                console.debug("Bullet Hit: " + GameObjects[c].tag);

                //Player.bullets.splice(index, 1);
            }
        }
    };

    this.Draw = function(ctx){

        this.rect.Draw(ctxMap);
    };

};

Answer 1

Actually, I would recommend not using trig functions, simply for efficiency. Math.atan2, Math.cos, and Math.sin can get expensive.

You already have (slightly renamed)

var deltaX = input.mouseX - (this.localX + this.width/2);
var deltaY = input.mouseY - (this.localY + this.height/2);

Why not simply jump this way?

var magnitude = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var velocityScale = bulletSpeed / magnitude;
velocityInstance.x = deltaX * velocityScale;
velocityInstance.y = deltaY * velocityScale;

Its functionally the same, but uses only one Taylor series instead of 3, so should be much more efficient. Faster is better, right?