Crie o Flappy Bird com Pygame

Introdução

Neste projeto, vamos decompor o código para criar um jogo simples de Flappy Bird usando a biblioteca Pygame em etapas gerenciáveis. Seguindo estas etapas, você aprenderá como construir o jogo gradualmente. Cada etapa incluirá uma breve explicação, blocos de código e comentários para ajudá-lo a entender e implementar o jogo. Vamos começar!

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar os arquivos do projeto para o jogo Flappy Bird
• Como mostrar a animação de boas-vindas para o jogo
• Como implementar a lógica principal do jogo para o Flappy Bird
• Como exibir a tela de fim de jogo quando o jogador perde
• Como definir funções auxiliares para o jogo

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar a biblioteca Pygame para criar jogos
• Entender conceitos de desenvolvimento de jogos, como loops de jogo (game loops), colisões e animação

Criar os Arquivos do Projeto

Primeiramente, criaremos os arquivos do projeto para o jogo Flappy Bird.

cd ~/project
touch flappy.py
sudo pip install pygame

Nesta etapa, configuraremos a estrutura básica do projeto e importaremos as bibliotecas necessárias. Também definiremos algumas constantes e carregaremos os recursos iniciais do jogo.

from itertools import cycle
import random
import sys
import pygame
from pygame.locals import *

FPS = 30
SCREENWIDTH = 288
SCREENHEIGHT = 512
PIPEGAPSIZE = 100  ## gap between upper and lower part of pipe
BASEY = SCREENHEIGHT * 0.79
## image and hitmask  dicts
IMAGES, HITMASKS = {}, {}

## list of all possible players (tuple of 3 positions of flap)
PLAYERS_LIST = (
    ## red bird
    (
        "data/sprites/redbird-upflap.png",
        "data/sprites/redbird-midflap.png",
        "data/sprites/redbird-downflap.png",
    ),
    ## blue bird
    (
        "data/sprites/bluebird-upflap.png",
        "data/sprites/bluebird-midflap.png",
        "data/sprites/bluebird-downflap.png",
    ),
    ## yellow bird
    (
        "data/sprites/yellowbird-upflap.png",
        "data/sprites/yellowbird-midflap.png",
        "data/sprites/yellowbird-downflap.png",
    ),
)

## list of backgrounds
BACKGROUNDS_LIST = (
    "data/sprites/background-day.png",
    "data/sprites/background-night.png",
)

## list of pipes
PIPES_LIST = (
    "data/sprites/pipe-green.png",
    "data/sprites/pipe-red.png",
)

• Importamos as bibliotecas necessárias para o jogo, incluindo pygame para criar o jogo, random para gerar elementos aleatórios, sys para funções relacionadas ao sistema e pygame.locals para constantes-chave.
• Inicializamos o Pygame com pygame.init().
• Constantes como FPS, SCREENWIDTH, SCREENHEIGHT, PIPEGAPSIZE e BASEY são definidas para configurar as dimensões e a velocidade do jogo.
• Criamos dicionários vazios (IMAGES e HITMASKS) para armazenar os recursos do jogo.
• Listas de recursos de jogador, fundo e canos são definidas usando caminhos de arquivo.

Mostrar a Animação de Boas-Vindas

Nesta etapa, criaremos a animação da tela de boas-vindas do jogo Flappy Bird.

def showWelcomeAnimation():
    """Shows welcome screen animation of flappy bird"""
    ## index of player to blit on screen
    playerIndex = 0
    playerIndexGen = cycle([0, 1, 2, 1])
    ## iterator used to change playerIndex after every 5th iteration
    loopIter = 0

    playerx = int(SCREENWIDTH * 0.2)
    playery = int((SCREENHEIGHT - IMAGES["player"][0].get_height()) / 2)

    messagex = int((SCREENWIDTH - IMAGES["message"].get_width()) / 2)
    messagey = int(SCREENHEIGHT * 0.12)

    basex = 0
    ## amount by which base can maximum shift to left
    baseShift = IMAGES["base"].get_width() - IMAGES["background"].get_width()

    ## player shm for up-down motion on welcome screen
    playerShmVals = {"val": 0, "dir": 1}

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                ## make first flap sound and return values for mainGame
                return {
                    "playery": playery + playerShmVals["val"],
                    "basex": basex,
                    "playerIndexGen": playerIndexGen,
                }

        ## adjust playery, playerIndex, basex
        if (loopIter + 1) % 5 == 0:
            playerIndex = next(playerIndexGen)
        loopIter = (loopIter + 1) % 30
        basex = -((-basex + 4) % baseShift)
        playerShm(playerShmVals)

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))
        SCREEN.blit(
            IMAGES["player"][playerIndex], (playerx, playery + playerShmVals["val"])
        )
        SCREEN.blit(IMAGES["message"], (messagex, messagey))
        SCREEN.blit(IMAGES["base"], (basex, BASEY))

        pygame.display.update()
        FPSCLOCK.tick(FPS)

• Definimos a função showWelcomeAnimation responsável por exibir a animação da tela de boas-vindas.
• A função configura variáveis para a animação e lida com a entrada do usuário para iniciar o jogo.
• Ela usa um loop para atualizar os quadros da animação e verificar a entrada do usuário para começar o jogo.
• A animação inclui o pássaro batendo as asas e uma mensagem exibida na tela.
• A função pygame.display.update() é usada para atualizar a tela, e FPSCLOCK.tick(FPS) controla a taxa de quadros (frame rate).

Lógica Principal do Jogo

Nesta etapa, implementaremos a lógica principal do jogo Flappy Bird.

def mainGame(movementInfo):
    score = playerIndex = loopIter = 0
    playerIndexGen = movementInfo["playerIndexGen"]
    playerx, playery = int(SCREENWIDTH * 0.2), movementInfo["playery"]

    basex = movementInfo["basex"]
    baseShift = IMAGES["base"].get_width() - IMAGES["background"].get_width()

    ## get 2 new pipes to add to upperPipes lowerPipes list
    newPipe1 = getRandomPipe()
    newPipe2 = getRandomPipe()

    ## list of upper pipes
    upperPipes = [
        {"x": SCREENWIDTH + 200, "y": newPipe1[0]["y"]},
        {"x": SCREENWIDTH + 200 + (SCREENWIDTH / 2), "y": newPipe2[0]["y"]},
    ]

    ## list of lowerpipe
    lowerPipes = [
        {"x": SCREENWIDTH + 200, "y": newPipe1[1]["y"]},
        {"x": SCREENWIDTH + 200 + (SCREENWIDTH / 2), "y": newPipe2[1]["y"]},
    ]

    dt = FPSCLOCK.tick(FPS) / 1000
    pipeVelX = -128 * dt

    ## player velocity, max velocity, downward acceleration, acceleration on flap
    playerVelY = -9  ## player's velocity along Y, default same as playerFlapped
    playerMaxVelY = 10  ## max vel along Y, max descend speed
    playerMinVelY = -8  ## min vel along Y, max ascend speed
    playerAccY = 1  ## players downward acceleration
    playerRot = 45  ## player's rotation
    playerVelRot = 3  ## angular speed
    playerRotThr = 20  ## rotation threshold
    playerFlapAcc = -9  ## players speed on flapping
    playerFlapped = False  ## True when player flaps

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                if playery > -2 * IMAGES["player"][0].get_height():
                    playerVelY = playerFlapAcc
                    playerFlapped = True

        ## check for crash here
        crashTest = checkCrash(
            {"x": playerx, "y": playery, "index": playerIndex}, upperPipes, lowerPipes
        )
        if crashTest[0]:
            return {
                "y": playery,
                "groundCrash": crashTest[1],
                "basex": basex,
                "upperPipes": upperPipes,
                "lowerPipes": lowerPipes,
                "score": score,
                "playerVelY": playerVelY,
                "playerRot": playerRot,
            }

        ## check for score
        playerMidPos = playerx + IMAGES["player"][0].get_width() / 2
        for pipe in upperPipes:
            pipeMidPos = pipe["x"] + IMAGES["pipe"][0].get_width() / 2
            if pipeMidPos <= playerMidPos < pipeMidPos + 4:
                score += 1

        ## playerIndex basex change
        if (loopIter + 1) % 3 == 0:
            playerIndex = next(playerIndexGen)
        loopIter = (loopIter + 1) % 30
        basex = -((-basex + 100) % baseShift)

        ## rotate the player
        if playerRot > -90:
            playerRot -= playerVelRot

        ## player's movement
        if playerVelY < playerMaxVelY and not playerFlapped:
            playerVelY += playerAccY
        if playerFlapped:
            playerFlapped = False

            ## more rotation to cover the threshold (calculated in visible rotation)
            playerRot = 45

        playerHeight = IMAGES["player"][playerIndex].get_height()
        playery += min(playerVelY, BASEY - playery - playerHeight)

        ## move pipes to left
        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            uPipe["x"] += pipeVelX
            lPipe["x"] += pipeVelX

        ## add new pipe when first pipe is about to touch left of screen
        if 3 > len(upperPipes) > 0 and 0 < upperPipes[0]["x"] < 5:
            newPipe = getRandomPipe()
            upperPipes.append(newPipe[0])
            lowerPipes.append(newPipe[1])

        ## remove first pipe if its out of the screen
        if len(upperPipes) > 0 and upperPipes[0]["x"] < -IMAGES["pipe"][0].get_width():
            upperPipes.pop(0)
            lowerPipes.pop(0)

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            SCREEN.blit(IMAGES["pipe"][0], (uPipe["x"], uPipe["y"]))
            SCREEN.blit(IMAGES["pipe"][1], (lPipe["x"], lPipe["y"]))

        SCREEN.blit(IMAGES["base"], (basex, BASEY))
        ## print score so player overlaps the score
        showScore(score)

        ## Player rotation has a threshold
        visibleRot = playerRotThr
        if playerRot <= playerRotThr:
            visibleRot = playerRot

        playerSurface = pygame.transform.rotate(
            IMAGES["player"][playerIndex], visibleRot
        )
        SCREEN.blit(playerSurface, (playerx, playery))

        pygame.display.update()
        FPSCLOCK.tick(FPS)

• Definimos a função mainGame, que contém a lógica central do jogo Flappy Bird.
• A função lida com a entrada do usuário, atualiza o estado do jogo, verifica colisões e acompanha a pontuação.
• O loop do jogo é executado continuamente, atualizando a exibição e a lógica do jogo.
• Os controles do jogador são tratados por meio de eventos de tecla (espaço ou seta para cima).
• A função também verifica colisões com canos e com o chão, atualiza a pontuação e gerencia a animação do pássaro.
• O loop do jogo continua até que o jogador colida ou saia do jogo.

Exibir a Tela de Fim de Jogo

Nesta etapa, criaremos a tela de fim de jogo que aparece quando o jogador perde.

def showGameOverScreen(crashInfo):
    """crashes the player down and shows gameover image"""
    score = crashInfo["score"]
    playerx = SCREENWIDTH * 0.2
    playery = crashInfo["y"]
    playerHeight = IMAGES["player"][0].get_height()
    playerVelY = crashInfo["playerVelY"]
    playerAccY = 2
    playerRot = crashInfo["playerRot"]
    playerVelRot = 7

    basex = crashInfo["basex"]

    upperPipes, lowerPipes = crashInfo["upperPipes"], crashInfo["lowerPipes"]

    while True:
        for event in pygame.event.get():
            if event.type == QUIT or (event.type == KEYDOWN and event.key == K_ESCAPE):
                pygame.quit()
                sys.exit()
            if event.type == KEYDOWN and (event.key == K_SPACE or event.key == K_UP):
                if playery + playerHeight >= BASEY - 1:
                    return

        ## player y shift
        if playery + playerHeight < BASEY - 1:
            playery += min(playerVelY, BASEY - playery - playerHeight)

        ## player velocity change
        if playerVelY < 15:
            playerVelY += playerAccY

        ## rotate only when it's a pipe crash
        if not crashInfo["groundCrash"]:
            if playerRot > -90:
                playerRot -= playerVelRot

        ## draw sprites
        SCREEN.blit(IMAGES["background"], (0, 0))

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            SCREEN.blit(IMAGES["pipe"][0], (uPipe["x"], uPipe["y"]))
            SCREEN.blit(IMAGES["pipe"][1], (lPipe["x"], lPipe["y"]))

        SCREEN.blit(IMAGES["base"], (basex, BASEY))
        showScore(score)

        playerSurface = pygame.transform.rotate(IMAGES["player"][1], playerRot)
        SCREEN.blit(playerSurface, (playerx, playery))
        SCREEN.blit(IMAGES["gameover"], (50, 180))

        FPSCLOCK.tick(FPS)
        pygame.display.update()

• A função showGameOverScreen exibe a tela de fim de jogo quando o jogador perde.
• Ela mostra a pontuação final do jogador, reproduz efeitos sonoros e espera que o jogador pressione espaço ou a seta para cima para reiniciar o jogo.
• A animação inclui o pássaro caindo no chão e a mensagem de fim de jogo exibida na tela.

Definir Funções Auxiliares

Nesta etapa, definimos funções auxiliares que são usadas no jogo.

def playerShm(playerShm):
    """oscillates the value of playerShm['val'] between 8 and -8"""
    if abs(playerShm["val"]) == 8:
        playerShm["dir"] *= -1

    if playerShm["dir"] == 1:
        playerShm["val"] += 1
    else:
        playerShm["val"] -= 1


def getRandomPipe():
    """returns a randomly generated pipe"""
    ## y of gap between upper and lower pipe
    gapY = random.randrange(0, int(BASEY * 0.6 - PIPEGAPSIZE))
    gapY += int(BASEY * 0.2)
    pipeHeight = IMAGES["pipe"][0].get_height()
    pipeX = SCREENWIDTH + 10

    return [
        {"x": pipeX, "y": gapY - pipeHeight},  ## upper pipe
        {"x": pipeX, "y": gapY + PIPEGAPSIZE},  ## lower pipe
    ]


def showScore(score):
    """displays score in center of screen"""
    scoreDigits = [int(x) for x in list(str(score))]
    totalWidth = 0  ## total width of all numbers to be printed

    for digit in scoreDigits:
        totalWidth += IMAGES["numbers"][digit].get_width()

    Xoffset = (SCREENWIDTH - totalWidth) / 2

    for digit in scoreDigits:
        SCREEN.blit(IMAGES["numbers"][digit], (Xoffset, SCREENHEIGHT * 0.1))
        Xoffset += IMAGES["numbers"][digit].get_width()


def checkCrash(player, upperPipes, lowerPipes):
    """returns True if player collides with base or pipes."""
    pi = player["index"]
    player["w"] = IMAGES["player"][0].get_width()
    player["h"] = IMAGES["player"][0].get_height()

    ## if player crashes into ground
    if player["y"] + player["h"] >= BASEY - 1:
        return [True, True]
    else:
        playerRect = pygame.Rect(player["x"], player["y"], player["w"], player["h"])
        pipeW = IMAGES["pipe"][0].get_width()
        pipeH = IMAGES["pipe"][0].get_height()

        for uPipe, lPipe in zip(upperPipes, lowerPipes):
            ## upper and lower pipe rects
            uPipeRect = pygame.Rect(uPipe["x"], uPipe["y"], pipeW, pipeH)
            lPipeRect = pygame.Rect(lPipe["x"], lPipe["y"], pipeW, pipeH)

            ## player and upper/lower pipe hitmasks
            pHitMask = HITMASKS["player"][pi]
            uHitmask = HITMASKS["pipe"][0]
            lHitmask = HITMASKS["pipe"][1]

            ## if bird collided with upipe or lpipe
            uCollide = pixelCollision(playerRect, uPipeRect, pHitMask, uHitmask)
            lCollide = pixelCollision(playerRect, lPipeRect, pHitMask, lHitmask)

            if uCollide or lCollide:
                return [True, False]

    return [False, False]


def pixelCollision(rect1, rect2, hitmask1, hitmask2):
    """Checks if two objects collide and not just their rects"""
    rect = rect1.clip(rect2)

    if rect.width == 0 or rect.height == 0:
        return False

    x1, y1 = rect.x - rect1.x, rect.y - rect1.y
    x2, y2 = rect.x - rect2.x, rect.y - rect2.y

    for x in range(rect.width):
        for y in range(rect.height):
            if hitmask1[x1 + x][y1 + y] and hitmask2[x2 + x][y2 + y]:
                return True
    return False


def getHitmask(image):
    """returns a hitmask using an image's alpha."""
    mask = []
    for x in range(image.get_width()):
        mask.append([])
        for y in range(image.get_height()):
            mask[x].append(bool(image.get_at((x, y))[3]))
    return mask

• A função playerShm oscila o valor de playerShm["val"] entre 8 e -8. Isso é usado para mover o pássaro para cima e para baixo na tela de boas-vindas.
• A função getRandomPipe retorna um cano gerado aleatoriamente. Ela gera uma lacuna aleatória entre os canos superior e inferior.
• A função showScore exibe a pontuação no centro da tela. Ela usa a lista IMAGES["numbers"] para exibir a pontuação.
• A função checkCrash retorna True se o jogador colidir com o chão ou com os canos. Ela usa a função pixelCollision para verificar as colisões.
• A função pixelCollision verifica se dois objetos colidem e não apenas seus retângulos. Ela usa a função getHitmask para obter a máscara de colisão (hitmask) para o jogador e os canos.
• A função getHitmask retorna uma máscara de colisão usando o alfa de uma imagem. Ela usa a função image.get_at para obter o valor alfa de cada pixel na imagem.

A Função Principal

Nesta etapa, definimos a função principal que inicializa o jogo e inicia o loop do jogo.

def main():
    global SCREEN, FPSCLOCK
    pygame.init()
    FPSCLOCK = pygame.time.Clock()
    SCREEN = pygame.display.set_mode((SCREENWIDTH, SCREENHEIGHT))
    pygame.display.set_caption("Flappy Bird")

    ## numbers sprites for score display
    IMAGES["numbers"] = (
        pygame.image.load("data/sprites/0.png").convert_alpha(),
        pygame.image.load("data/sprites/1.png").convert_alpha(),
        pygame.image.load("data/sprites/2.png").convert_alpha(),
        pygame.image.load("data/sprites/3.png").convert_alpha(),
        pygame.image.load("data/sprites/4.png").convert_alpha(),
        pygame.image.load("data/sprites/5.png").convert_alpha(),
        pygame.image.load("data/sprites/6.png").convert_alpha(),
        pygame.image.load("data/sprites/7.png").convert_alpha(),
        pygame.image.load("data/sprites/8.png").convert_alpha(),
        pygame.image.load("data/sprites/9.png").convert_alpha(),
    )

    ## game over sprite
    IMAGES["gameover"] = pygame.image.load("data/sprites/gameover.png").convert_alpha()
    ## message sprite for welcome screen
    IMAGES["message"] = pygame.image.load("data/sprites/message.png").convert_alpha()
    ## base (ground) sprite
    IMAGES["base"] = pygame.image.load("data/sprites/base.png").convert_alpha()

    while True:
        ## select random background sprites
        randBg = random.randint(0, len(BACKGROUNDS_LIST) - 1)
        IMAGES["background"] = pygame.image.load(BACKGROUNDS_LIST[randBg]).convert()

        ## select random player sprites
        randPlayer = random.randint(0, len(PLAYERS_LIST) - 1)
        IMAGES["player"] = (
            pygame.image.load(PLAYERS_LIST[randPlayer][0]).convert_alpha(),
            pygame.image.load(PLAYERS_LIST[randPlayer][1]).convert_alpha(),
            pygame.image.load(PLAYERS_LIST[randPlayer][2]).convert_alpha(),
        )

        ## select random pipe sprites
        pipeindex = random.randint(0, len(PIPES_LIST) - 1)
        IMAGES["pipe"] = (
            pygame.transform.flip(
                pygame.image.load(PIPES_LIST[pipeindex]).convert_alpha(), False, True
            ),
            pygame.image.load(PIPES_LIST[pipeindex]).convert_alpha(),
        )

        ## hitmask for pipes
        HITMASKS["pipe"] = (
            getHitmask(IMAGES["pipe"][0]),
            getHitmask(IMAGES["pipe"][1]),
        )

        ## hitmask for player
        HITMASKS["player"] = (
            getHitmask(IMAGES["player"][0]),
            getHitmask(IMAGES["player"][1]),
            getHitmask(IMAGES["player"][2]),
        )

        movementInfo = showWelcomeAnimation()
        crashInfo = mainGame(movementInfo)
        showGameOverScreen(crashInfo)

• A função main inicializa o jogo, configura a tela e inicia o loop do jogo.
• Ela carrega os ativos do jogo, incluindo imagens, e seleciona aleatoriamente os sprites de fundo, jogador e canos.
• O loop do jogo lida com a animação de boas-vindas, o jogo principal e a tela de fim de jogo.
• O jogo continua em loop até que o jogador saia do jogo ou feche a janela.

Executar o Jogo

Nesta etapa, executaremos o jogo Flappy Bird.

if __name__ == "__main__":
    main()

• A condição __name__ == "__main__" verifica se o módulo atual está sendo executado por si só ou importado por outro módulo.
• Se o módulo atual estiver sendo executado por si só, a função main é chamada para iniciar o jogo.

Depois de concluir todas as etapas, você pode executar o jogo Flappy Bird usando o seguinte comando:

cd ~/project
python flappy.py

Resumo

Neste projeto, dividimos o código do jogo Flappy Bird em várias etapas e fornecemos explicações para cada etapa. Você aprendeu como criar uma estrutura básica de jogo, lidar com a entrada do jogador, atualizar o estado do jogo, verificar colisões e exibir telas de jogo. Agora você pode executar e jogar o jogo Flappy Bird usando o código fornecido. Aproveite sua jornada de desenvolvimento de jogos!