PyGame Basic Series on Game Experiments

Basic Movement

Sat, 11 Jun 2022 13:52:15 -0600

Basic Kinematic Animation - Movement first

2D frame based animation (2D kinematic animation) is easier to explain so we will start there.

2D kinematic animation is controlling the movement of an object without physics involved. We simply move in a direction at set intervals. To keep the speed of the motion same on different size screens we need to take time into account. We will make use of the number Frames per second or more accurately the time difference between each frame (delta time) included in our distance calculation. Don’t worry its quite simple. We ‘animate’ our character by swapping the image with another image every few frames or fraction of a second.

Get an image to move

Lets start with an image that won’t change. I’m going to use Kenney’s website for the 2d art to download the car racing bundle. It’s free to use with option to support his efforts. The site and link above is https://kenney.nl/assets/racing-pack

Click the download Link Once downloaded, extract the files from the zip file and inside it is three folders. We want the png folder for our static image. Lets grab a car from the cars folder and place it with our code. I’m going to use the first one in my list “car_yellow_5.png”.

After a while you will start to see the folder and code get messy. This is part of this tutorial series and I'll show you one way to clean up the code and folders. For now lets continue to focus on the task at hand.

Our folder now has two files

Add the following code above the game loop

`1`	`car = pygame.image.load("car_yellow_5.png")`

And the following inside the game loop

1
2
3

# draw the car at position 0x 0y
screen.blit(car, (0,0))
pygame.display.update()

Your code will look like this (Notice indentation is an important part of code ‘blocks’)

import pygame
from pygame.locals import *
pygame.init()


screen = pygame.display.set_mode((800,800))

pygame.display.set_caption("Car Game")

screen.fill((60,220,0))
pygame.display.update()


car = pygame.image.load("car_yellow_5.png")

# game loop

running = True

while running:

    for event in pygame.event.get():
        if event.type == QUIT:
            running = False

    # draw the car at position 0x 0y
    screen.blit(car, (0,0))
    pygame.display.update()


pygame.quit()

To keep track of the car position we can simply keep track of the positon of the image and PyGame supplies that for us with image.get_rect().

Just below setting the car image to the variable car add the following.

`1`	`car_rect = car.get_rect()`

and change the screen blit of the car to

`1`	`screen.blit(car, car_rect)`

You may see that we are still drawing the top left of the car at 0,0. So lets center the rectangle of the car to the center of the screen.

Add the following to just below the assignment of car_rect

`1`	`car_rect.center = 800/2, 800/2`

Notice we are not changing the rect size but simply changing its center to the center of the screen. We could use the top corner, but the center will make more sense in a minute.

close the window - we run it each time, but we on need to run the most recent changes.

Let’s move it using code

We know that our screen is 800x800 so we want to travel about a 50 points every second - we can adjust later)

Do you know that velocity is the speed multiplied by the direction.

`1`	`velocity = speed * direction`

so we are going right, lets say thats direction (1,0) and we want to travel 50 points.

Lets change the center of the car by (50, 0) every frame. Add this code just before the car blit

1
2

X,Y = car_rect.center
car_rect.center = X + 50, Y + 0

run it … and quit

The screen looked a little like

There are two obvious things wrong! And 1 less obvious until you try on a slower computer.

the car draws over itself many times.
its too fast to see.
different computers have different speeds

Ok so we all know that speed is how fast we go per minute or per second. SO we can set our frames per second to 30 to limit the speed. But what if we ran this and the computer was only capable of 20 frames per second? The car would move slower.

Well we are going to draw the image every frame and if we know that length between frame drawings in time we can use that as our time (Time passed aka Delta Time).

fountunately this isn’t extra work for us, PyGame will give the time from the time between this one and the last frame using the same function to limit the frame rate.

Add the following at the top of the loop (just below the while)

`1`	`dt = clock.tick(30)`

this wont work unless we tell python what clock is so above that (above the loop anywhere after pygame is init-ialized) add the following

`1`	`clock = pygame.time.Clock()`

and we then use speed devided by dt. I.E. 50/dt

we change the code to look like this

1
2
3

X,Y = car_rect.center
speed = 50 / dt
car_rect.center = X + speed, Y + 0

That takes care of the speed - What about the drawing of the images?

Well its fairly simple - we need to draw our background first to clear the area below and then draw the car.

So We change the code again and just before the first blit in the loop we fill the screen with green again

`1`	`screen.fill((60,220,0))`

Now the movement is displayed correctly. Next we can adjust speed to work with other directions and go a little faster based on Key presses.

Getting Started with Pygame

Fri, 10 Jun 2022 19:00:13 -0600

This tutorial is for the beginner, the ‘PyGame Worm’ lessons are intermediate at a rough guess. IDK, those terms were never well defined when I started programming.

We dont teach the absolute basics of python here. You need to have a very basic understanding before you start these tutorials else you will be lost.

The style used here is code as we need, not the best method but a good way to try things out if you keep your changes small. We don’t use tests as that will distract from the lesson, but that will be taught soon.

Python relies heavily on indentation to correctly group blocks of code, but it doesn’t really care about space between lines of code.

Variables are mostly declared during first use by simple assignment.

We don’t go much deeper than that, so if you see a better way of doing things, good, but don’t email me, ok!

Using Python and Pygame to make games

download python from python.org and install

select the OS and architecture - desktops/laptops for windows are usually windows-amd64 Let it set environment variables if it asks and also to remove path length limits you likely need to reboot (You can also set up virtual environments but this tutorial doesn’t cover that)
Install Pygame

pygame.org gives instructions, though I find the following to work well Go into the folder you want to use for Python development and run terminal or cmd from there. (right click in the folder in windows and select “run terminal in folder”)

type in the following
python -m pip install -U pygame

Create a file in that folder and call it game.py. Windows users please enable file name extensions in windows explorer, or it will never work as you will have a name like game.py.txt which won’t work.
Using any text editor like Notepad (not WordPad) or an IDE like Visual Studio Code, we can open the file and edit.

From here on we switch between A) Notepad to edit and save our code B) and the terminal to run our code

Editing and running our game

Using Notepad type the following into your game.py file

import pygame
from pygame.locals import *

pygame.init()

# ... home of future code

#

pygame.quit()

and save the file (Ctrl and S keys at the same time)

This imports pygame into the running python game. Initializes it …. and then closes it cleanly.

If we run that it will briefly show us a window before it closes again.

Using the terminal we can run the game by typing

python game.py

Keep the window open until we close it

We now create one of the most important pieces of every game. The game loop.

Between pygame.init() and pygame.quit() we type the following

In python the # is the start of a one line comment

#game loop

running = True

while running:
    for event in pygame.event.get():
        if event.type == QUIT:
            running = False

We created a variable called running. The name running isn’t special, it just reminds us what it used used for. We set it to true.

The “while running” will keep looping until we change the variable running to False.

Everything indented immediately below the while is in the while “block” of code.

Adding in the pygame event allows the game to detects the window-close button “X”, and we set running to false. Setting running to False stops the looping as the while running is no longer True.

The code execution no longer loops over the while block and after completing the loop then drops down to the pygame close code.

Pygame close cleanly closes the pygame library code and we can then exit the game at the end of the file.

Save and run from the terminal as before. You should now get a windows that stays open until we close it.

Set title and background

Our Game needs a title and we would also like a background that looks like grass and not just white (unless you want a snow effect?)

Add this before the game loop

screen = pygame.display.set_mode((800,800))

pygame.display.set_caption("Car Game")

screen.fill((60,220,0))
pygame.display.update()

The code above:

Gets the screen surface are we will draw on and sets it to the size 800 by 800. We save it to a variable we have called “screen” so we can reference it again.

Sets the game title in the window to be Car Game.

Fill the screen surface with a color in RGB format in this case a shade of Green.

And finally update and draw the surface image to the computer display.

`1`	`What we have done here is create the basic framework for all our games.`