# How to get projectile direction vector in a 2d grid?

I am having trouble figuring out how to trace the path of my projectiles in an Asteroids clone. Currently the ship is locked to the center of the screen and can be rotated a full 360 degrees. I know the angle the ship is pointing at any given time, but I am not sure how to calculate the vector that the projectile should use for its trajectory. I know that I can find the correct vector by subtracting the end point from the start point.. but the issue is that I do not know the end point. Theoretically.. the end point is whenever the projectile touches the edge of the screen or some object. This is the current game code: https://jsfiddle.net/m6sxrk8w/ just using a hardcoded movement vector of {x:-1, y:-1}. Can anyone give some advice on how to dynamically determine the true vector given the current direction of the ship? There must be some simple math I am missing here...

To find the unit vector from the angle you want to use cosine(angle) for the x-component and sin(angle) for the y-component. The angle must be in radians. You can convert from degrees to radians by dividing degrees by 180 * PI.

radians = degrees / (180 * Math.PI);

• So for example, if the ship is pointing at a .9 radian angle from the y-axis... the direction movement vector would be {x=cos(.9), y=sin(.9)} ? – JParrilla Jun 6 '19 at 18:32
• Yes, and it's a unit vector, meaning it has a length of 1. So you can scale it for distance / velocity or whatever you like. position.x += cos(radian) * distance; – SquidJelly Jun 6 '19 at 20:02
• They both should be correct. – SquidJelly Jun 6 '19 at 20:11
• So the formula you suggested works.. but for some reason it is always shifted by 90 deg. I am setting the x,y vector like so: projectiles[i].x += Math.cos(toRads(ship.direction)); projectiles[i].y += Math.sin(toRads(ship.direction)); I guess I have to somehow shift this result by 90 deg to actually get the correct direction? For example when my ship is pointing at 0, the shot goes in the 90 direction, when I am pointing at 90, the shot goes straight down to 180 – JParrilla Jun 6 '19 at 21:53
• It sounds like the front of your ship in your image isn't facing angle 0. So you can rotate the image to face right, or yes simply add/subtract from the angle before you convert it to radians. – SquidJelly Jun 7 '19 at 1:13

This is a maths problem that I had myself a few years ago.

You have two 2d vectors in pixel coordinates: shootOrigin=(centerX,centerY); mousePosition=(mouseX, mouseY); shootDirection = Vec2.Normalize(mousePosition-shootOrigin);

The normalization of the 2d vector is very important here to get the bullets to travel at constant speeds. when shooting a projectile you just say bulletPos=bulletPos+shootDirection; every update frame and then check if the Vector2.Distance(bulletPos,enemyPos); from enemy to bullet is smaller than certain value.

I totally recommend you to read the first chapter of the book "Programming Game AI by Example" because its about the maths behind npc agents and basically how to use vectors for game development.

EDIT: I just saw its about rotating the ship with keyboard input so you just modify the angle of the ship instead of using the mouse as the shooting direction and therefore need to calculate the direction vector x,y from radians angle like suggested. The principle stays the same: calculate the normalized direction vector and apply it every frame to the bullets position. If you spawn a bullet it is even better if you create an bullet object that knows its velocity, direction and has an updateMove method implemented, otherwise your bullets will be rotated while flying because the direction might change through user inout (arrow keys).