Understanding screen and internal coordinates

Before we move on to the actual C++ coding, let’s talk a little about coordinates. All the images that we see on our monitors are made out of pixels. Pixels are little tiny dots of light that combine to make the images we see.

There are many different resolutions of monitor but, as an example, consider that a fairly typical gaming monitor might have 1,920 pixels horizontally and 1,080 pixels vertically.

The pixels are numbered, starting from the top left of the screen. As you can see from the following diagram, our 1,920 x 1,080 example is numbered from 0 through to 1,919 on the horizontal (x) axis and 0 through 1,079 on the vertical (y) axis:

A specific and exact screen location can therefore be identified by an x and y coordinate. We create our games by drawing the game objects such as the background, characters, bullets, and text to specific locations on the screen. These locations are identified by the coordinates of the pixels. Take a look at the following hypothetical example of how we might draw at the approximately central coordinates of the screen. In the case of a 1,920 x 1080 screen, this would be at the 960, 540 position:

In addition to the screen coordinates, our game objects will each have their own similar coordinate system as well. Like the screen coordinate system, their internal or local coordinates start at 0,0 in the top left-hand corner.

In the previous image, we can see that 0,0 of the character is drawn at 960, 540 of the screen.

A visual, 2D game object, such as a character or perhaps a zombie, is called a Sprite. A sprite is typically made from an image file. All sprites have what is known as an origin.

If we draw a sprite to a specific location on the screen, it is the origin that will be located at this specific location. The 0,0 coordinates of the sprite are its origin. The following image demonstrates this:

Therefore, in the image showing the character drawn to the screen, although we drew the image at the central position (960, 540), it appears off to the right and down a bit.

This is important to know as it will help us understand the coordinates we use to draw all the graphics.

Important note

Note that, in the real world, gamers have a huge variety of screen resolutions, and our games will need to work with as many of them as possible. In the third project, we will see how we can make our games dynamically adapt to almost any resolution. In this first project, we will need to assume that the screen resolution is 1,920 x 1,080. If your screen resolution is higher, this will be fine. Don’t worry if your screen is lower than this as I have provided a separate set of code for each chapter for the Timber!!! game. The code files are nearly identical apart from adding and swapping a few lines of code near the beginning. If you have a lower-resolution screen, then simply follow the code in this book, which assumes that you have a 1,920 x 1,080 resolution. When it comes to trying out the game, you can copy and paste the code files from the low res folder in the first five chapters as appropriate. In fact, once the extra lines have been added from this first chapter, all the rest of the code will be identical, regardless of your screen resolution. I have supplied the low-resolution code for each chapter, just as a convenience. How the few lines of code work their magic (scale the screen) will be discussed in the third project. The alternative code will work on resolutions as low as 960 x 540 and so should be OK on almost any PC or laptop.

Now, we can write our first piece of C++ code and see it in action.