Online Music Hackathon

First Prize: $5000

Ends on Jul 22:
00
Days
00
Hours
00
Mins
00
Secs

Learn to Code via Tutorials on Repl.it

Posts
Pygame
Pygame
67
🚀 A Starter Guide to Pygame 📀
# 🚀 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](https://pygame.org). 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](https://repl.it/talk/announcements/Replit-GFX-Public-Beta-Build-Games-and-GUI-Apps/11545). So let's get started! We're going to be building a simple screen saver. The final result will look like the following ![programProgress4](https://i.imgur.com/dEileMP.gif) ## Starting out When creating a new project, be sure to select "PyGame" when creating a project. ![image](https://storage.googleapis.com/replit/images/1552705106070_4aa0e807cd3fb5197a7251222d74d724.pn) 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()`](https://www.pygame.org/docs/ref/pygame.html#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()`](https://www.pygame.org/docs/ref/display.html#pygame.display.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()`](https://www.pygame.org/docs/ref/display.html#pygame.display.flip) "refreshes" the screen with changes you made to the grahpics. ```python 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! ![programProgress1](https://storage.googleapis.com/replit/images/1552448696584_73e029d5335f2d2a06c92a180e7103be.pn) ## 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. ```python 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()`](https://www.pygame.org/docs/ref/surface.html?highlight=get_rect#pygame.Surface.get_rect) ```python 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()`](https://www.pygame.org/docs/ref/surface.html?highlight=blit#pygame.Surface.blit) method. That way, the image stays inside of the invisible `dvdLogoRect` rectangle. ```python screen.blit(dvdLogo, dvdLogoRect) ``` Now, we get a DVD! ![programProgress2](https://storage.googleapis.com/replit/images/1552449702561_27872d2c7a30d4d9dbb53d3c908851d9.pn) ## Moving the DVD Logo To move the DVD logo, simply use `move()` by a speed: ```python 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. ```python dvdLogoSpeed = [1, 1] ``` Finally, I added a `time.sleep(10 / 1000)` so the logo moves slower. So my code ended up looking like ![programProgress3](https://i.imgur.com/dsh8TYo.gif) The DVD logo *will* move off the screen because there is no bouncing. To implement a check for bouncing, add the following: ```python 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](https://www.pygame.org/docs/ref/rect.html?highlight=rect%20left), 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 ![programProgress4](https://i.imgur.com/dEileMP.gif) Now let me know when the logo hits the corner!
32
posted by eankeen (528) 4 months ago