Sign up ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.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);
  shoot: function() {
        var angle = Math.atan2(player.x- mousePos.x, player.y - mousePos.y);
        radian: angle,
        speed: 6,
        x: player.x, //<-- Here
        y: player.y, //<-- And Here

function Bullet(I) { = 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.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?

share|improve this question
Why not have the gun store a "bullet spawn point" location? That way you can skip all the location math and just spawn the bullet at the spawn point location and assign a velocity. – Benjamin Danger Johnson Aug 5 '13 at 21:12
I think see what you saying, but the gun isn't actually a separate object from the player (really just one image with the gun attached to the player). I could store the distances where I wanted the bullets to be but I think I would still need to know the angle where the player/gun is. – fassetar Aug 6 '13 at 20:29

2 Answers 2

up vote 2 down vote accepted

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);
    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.

share|improve this answer
Worked thanks! Pulling out the old math books and keeping them close from now on. Once I saw your answer I knew why it worked. Now just I'm mad at myself for not seeing it ha-ha. – fassetar Aug 6 '13 at 1:18

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).

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.