Spritesheet help in pygame

Question

I am currently working on a game, trying to improve my beginner python skills. My game is functioning at its most basic level - I can't bring myself to move forward in its development until I can animate my sprite. It's given me the worst headache -- induced by hours of staring at other peoples code, copy and pasting to no avail, and watching countless youtube videos. For some reason, I just cant seem to understand the basic concept of how to strip images from a spritesheet. I've seen the pygame website for it, I just don't understand it. I was following along with kids can code, but his spritesheet had an 'xml'? file attached so he could just copy and paste the coordinates. My spritesheet is 192x192 pixels so I was trying to load/split images by coordinates separated by 48. For example - (0,0,48,0). I was assuming these variables were x, y, previousSpriteEndingx, previousSpriteEndingy by his example, and also because that's just the only thing I could get to make sense. I grouped each sprite location into lists of corresponding direction - up, down, left, and right. (I didnt want to translate and flip my L/R, but now that I'm thinking about it, would this make my game faster? Since it wouldn't have to load 4 new images?)

I finally got it to actually run, but instead of showing my sprite, it's just a black box that increases in width as it moves, but looks like it's too large to be my sprite. So I know I did something wrong with the coordinates (The box disappears when I press down). If someone could give me a working example that I could copy and paste to run and dissect, explain it so that a beginner could easily understand, or (I saved the best for last) implement something into the code pasted below, I would be forever grateful. Last time I posted here I got great help, and I'm hoping to replicate those results. This is a link to my SpriteSheet https://ibb.co/eZbd2G

import pygame

WIDTH = 1000
HEIGHT = 700
FPS = 60

WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)

pygame.init()
pygame.mixer.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Game")
clock = pygame.time.Clock()

class Player(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        width = 25
        height = 25
        image = pygame.image.load("CharacterSprite.png")
        self.image = pygame.transform.scale(image, (width, height))
        self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.rect.centerx = WIDTH / 2 - 480   #center of rectangle
        self.rect.bottom = HEIGHT - 5  #pixels up from the bottom
        self.speedx = 0
        self.speedy = 0
        self.walkingright = []
        self.walkingleft = []
        self.walkingup = []
        self.walkingdown = []
        self.direction = 'R'


    #Facing Down
    sprite_sheet = SpriteSheet('CharacterSprite.png')
    image = sprite_sheet.get_image(0,0,48,0)
    self.walkingdown.append(image) 
    image = sprite_sheet.get_image(48,0,96,0)
    self.walkingdown.append(image)
    image = sprite_sheet.get_image(96,0,144,0)
    self.walkingdown.append(image)
    image = sprite_sheet.get_image(144,0,192,0)
    self.walkingdown.append(image)


    #Facing Up
    image = sprite_sheet.get_image(192,144,48,144)
    self.walkingup.append(image) 
    image = sprite_sheet.get_image(48,144,96,144)
    self.walkingup.append(image)
    image = sprite_sheet.get_image(96,144,144,144)
    self.walkingup.append(image)
    image = sprite_sheet.get_image(144,144,192,144)
    self.walkingup.append(image)


    #Facing Right
    image = sprite_sheet.get_image(192,96,48,96)
    self.walkingright.append(image)
    image = sprite_sheet.get_image(48,96,96,96)
    self.walkingright.append(image)
    image = sprite_sheet.get_image(96,96,144,96)
    self.walkingright.append(image)
    image = sprite_sheet.get_image(144,96,192,96)
    self.walkingright.append(image)

    #FacingLeft
    image = sprite_sheet.get_image(192,48,48,48)
    self.walkingleft.append(image)
    image = sprite_sheet.get_image(48,48,96,48)
    self.walkingleft.append(image)
    image = sprite_sheet.get_image(96,48,144,48)
    self.walkingleft.append(image)
    image = sprite_sheet.get_image(144,48,192,48)
    self.walkingleft.append(image)


def update(self):
    pos = self.rect.x
    if self.direction == "R":
        frame = (pos // 30) % len(self.walkingright)
        self.image = self.walkingright[frame]
    if self.direction == "L":
        frame = (pos // 30) % len(self.walkingleft)
        self.image = self.walkingleft[frame]
    if self.direction == "U":
        frame = (pos // 30) % len(self.walkingup)
        self.image = self.walkingup[frame]
    if self.direction == "D":
        frame = (pos // 30) % len(self.walkingdown)
        self.image = self.walkingdown[frame]

    self.speedx = 0 #Need these to make sure
    self.speedy = 0 #Sprite stops moving on keyup
    keystate = pygame.key.get_pressed()
    if keystate[pygame.K_LEFT]:
        self.speedx = -5
        self.direction = 'L'
    if keystate[pygame.K_RIGHT]:
        self.speedx = 5
        self.direction = 'R'
    if keystate[pygame.K_UP]:
        self.speedy = -5
        self.direction = 'U'
    if keystate[pygame.K_DOWN]:
        self.speedy = 5
        self.direction = 'D'
    self.rect.x += self.speedx
    self.rect.y += self.speedy

    #Set Walls for Width and Height
    if self.rect.right > WIDTH:
        self.rect.rect = WIDTH
    if self.rect.left < 0:
        self.rect.left = 0
    if self.rect.top < 0:
        self.rect.top = 0
    if self.rect.bottom > HEIGHT:
        self.rect.bottom = HEIGHT


class SpriteSheet(object):
    def __init__(self, file_name):
        self.sprite_sheet = pygame.image.load(file_name)
    def get_image(self, x, y, width, height):
        image = pygame.Surface([width, height])
        image.blit(self.sprite_sheet, (0,0), (x, y, width, height))
        image.set_colorkey(BLUE)
        return image

def update(self):
    if self.rect.right > WIDTH:
        self.rect.right = WIDTH
    if self.rect.top < 0:
        self.rect.top = 0
    if self.rect.bottom > HEIGHT:
        self.rect.bottom = HEIGHT
    self.rect.x += self.speedx
    #kill if it goes off screen
    if self.rect.left > WIDTH:
        self.kill()  

#Loading Graphics
all_sprites = pygame.sprite.Group()
player = Player()
all_sprites.add(player)
projectiles = pygame.sprite.Group()

#Spawn x amount of mobs, add to all sprites and mobs
running = True
while running:
    clock.tick(FPS)
for event in pygame.event.get():
    if event.type == pygame.QUIT:
        running = False
    if event.type == pygame.KEYDOWN:
        if event.key == pygame.K_SPACE:
            player.shoot()

 #Update Game Loop           
all_sprites.update()
screen.fill(WHITE)
all_sprites.draw(screen)
pygame.display.flip()
pygame.quit()

skrx · Accepted Answer

Here's a working version of your program (read the comments). The main problem was that you didn't pass the correct width and height (48) as the third and fourth arguments to sprite_sheet.get_image.

To load images with transparency you can call convert_alpha():

self.sprite_sheet = pygame.image.load(file_name).convert_alpha()

And in the update method of the Player you also needed the y-coordinate for the vertical movement.

if self.direction == "U":
    frame = (pos_y // 30) % len(self.walkingup)

import pygame

WIDTH = 1000
HEIGHT = 700
FPS = 60

WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
BLUE = (0, 0, 255)

pygame.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT))
clock = pygame.time.Clock()


class Player(pygame.sprite.Sprite):

    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        width = 25
        height = 25
        sheet = pygame.image.load('Character_Sprite.png').convert_alpha()
        self.image = pygame.transform.scale(sheet, (48, 48))
        self.image.set_colorkey(BLACK)
        self.rect = self.image.get_rect()
        self.rect.centerx = WIDTH / 2 - 480   #center of rectangle
        self.rect.bottom = HEIGHT - 5  #pixels up from the bottom
        self.speedx = 0
        self.speedy = 0
        self.walkingright = []
        self.walkingleft = []
        self.walkingup = []
        self.walkingdown = []
        self.direction = 'R'

        sprite_sheet = SpriteSheet('Character_Sprite.png')
        #Facing Down
        # Start at x = 0. Pass 48 as the third and
        # fourth argument (width and height).
        image = sprite_sheet.get_image(0,0,48,48)
        self.walkingdown.append(image) 
        image = sprite_sheet.get_image(48,0,48,48)
        self.walkingdown.append(image)
        image = sprite_sheet.get_image(96,0,48,48)
        self.walkingdown.append(image)
        image = sprite_sheet.get_image(144,0,48,48)
        self.walkingdown.append(image)

        #Facing Up
        image = sprite_sheet.get_image(0,144,48,48)
        self.walkingup.append(image) 
        image = sprite_sheet.get_image(48,144,48,48)
        self.walkingup.append(image)
        image = sprite_sheet.get_image(96,144,48,48)
        self.walkingup.append(image)
        image = sprite_sheet.get_image(144,144,48,48)
        self.walkingup.append(image)

        #Facing Right
        image = sprite_sheet.get_image(0,96,48,48)
        self.walkingright.append(image)
        image = sprite_sheet.get_image(48,96,48,48)
        self.walkingright.append(image)
        image = sprite_sheet.get_image(96,96,48,48)
        self.walkingright.append(image)
        image = sprite_sheet.get_image(144,96,48,48)
        self.walkingright.append(image)

        #Facing Left
        image = sprite_sheet.get_image(0,48,48,48)
        self.walkingleft.append(image)
        image = sprite_sheet.get_image(48,48,48,48)
        self.walkingleft.append(image)
        image = sprite_sheet.get_image(96,48,48,48)
        self.walkingleft.append(image)
        image = sprite_sheet.get_image(144,48,48,48)
        self.walkingleft.append(image)

    def update(self):
        pos_x = self.rect.x
        # You also need the y position for the vertical movement.
        pos_y = self.rect.y
        if self.direction == "R":
            frame = (pos_x // 30) % len(self.walkingright)
            self.image = self.walkingright[frame]
        if self.direction == "L":
            frame = (pos_x // 30) % len(self.walkingleft)
            self.image = self.walkingleft[frame]
        if self.direction == "U":
            frame = (pos_y // 30) % len(self.walkingup)
            self.image = self.walkingup[frame]
        if self.direction == "D":
            frame = (pos_y // 30) % len(self.walkingdown)
            self.image = self.walkingdown[frame]

        self.speedx = 0 #Need these to make sure
        self.speedy = 0 #Sprite stops moving on keyup
        keystate = pygame.key.get_pressed()
        if keystate[pygame.K_LEFT]:
            self.speedx = -5
            self.direction = 'L'
        if keystate[pygame.K_RIGHT]:
            self.speedx = 5
            self.direction = 'R'
        if keystate[pygame.K_UP]:
            self.speedy = -5
            self.direction = 'U'
        if keystate[pygame.K_DOWN]:
            self.speedy = 5
            self.direction = 'D'
        self.rect.x += self.speedx
        self.rect.y += self.speedy

        #Set Walls for Width and Height
        if self.rect.right > WIDTH:
            self.rect.rect = WIDTH
        if self.rect.left < 0:
            self.rect.left = 0
        if self.rect.top < 0:
            self.rect.top = 0
        if self.rect.bottom > HEIGHT:
            self.rect.bottom = HEIGHT


class SpriteSheet(object):
    def __init__(self, file_name):
        # You have to call `convert_alpha`, so that the background of
        # the surface is transparent.
        self.sprite_sheet = pygame.image.load(file_name).convert_alpha()

    def get_image(self, x, y, width, height):
        # Use a transparent surface as the base image (pass pygame.SRCALPHA).
        image = pygame.Surface([width, height], pygame.SRCALPHA)
        image.blit(self.sprite_sheet, (0,0), (x, y, width, height))
        return image


all_sprites = pygame.sprite.Group()
player = Player()
all_sprites.add(player)

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

    all_sprites.update()
    screen.fill(WHITE)
    all_sprites.draw(screen)
    pygame.display.flip()

pygame.quit()

You can also shorten the sprite sheet cutting code with some for loops:

# Facing Up
for x in range(0, 144+1, 48):  # 144+1 because the `stop` is exclusive.
    self.walkingdown.append(sprite_sheet.get_image(x, 0, 48, 48))
# Facing Up
for x in range(0, 144+1, 48):
    self.walkingup.append(sprite_sheet.get_image(x, 144, 48, 48))
# Facing Right
for x in range(0, 144+1, 48):
    self.walkingright.append(sprite_sheet.get_image(x, 96, 48, 48))
# Facing Left
for x in range(0, 144+1, 48):
    self.walkingleft.append(sprite_sheet.get_image(x, 48, 48, 48))

Here's an even shorter way to cut the sheet. You can iterate over the image lists and enumerate them to get the y index and add a nested for loop for the x coord, and then use pygame.Surface.subsurface to cut out the subsurfaces. The SpriteSheet class wouldn't be needed anymore.

image_lists = (self.walkingdown, self.walkingleft, self.walkingright, self.walkingup)
for y, img_list in enumerate(image_lists):  # Enumerate to get the y-position.
    for x in range(4):
        # Multiply x and y by 48 to get the correct coords and use the
        # `subsurface` to cut the sheet into separate images.
        img_list.append(sheet.subsurface(x*48, y*48, 48, 48))

Spritesheet help in pygame

Answers (2)

Related Questions