Games: 2-D Gaming Math

Just some notes on game creation. This is a post that will grow as I learn more.

I'm using Javascript examples here.

----

2-D Game Basics

2-D gaming exists on a plane.

The plane will have dimensions of width and height. Width is referred to as variable "x" and height is referred to as "y".

A typical display on a computer screen will refer to positions on a grid in a left-to-right and top-to-bottom manner. That means that the top-left corner pixel of the screen or canvas will be at (0,0). Higher x numbers will move the reference to the right, and higher y numbers will move the reference down.

Negative numbers will typically refer to values that are either above or to the left of the screen or canvas, and are typically unseen or off-screen. The same goes for values that are larger than the x and y  dimensions of the canvas or screen.

So, moving across space on the plane means you would add or subtract values for x and y.

x = x + 1; // Moves right
x = x -1; // Moves left
y = y + 1; // Moves down
y = y -1; // Moves up

-----

Distance Between Two Points on a Plane

Using two points at (x1,y1) and (x2,y2), you can determine the distance between two points by using this formula:

distance = Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2));

This is the same as A^2 + B^2 = C^2 -- also refers to the hypotenuse of a right triangle. Note that Javascript does not use the carat notation for powers.

-----

How to Move Diagonally Toward a Specific Target Point?

You might be happy with moving just up and down, or left and right, or you might want to move diagonally. However, if you want to move the equivalent of 1 unit distance in a diagonal manner, you cannot do so simply by adding 1 to both x & y, because you will then be moving further than 1 unit. In terms of trigonometry and a 45 degree angle.

Wrong Formula for Moving 1 Unit Diagonally

Math.sqrt( Math.pow(1,2) + Math.pow(1,2)) = 1.4142;

// SQUARE ROOT OF 2 IS NOT 1 UNIT DISTANCE

So, you need to use a different formula that will instead measure the 1 unit distance around the point of origin -- like you were drawing a circle on grid paper using a compass or a pencil and a piece of thread.

Formula to Move Diagonally Toward an Object

this refers to the current object.

target would be object we want to move toward.

velocity represents the distance that we want to move away from a location. (Ex. 2 would be faster than 0.5.)

// DETERMINE WHAT DIFFERENCES ARE BETWEEN X & Y
// (AKA ADJACENT AND OPPOSITE SIDES OF A TRIANGLE)
// AND IF THEY ARE POSITIVE OR NEGATIVE
directionX = (target.x - this.x);
directionY = (target.y - this.y);

// USE TRIGONOMETRIC ARCTANGENT TO GET THE ANGLE
// USING THE SIDE MEASURMENTS OF THE TRIANGLE
angle = Math.atan(directionY, directionX);

// USE TRIGONOMETRIC SINE AND COSINE TO GET A POSITIVE OR NEGATIVE
// VALUE OF THE DISTANCE OF THE NEW LOCATION
velocityX = this.velocity * Math.cos(angle);
velocityY = this.velocity * Math.sin(angle);

// CHANGE VALUE OF THE CURRENT POSITION OF X & Y
// BY ADDING THE DETERMINED VALUES
this.x += velocityX;
this.y += velocityY;

Difference Between Degrees and Radians

In school, you learn early on that directions can be measured in and arc of degrees -- 360 degrees = one full rotation.

You also learn that the circumference of a circle is 2 * PI * radius, or 2πr. That means if you take the radius (half distance across a circle) and lay it across the top of the circle, the radius would be used approximately 3.14 times for a half-circle. or 6.28 times for a full circle.

Using the radius as a unit of measurement is also called a "radian." So, there are 2*PI radians around a circle.