video
Video of this tutorial
Select Graphics
We talked about it. This is a great source of free game art and one of our favorite artists "Kenney" Kenney made the perfect art pack for our game "Space Shooter Pack" which you can find here:
/content/space-shooter-redux
It has a lot of really nice images of spaceships, lasers, asteroids and more.
When you download the package, it unzips into a bunch of different folders. We want a PNG folder that contains all the individual images. We're going to choose three images for the three sprites, as well as the "starfield" image that contains the background for the game.
These images need to be copied to where our game can find them. The easiest way to do this is to create a new folder in the same location as the game code. We'll name the folder "img".
Load Image
As we've seen inSpace Shooter Image WizardAs discussed in the section, to ensure that our code can run on any operating system, we need to use thefunction to find the correct location and path of the file. At the top of the program, we will define the folderimgThe location:
from os import path img_dir = ((__file__), 'img')
Drawing the background
Now we can start by loading the background image. We will finish loading all the components before the existing game loop and initialization code:
# Load all game graphics background = ((img_dir, '')).convert() background_rect = background.get_rect()
Now we can draw the background in the draw portion of the game loop before we draw any sprites:
# Draw / render (BLACK) (background, background_rect) all_sprites.draw(screen)
blitis an old-fashioned computer graphics term that means to draw the pixels of one image onto the pixels of another image , drawing the background image onto the screen. Now our background looks much better:
Elf Images
Now we can load the sprite image:
# Load all game graphics background = ((img_dir, '')).convert() background_rect = background.get_rect() player_img = ((img_dir, "playerShip1_orange.png")).convert() meteor_img = ((img_dir, "meteorBrown_med1.png")).convert() bullet_img = ((img_dir, "")).convert()
Starting with the player sprites - we want to replace the green rectangle, so we change the and don't forget to delete(GREEN) We don't need it anymore:
class Player():
def __init__(self):
.__init__(self)
= player_img
= .get_rect()
But now we see a couple of problems. First, the image is much larger than we want it to be. We have two options: 1. open the image in a graphics editor (Photoshop, GIMP, etc.) and resize it, or 2. resize the image in our code. We'll choose option 2 and use Pygame's()command makes the image approximately half its size, i.e. 50x38 pixels.
Another problem is that we have a black rectangle around our boat because we are not using theset_colorkeySet the transparent color:
= (player_img, (50, 38)) .set_colorkey(BLACK)
If we are interested inBulletcap (a poem)MobClass takes the same process and we end up with a prettier game:
concluding remarks
Now that we've got the graphics, you may have noticed a new problem: sometimes meteors destroy our spaceship, even if it doesn't look like it's touching. Try it yourself - how frustrating! In the next lesson, we'll learn how to tweak the conflict so that it works properly.
Complete code for this section
# KidsCanCode - Game Development with Pygame video series
# Shmup game - part 4
# Video link: /watch?v=mOckdKp3V38
# Adding graphics
import pygame
import random
from os import path
img_dir = ((__file__), 'img')
WIDTH = 480
HEIGHT = 600
FPS = 60
# define colors
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
YELLOW = (255, 255, 0)
# initialize pygame and create window
()
()
screen = .set_mode((WIDTH, HEIGHT))
.set_caption("Shmup!")
clock = ()
class Player():
def __init__(self):
.__init__(self)
= (player_img, (50, 38))
.set_colorkey(BLACK)
= .get_rect()
= WIDTH / 2
= HEIGHT - 10
= 0
def update(self):
= 0
keystate = .get_pressed()
if keystate[pygame.K_LEFT]:
= -8
if keystate[pygame.K_RIGHT]:
= 8
+=
if > WIDTH:
= WIDTH
if < 0:
= 0
def shoot(self):
bullet = Bullet(, )
all_sprites.add(bullet)
(bullet)
class Mob():
def __init__(self):
.__init__(self)
= meteor_img
.set_colorkey(BLACK)
= .get_rect()
= (WIDTH - )
= (-100, -40)
= (1, 8)
= (-3, 3)
def update(self):
+=
+=
if > HEIGHT + 10 or < -25 or > WIDTH + 20:
= (WIDTH - )
= (-100, -40)
= (1, 8)
class Bullet():
def __init__(self, x, y):
.__init__(self)
= bullet_img
.set_colorkey(BLACK)
= .get_rect()
= y
= x
= -10
def update(self):
+=
# kill if it moves off the top of the screen
if < 0:
()
# Load all game graphics
background = ((img_dir, "")).convert()
background_rect = background.get_rect()
player_img = ((img_dir, "playerShip1_orange.png")).convert()
meteor_img = ((img_dir, "meteorBrown_med1.png")).convert()
bullet_img = ((img_dir, "")).convert()
all_sprites = ()
mobs = ()
bullets = ()
player = Player()
all_sprites.add(player)
for i in range(8):
m = Mob()
all_sprites.add(m)
(m)
# Game loop
running = True
while running:
# keep loop running at the right speed
(FPS)
# Process input (events)
for event in ():
# check for closing window
if == :
running = False
elif == :
if == pygame.K_SPACE:
()
# Update
all_sprites.update()
# check to see if a bullet hit a mob
hits = (mobs, bullets, True, True)
for hit in hits:
m = Mob()
all_sprites.add(m)
(m)
# check to see if a mob hit the player
hits = (player, mobs, False)
if hits:
running = False
# Draw / render
(BLACK)
(background, background_rect)
all_sprites.draw(screen)
# *after* drawing everything, flip the display
()
()Part 5: Improved collisions
To this article on the Pygame game development of space shooting to add graphics chapter of the actual article is introduced to this, more related Pygame add graphics content, please search for my previous posts or continue to browse the following related articles I hope you will support me in the future!