Bullet entry Point around Player Object

Question

I have a player rotating by the mouse and want the bullets line up with the player's gun. Right now they simply come from the point of the player and shoot in the direction of mouse. I just need the bullets to line up with the player's gun as he rotates, rather than at a fixed position. Sorry my math is a little rusty and not sure how to achieve this. I've marked the two spots where I know I need to change.

  var player = {
  x: (canvas.width/2),
  y: (canvas.height-60),
  vx: 0,
  vy: 0,
  Bullets: [],
  draw: function() {
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height-60);
    ctx.rotate(Math.atan2(mousePos.x-this.x, this.y-mousePos.y));
    ctx.drawImage(img, 0, 702, 42, 64, -21, -33, 42, 64);
    ctx.restore();
  },
  shoot: function() {
        var angle = Math.atan2(player.x- mousePos.x, player.y - mousePos.y);
        this.Bullets.push(Bullet({
        radian: angle,
        speed: 6,
        x: player.x, //<-- Here
        y: player.y, //<-- And Here
      }));
    }
};

function Bullet(I) {
  I.active = true;
  I.radian = Math.atan2(player.x- mousePos.x, player.y - mousePos.y);
  I.xVelocity = -I.speed * Math.sin(I.radian);
  I.yVelocity = -I.speed * Math.cos(I.radian);
  I.width = 3;
  I.height = 3;
  I.color = "#000";

  I.inBounds = function() {
    return I.x >= 0 && I.x <= canvas.width &&
      I.y >= 0 && I.y <= canvas.height;
  };

  I.draw = function() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.active = I.active && I.inBounds();
  };
  return I;
}

I have tried using the following,

x: Math.cos(mousePos.x- player.x),
y: Math.sin(player.y - mousePos.y),

But the bullets only comes from the top left screen (with the mouse click on the bottom right). Would it have to do with the translate that I doing on the player?

Answer 1

You need to set the bullets position to the position of your player and then add a step into the right direction to land on your gun. Like so:

shoot: function() {
    var distance = 1; // here you need the distance of the gun from the center of the player
    var angle = Math.atan2(player.x- mousePos.x, player.y - mousePos.y);
    this.Bullets.push(Bullet({
    radian: angle,
    speed: 6,
    x: player.x + distance*Math.sin(angle),
    y: player.y + distance*Math.cos(angle),
  }));
}

When you are rendering the player you are restoring the transformation right afterwards, so I don't think it has to do with that.

Answer 2

A common approach to this problem, and many others, is to define "attachment points" (also called "hard points" or "nodes" or a million other things) to your model/sprite definitions. These are artist-defined locations on the model such as "left foot" or "head" or such. They are usually attached to the skeleton or other animation data (each frame for sprites).

You can then locate specific points on your character or items. The gun (or the character If your gun is baked into the model/sprite) can have a "muzzle" location. You can then find the muzzle location to know exactly where the end of the gun's barrel is and not need to hard-code locations; if the art changes or you add new characters or enemies or anything, the code just automatically finds the location the artist declared as the muzzle and everything just works with no further work. You can even add orientation information so you know which way to fire the project based on the model design, frame of animation, etc.

The other points can be used for all kinds of things, too. They can be useful for physics, equipment, visual effects, and so on. In 3D it's common to have the hands defined for a character so you know where to attach a gun model such that you can have a wide variety of characters and guns and they all just work together, and then you can query the gun's muzzle location/orientation in world space (transformed based on how its attached to the character, the pose the character is in, and where the character is).