1

When I was working as a programmer for a community college, there was a day when some kids came in to visit. I got the chance to talk to one of them and he was asking about games and how to make them. We got onto the subject of math and how important it is to games. I tried to explain movement to him but I had to start somewhere and that’s the coordinate system. Trying to come up with a way to explain it I decided to go with something everyone out of kindergarten should be familiar with, the number line. When we make 2D games we use a coordinate system which is essentially two number lines which cross each other. The number line is our playground. For 3D games, there’s three number lines and that’s really the main difference.

## The Number Line

The number line is a line that has a zero in the middle. It has evenly spaced negative numbers to the left of the zero. It has evenly spaced positive numbers to the right of the zero. The number line, in mathematics, stretches to infinity on both sides. When programming games, this is not necessarily true.

This line that stretches left and right is usually denoted as the X-axis.

Two-dimensional graphics use two axes. The X-axis which stretches left and right and the Y-axis that stretches up and down.

1

While you can make games without using the number line, it is essential in any game that involves graphics and animation.

We can do many things with number lines. Here are a few examples.

## Screen Coordinates

At a low level, you might have to deal with screen coordinates. This happens if you’re not using a game or graphics engine and are rolling your own.

The top left pixel of the screen is denoted as zero on the X-axis and zero on the Y-axis. To the right, each successive pixel is a number higher on the X-axis. As you move down from the top, each successive pixel is a number higher on the Y-axis.

We write these as pairs of numbers as a couple, (x, y).

Screens have widths and heights. A typical desktop screen might be 1920 pixels on the X-axis and 1080 pixels on the Y-axis.

I can draw a 100 pixel by 100 pixel image on the screen at 300 pixels to the right and 200 pixels down from the top left corner by putting the image at (300, 200).

## Image Coordinates

Image Coordinates are similar to screen coordinates and most often start at the top left as (0, 0).

Often, the handle of an image is the top left corner. That means when we want to place an image somewhere, we figure out where we want the top left corner to be and that is the position we use. The alternative would be placing the center of the image. This is important in game programming because often a character or object is placed in the center of an image and it makes more sense to us. There are ways around placing an image by the top left that we will learn later.

## World Coordinates

World coordinates are usually something we, as programmers, design. It is different from screen and image coordinates. We can choose (300, 300) to be the center. We can say the X-axis goes up and down and the Y-axis is negative to the right of the zero.

We don’t always have to go to the trouble of dealing with world coordinates but the concept does open up a lot of interesting techniques.

Suppose we have a world where we place a lot of objects. Each object has a position (x, y). When we move our character, we can do a search through our objects and find which ones have world coordinates near to our character. Then we can draw just these objects. This saves us time and resources.

It allows us to build a bigger world than could be placed on one screen.

The trickiest part about using a world coordinate system is that world coordinates sometimes need to be translated to screen coordinates. Sometimes image coordinates need to be translated into world coordinates then into screen coordinates.

It can be a mess.

## Events and Time

This is a more abstract use of number lines. It is used for designing rather than programming games. We can use a timeline to visually describe when things are going to happen in our game. A timeline is just a number line where the numbers represent time.

## One thought on “Really Basic Basics – The Number Line”