3D game development gets into another dimension of complexity, literally. But sometimes simple is better. Let’s see some simple math equations and structures used in 2D game development.
Point coordinate system
Unless you’ve got some highly fancy output implementation, using an integer-based coordinate system for resource placement should suffice.
(x,y) or (3,10)
Note: For the most part, we learned the Cartesian coordinate system in school. However, in game development, depending on your development environment and graphics engine, you might have to adjust the coordinate mapping. Normally, positive x and y coordinates are mapped in the upper-right quadrant of the Cartesian coordinate system. But in GDI+ or most computer rendering engines, mappings go from top left to bottom right. So positive points on most computer systems are mapped analogously to Cartesian’s bottom-right quadrant.
Size system
When you’re drawing resources to the screen, the interpreter needs to know how wide or how tall to draw something. Unless there is automatic detection, and if the interpreter was strict enough, you might get a zero-by-zero size rendered resource (essentially not visible), which defeats the purpose of “drawing” anything. Therefore, when used with a point coordinate system, you can not only properly position a resource but also ensure that it’s size is correctly rendered.
(width,height) or (32,32)
Note: In computer graphics, you’ll most likely be using the pixel measuring unit.
Rectangle system
To simplify access to any resource’s location and size, those two properties can be conjoined into a structure called a rectangle.
(x,y,width,height) or (3,10,32,32)
Calculating Trajectory
Wikipedia has some entries on trajectory and trajectory of projectiles. The algorithms there will apply to real-world physics. Unless you’re trying to create a simulator, there really is no point in using them all. However, concerning 2D coordinate mapping, you’ll want to get familiar with trajectory of a projectile.
Given the formula from Wikipedia:
g: the gravitational acceleration—usually taken to be 9.81 m/s2 near the Earth’s surface
θ: the angle at which the projectile is launched
v: the velocity at which the projectile is launched
y0: the initial height of the projectile
with the rough equivalent in coding as:
y = initH + [ x * tan(Angle) ] – { ( g * x2 ) / [ 2 * ( (v * cos(Angle))2) ] }
Note: Depending on your compiler, you will be using more or less brackets and maybe just parenthesis.
where
y = the next coordinate y-position in relation to the x-coordinate, given you know what x is
initH = the initial y-coordinate that the projectile is launched from; for example, if the player character were to shoot a projectile, it would be the player’s y-coordinate; but if the player character jumps, the init y coordinate would be the player’s bottom left rectangle coordinate (y + height) in relation to the ground. And be mindful that this formula is still based on Cartesian coordinates, so you will have to adjust it for your engine.
x = the given x coordinate
tan(Angle) = the tangent value of the initial angle the projectile was launched; if you want the farthest trajectory, 45 degrees is optimal; but you can actually use any angle to make the trajectory look better, you are in control. that eyeball or pill-looking O or 0 that represents the initial angle is called theta Θ .
g = speed of gravity; in regards to 2d game development, this is the change in increment to the y coordinate; you will not likely use 9.8 meters/second unless you’re creating a simulator.
v = initial velocity which the projectile was launched; similar to g, this is the change in increment to the x coordinate;
Scaling sizes
It’s important to know how to scale resources proportionally because you’ll need to handle a lot of the rendering whether it’s scaling sprites, maps, or even the screen.
A proportionate ratio can be written in pseduo-code as:
a:b as c:d
or
a/b as c/d
Here’s a more practical pseudo code:
width/height = newWidth/newHeight
So you want to find the newWidth given you know all the other values, assuming you want to scale to a size that uses the newHeight as your target height.
So to derive your newWidth, you need to get all the other values to the other side of the equal sign. You have to use multiplication identity concept. You want to get rid of d and d is the denominator of c, which means c is “divided” by d. If you multiply c/d by d, the d’s equal 1, leaving you with only c. But don’t forget that the other side must also be multiplied by d to get an identity equation. Here, check it out:
1. a/b = c/d
2. (a/b) * d = (c/d) * d
3. since (c/d) * d = c
4. therefore (a/b) * d = c
5. c = (a/b) * d or c = (a*d)/b
newWidth = (width*newHeight)/height
Otherwise, you could simply find the scale ratio of your target size:
target size resolution of screen is 640 by 480 which is equal to 1.33 (otherwise known as 4:3 or 4 to 3 aspect ratio in the display industry)
Then you multiply every sizing member of the resource by that scale. For example, if a player character was at coordinate (2,3), then the new rendering coordinate would be (2*scale,3*scale) = (2*1.33,3*1.33) = (2.66,3.99) = (3,4). The x-coordinate is a single member. The y-coordinate is another member. So each must be multiplied for precise scaling.
Collision detection
This is where rectangles become handy. Let’s take a look at the coordinates of any rectangle:
(x,y)-------------(x+width,y)
|-----------------|
|-----------------|
|-----------------|
|-----------------|
(x,y+height)------(x+width,y+height)
Top-left coordinate is x,y, in computer coordinates.
Top-right coordinate is x+width, y, in computer coordinates
Bottom-left coordinate is x,y+height, in computer coordinates
Bottom-right coordinate is x+width,y+height in computer coordinates
When two rectangles collide, you want to detect whether these “edges” touch or are the same. That is essentially what collision detection is. So if rectangle A’s right side came into collision with rectangle B’s left side, you would want to see if rectangle A’s top-right corner (x+width, y) was equal to rectangle B’s top-left corner (x,y).
If you want to simplify it more, you would just test their x values, so see if rectangle A’s x+width = rectangle B’s x.
Afterthoughts
And that’s essentially what a 2D game is. You’re moving around a bunch of resources on the screen as fast as you can. I won’t tell you how to optimize your implementation, but all game foundations are based on these principles. Once you realize the simplicity of the problem, then you can work on the complexities of it. Have fun creating your own 2D computer games… one step at a time, no less!
Tags: 2d, algorith, critical thinking, formula, function, game, math, problem solving