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 monitor resolutions but, as an example, a fairly typical gamer's monitor might have 1920 pixels horizontally and 1080 pixels vertically.

The pixels are numbered starting at the top left of the screen. As you can see from the next diagram, our 1920 x 1080 example is numbered from 0 through to 1919 on the horizontal (x) axis and 0 through 1079 on the vertical (y) axis.

A specific and exact screen location can therefore be identified by x and y coordinate. We create our games by drawing game objects such as 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 this next hypothetical example of how we might draw at, approximately, the central coordinates of the screen. In the case of a 1920 x 1080 screen this would be at position 960, 540.

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

We can see in the previous screenshot 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 at a specific location on the screen, the origin will be located at this specific location. The 0,0 coordinates of the sprite are the origin. The next screenshot demonstrates this.

This is why, in the screenshot 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.

We just need to bear in mind how this works as we progress through the first project.

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 second 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 1920 x 1080. Don't worry if your screen is different to 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 the book that assumes a 1920 x 1080 resolution and when it comes to trying out the game you can copy and paste the code files from the low res folder in each of Chapters 1 to 5, as appropriate. In fact, once the extra lines have been added in this first chapter, all the rest of the code will be identical regardless of your screen resolution. I have supplied the low-res code for each chapter, just as a convenience. We will discuss how the few lines of code work their magic (scale the screen) in the second project. The alternative code will work on resolutions as low as 960 x 540 so should be good on almost any PC or laptop.

Now we can write our first C++ code, and very soon we will see it in action.