About Math for 2D Game Development

The math you need to make a 2D game move, aimed at someone who has not written one before.

Two dimensions are not a simplified version of anything. They are where the ideas are visible. A direction is two numbers you can see on screen. A rotation is one angle. A collision is two shapes overlapping in a picture. Nothing is hidden behind a convention you have to take on trust.

Every section is built the same way: the mathematics first, on its own terms, with a figure you can drive. Then the same idea as code you can watch run on the page. Then, where it matters, a short note on what an engine calls it.

There is nothing to install, nothing to download, and nothing to open a console for.

The demos use the browser’s 2D canvas, which is deliberate. It is the plainest drawing API there is - moveTo, lineTo, fillRect - so the code under each scene reads as arithmetic and a few drawing calls rather than as a graphics library. You can follow it without knowing what a scene graph or a mesh is.

Each section has a bordered panel or two. Where the idea has something to show, the panel opens with a scene you can drive with a slider or a checkbox, and the code that draws it sits underneath. Where the point is a number rather than a picture, the panel is the code and a short list of what it produced - computed while this site was built, using that exact code, so it is what happened rather than what should happen.

Deliberately little, and that is the point of starting here.

• Algebra Basics - rearranging and solving an equation.
• Geometry - coordinates, and the Pythagorean theorem. Used constantly.
• Trigonometry, the first half - sine, cosine, tangent, and the unit circle. Needed from Part 2 onward. You can start Part 1 without it.

That is all. No Linear Algebra, no Calculus. Links to each are in Core Mathematics, and any section that leans on something says so and links to the Core section that builds it.

• The screen and its coordinates - world space versus screen space, why Y usually points down, and how that one convention flips half your intuitions about “up”.
• Vectors - a place versus a displacement, length, distance, normalizing, and the dot product as a facing test.
• Turning and aiming - the 2D cross product and which side of a line something is on, atan2, rotating a point, and turning the short way round instead of the long way.
• Transforms and cameras - translate, rotate and scale, why the order matters, parent and child spaces, and converting a mouse click into a world position.
• Time and feel - frame-rate independence, easing, and moving along a curve. This is where a game stops feeling stiff.
• Collision - circles, boxes, segments and convex polygons, then what to do once you have found an overlap.
• Physics - velocity and gravity without calculus, and a jump solved backwards from the height and airtime you actually want.

It ends with a capstone: a 2D platformer character with a camera that follows properly, assembled from the pieces, with each piece traced back to the section that built it.

Move the sliders. Where a control exists, the control is the section. Reading that a dot product goes negative behind you is worth less than sweeping a vector past 90 degrees and watching the sign flip.

Build the small thing immediately. Every section has something you can write in under twenty lines. A working “turn toward the target” that you wrote yourself teaches more than a chapter about angles.

Trust your eyes for bugs and the math for correctness. 2D is unusually forgiving here: a wrong sign is visible instantly, because the sprite goes the wrong way. Use that. But when something almost works, go back to the math rather than adding another minus sign until it looks right.