🚀 A Starter Guide to Pygame 📀
eankeen (614)

🚀 A Starter Guide to Pygame 📀

Pygame is an open-source library for making graphical applications with Python. Learn more about it on the official website.

This tutorial is intended to help you setup a very basic Pygame interface. It's for Python beginners or people who want to quickly bootstrap a Pygame project. Find more about Repl.it's GFX public beta announcement here. So let's get started!

We're going to be building a simple screen saver. The final result will look like the following

Starting out

When creating a new project, be sure to select "PyGame" when creating a project.

Now we're ready to start writing some code!

Painting the Screen Red 🎨

First, we're importing Pygame and initializing all the imported pygame modules with pygame.init().

Second, we're declaring width and height variables that represent the size of the screen.
Third, we're setting backgroundColor to a tuple of 3 elements that represent the RGB numbers.

Fourth, screen is a display Surface, or an initialized window or screen for display with the set_mode() method.

Lastly, in the infinite loop, we're filling the screen to the backGroundColor and updatiang the display Surface to the screen. In other words pygame.display.flip() "refreshes" the screen with changes you made to the grahpics.

import pygame

pygame.init()
width, height = 800,  600
backgroundColor = 255,  0,  0

screen = pygame.display.set_mode((width, height))

while True:
	screen.fill(backgroundColor)
	pygame.display.flip()

So, we get a red background!

Adding the DVD

Right before you while loop, import an image of your DVD. Feel free to use the same image I used, in the repl below.

dvdLogo = pygame.image.load("dvd-logo-white.png")

Then, create a rectangle from the Surface, or from the image you just loaded with get_rect()

dvdLogoRect = dvdLogo.get_rect()

Now, inside of the while loop (after filling the background color), "map" the imported image to the dvdLogoRect rectangle using the blit() method. That way, the image stays inside of the invisible dvdLogoRect rectangle.

screen.blit(dvdLogo, dvdLogoRect)

Now, we get a DVD!

Moving the DVD Logo

To move the DVD logo, simply use move() by a speed:

dvdLogoRect = dvdLogoRect.move(dvdLogoSpeed)

Make sure you also declare and initialie dvdLogoSpeed at the top of the file. dvdLogoSpeed[0] represents the speed in the x direction.

dvdLogoSpeed = [1,  1]

Finally, I added a time.sleep(10 / 1000) so the logo moves slower.

So my code ended up looking like

The DVD logo will move off the screen because there is no bouncing.
To implement a check for bouncing, add the following:

if dvdLogoRect.left < 0  or dvdLogoRect.right > width:
	dvdLogoSpeed[0] = -dvdLogoSpeed[0]
if dvdLogoRect.top < 0  or dvdLogoRect.bottom > height:
	dvdLogoSpeed[1] = -dvdLogoSpeed[1]

The .left and .right properties don't seem to be documented, but it's implied that .left measures the distance from the left part of the dvdLogoRect Rect (rectangle) to the left part of the screen. And so on and so fourth for .right, .top, and .bottom.

Here is the final result

Now let me know when the logo hits the corner!

You are viewing a single comment. View All
RogerHaegg (0)

New to Python and Pygame. I tried this with my students, but ended up getting message that it "Couldn't open dvd-logo-white.png ".
I saw a similar post that was commented to change png to PNG, but got same message. Below is what I believe is what the tutorial told us to use.
Any ideas?

import pygame
pygame.init()
width, height = 800, 600
backgroundColor = 255, 0, 0

screen = pygame.display.set_mode((width, height))
dvdLogo = pygame.image.load("dvd-logo-white.PNG")
dvdLogoRect = dvdLogo.get_rect()
while True:
screen.fill(backgroundColor)
screen.blit(dvdLogo, dvdLogoRect)
pygame.display.flip()

eankeen (614)

@RogerHaegg Hmm. That's kind of strange

On my project, if I write the following, my program works.

dvdLogo = pygame.image.load("dvd-logo-white.png")

However, if I convert 'png' to 'PNG', then it stops working (since it can't find the file).

Are you trying to use a different file? Maybe you downloaded a JPEG, renamed it to 'dvd-logo-white.png' and it didn't work because it tried to read the PNG (even though it is a JPEG file). Other than that, I'm not sure what the error might be.

RogerHaegg (0)

@eankeen
So, what I didn't realize, is that I had to go to the sample code in the repl at bottom of tutorial, save that image, and then upload the pic into my repl.
Now it does work. Thank you

eankeen (614)

@RogerHaegg Ohh, gotchia
Glad you figured it out! 🙂