Let's Study Programming by Making Games: Pygame Unit 01

Hello again, greetings and welcome to Pygame Unit 01. Yes, we have started with Unit 00. If you are already acquainted with computer science and programming you may know about the fact that computers and by extension programmers start counting with 0. So it is a good opportunity to get used to it especially when we start using lists and their indices extensively.

Anyways, before we continue with some on screen movement, let's take a short glimpse at our last source file, particularly the few lines I've added to our bare bones code I added at the end of lesson 0.

First of all, you'll notice the line pygame.display.set_caption("Hello Pygame World!").
This command is very straight forward as it simply writes the we entered into the method right into the title bar beside our program icon (I'll also show you later how to customize the pygame icon as well).

The next line is a little more tricky: clock = pygame.time.Clock()

It creates a clock object that we use to measure time by calling clock.tick() each iteration of the main loop. Normally the loop would iterate as fast as our processor us to do so. This can actually turn into a major issue, as one computer may be faster than another, leading to sluggishly slow animations on one machine while having lightning fast motion on another leaving the player unable to react properly to the gameplay. This is not exactly one any budding game dev wants as a user experience.

By feeding in the value we stored in FPS, in this case 60, we can mitigate at least one part of the problem. This way each iteration of the main loop is capped to a maximum of 1/60th of a second giving effectively 60 frames per second as the upper limit.
It still may dip down occasionally depending on the number and complexity of the objects drawn to the screen, and floating point calculations done in the background etc, but for now this is the easiest way help us keep our frame rate roughly stable. Another method for frame rate independence is time based movement by multiplying the change in time called delta time as a factor to each object movement, scaling, transformation involved on the screen. But for now we'll stick to the easier method with fewer lines of code.

So, again hit the run button in your favorite IDE and be amazed of wonderful blue letters on a yellow background. Another point of notice is an additional event check in the event handler. This one refers to the pygame.KEYDOWN event and the if - statement scans for the particular pygame.K_ESCAPE key. This means, whenever you hit the escape button on your keyboard, you'll be able to instantly exit out of the loop. Just a neat little addition as a quick emergency exit button. There are many more scancodes for buttonpresses, input and game controller usage. We'll cover them later, promised.

Now it is about time to get some movement into our text.

First we'll create a couple of additional variables to account for the changing text postion, speed and direction.

Let's go just above our main loop and create text_x and text_y, assign SCREEN_WIDTH // 2 and SCREEN_HEIGHT // 2 as coordinates to them which will give our text intially a centered position on screen.

Beneath it, we'll give text_x_speed a value of 5 pixel per frame, so roughly about 300 pixels per second given a frame rate of 60 FPS.

Back in our main loop we'll slot in text_x and text_y variables as arguments into our draw_text function. Right beneath it, in order to change the text position with each loop iteration, we'll subtract text_x_speed from tex_x to move it to the left.

The expression text_x -= text_x_speed is equivalent to text_x = text_x - text_x_speed
This means that each loop iteration 5 is subtracted from text_x and stored back in text_x for usage in our draw text function.

By the way, if you haven't been aware of it by now, you may have noticed that coordinate system on our computer screen differs a bit from what we've learned back in high school. While the x axis behaves pretty much the same, the y axis is in fact reversed corresponding to a lower position on screen the higher the y value gets. This puts the point origin (0, 0) in the topleft of the screen rather than its classical cartesian math class equivalent that situated in the lower left corner. But no problem at all. With a little bit of experimentation and practice it's gonna be a piece of cake.

Alright. With these few lines done, we it should technically work. Once we run this, the text will indeed move to left, disappear at the screen border and just keep moving while out of view. Quite fine, but we want something a little more sophisticated, resetting its position and moving left within our viewport again.

To do that, we'll add another check beneath the text_x update.
if text_x < -500:
    text_x = SCREEN_WIDTH + 500

This introduces a threshold at the left hand side offscreen. Once the text_x variable is about 500 pixels to the left of our screen, we'll assign another value to it: 500 pixels to the right of the screen. And tada, our text object is teleported to the right, ready to fly by our screen anew. This repeats over and over until we decide to break out of the loop.

Alrighty then! This is all for the moment. But no worries! In our next exercise we'll create some more text objects, bounce them around on our screen, while getting familiar with object oriented programming based on classes and at some later point move them with keyboard input.
See ya next time. Have fun programming and keep at it!