Pixel Coordinates and Pygame Objects By albro

In this section, I want to talk about the most basic concepts of making games with pygame, namely pixel coordinates, various pygame objects.

Coordinates in games

The coordinate system is basically used to place or find the place of an object in space. This space may be 2D or 3D. It can be placed in space by determining the coordinates of the object. In general, a coordinate system is a way to assign numerical coordinates to geometric points. In 2D, each point corresponds to a pair of numbers. In 3D, each point corresponds to a triple number, and so on.

The coordinate system we were introduced to in school and university used an ordered pair to locate or represent a point. Ordered pair means two numbers whose order is important. The first number is called the X coordinate and the second number is called the Y coordinate. There are different coordinate systems (Cartesian, polar, etc.). The Cartesian coordinate system was developed in the 17th century by a French mathematician named René Descartes. It is possible to convert the coordinates of a point from one system to another.

In game development, we must use a coordinate system to place images, draw shapes, place buttons and texts, and in general to determine the position of anything. In this part, we use the pixel and box coordinate system.

Pixel and box coordinates

Games use their own special coordinate system called pixel coordinates. In addition to this system, we also use box coordinates.

The Hello World app I covered earlier was a simple window. This window is made up of small square dots that we call pixels. Each pixel is black by default but can have other colors. We can use these pixels to show the location of objects. In this case, a shape occupies many pixels when placed in the window. So what should we do to show this shape?

The solution to this problem is to use only two pixels out of the countless pixels that occupy the image. These two pixels are in the upper right corner of the image. Look at the figure below:

In the image above, the coordinates of the upper left corner of the white box are (70,65). (Look at the good picture) The coordinates of the upper left corner of the window are (0,0). The first number is for X and the second number is for Y. (This image is related to one of the games I want to write.) The difference between pixel coordinates and Cartesian coordinates is that, in pixel coordinates, the positive direction of the Y axis is downward. Look at the image below to understand better:

So, in this system, if we move in the Y direction and if we go down, the value of Y will increase and if we go up, Y will decrease.

Box coordinates

Suppose that instead of a screen object or window that is 400 pixels height and 300 pixels width, we have another screen object that is 8 pixels by 8 pixels. If we enlarge this small 8x8 screen so that each pixel looks like a square in a table and consider numbers for the X and Y axis, then a good representation of the screen object can look something like the image below :

Using the Cartesian coordinate system, we can find the location of a particular pixel. In the image above, each column of the X axis and each row of the Y axis has a specific address. This address is an integer between 0 and 7. (because we have eight squares numbered from 0 to 7) the location of each pixel can be found by specifying two integers in the X and Y axes. For example, in the 8x8 image above, we see that the pixels are at the following points:

• (4,0),(2,2),(0,5),(5,6) : black pixels
• (2,4) : gray pixels

Note that the first number is for the X coordinate and the second number is for the Y coordinate. Pygame usually displays the coordinates as a tuple of two integers such as (4,0). As you can see, working with box coordinates is easier. But it cannot always be used.

So we conclude that to determine the location of an image, an object, a shape, etc., we have two methods of pixel and box coordinates. We can use any of them according to our needs. You can even use both of them in one game.

pygame objects

I have mentioned below with some examples of pygame application objects. These objects are very useful and are actually joints that connect different parts of the game. Below we will get to know three examples of them.

surface objects

Surface objects are objects that represent a 2D rectangular image. In many ways, the screen is like a blank piece of paper that you can draw on. So the window that I drawed in the previous parts is an object. The name of this object is Surface object. The pixels of the Surface object can be changed by calling Pygame's draw functions and then rendering them on the screen. The border around the window, which we call border, the title bar and the buttons are part of the Surface object. Surface object by calling pygame.display.set_mode is created. Anything drawn in the Surface object or the same window by calling pygame.display.update is shown on the window.So, we create the Surface object with pygame.display.set_mode and display it in the window with pygame.display.update.

Any changes you make to the window actually happen in the background and are not displayed on the actual screen that the user sees until we call the update or flip methods. The update method redraws the page with all the changes made in the background. This method has an optional parameter that allows us to update only a specific part of the screen (the update method does this using a Rect object that represents a rectangular area on the screen). The flip method always refreshes the entire display (and thus does exactly the same thing as update() with no parameters).

Frame rate

Usually, the program draws several different things to a single Surface object. After each iteration of the loop we have drawn everything in the Surface object then we can draw it on the screen. We call all the drawing operations in each repetition of the frame loop and it is exactly like the image recorded on a DVD. The computer can draw frames very quickly. Usually our programs run at 30 frames per second, which is called "frame rate".

Rect objects

pygame has two ways to display rectangular areas (just like there are two ways to display colors). The first method is to use four integers:

1. X coordinate from the upper left corner
2. Y coordinate from the upper left corner
3. Width of the rectangle
4. Height of the rectangle

That is, we have:

(X,Y,WIDTH,HEIGHT) => The rectangle is specified with 4 numbers

The second way is as a pygame.Rect object, which we call Rect objects for short. For example, the following code creates a Rect object with an upper-left corner at (10, 20) that is 200 pixels width and 300 pixels height:

>>> import pygame
>>> spamRect = pygame.Rect(10, 20, 200, 300)
>>> spamRect == (10, 20, 200, 300)
True

The useful thing about this is that the Rect object automatically calculates the coordinates for the other properties of the rectangle. For example, if you need the X coordinates of the right edge of the pygame.Rect object that we have stored in the spamRect variable, you can use the right object as follows:

>>> spamRect.right
# 210

The Pygame code for the Rect object automatically calculates that if the left edge at X coordinate is 10 and the rectangle is 200 pixels wide, then the right edge at X coordinate should be 210. If you reset the right property, the other properties are automatically recalculated:

>>> spam.right = 350
>>> spam.left
# 150

Clock Object

The Clock object is used to track time. In particular, it can be used to define the frame rate for a game. The number of frames per second. This is done using Clock.tick. This method should be called only once. For example, calling clock.tick(30) will run the program at 30 frames per second.