Adicionando o Primeiro Objeto Visual - Criando a Nave

No capítulo anterior, criamos a estrutura fundamental do jogo.

Criamos uma janela, mantivemos ela aberta com o game loop. Depois, usamos o Clock para limitar a velocidade de atualização.

Agora que a janela está pronta, vamos aprender a colocar o primeiro objeto na tela.

Neste capítulo vamos adicionar ao primeiro objeto visual do jogo. Com isso, uma janela vazia começa a se transformar em uma experiência interativa.

Ao longo deste capítulo você aprenderá a:

• Criar a estrutura da nave
• Carregar e desenhar a imagem da nave
• Posicionar a nave na tela

Vamos começar criando a estrutura básica da nave. Com isso temos mais controle do que podemos fazer com a nave.

Criando a Estrutura da Nave

Antes de desenhar a nave, precisamos armazenar algumas informações sobre ela.

Mesmo uma nave simples precisa guardar dados diferentes ao mesmo tempo: posição e, em seguida, imagem.

Para armazenar essas informações usamos a seguinte estrutura:

nave = {
    "x": janela.get_width() // 2,
    "y": janela.get_height() // 2
}

No Pygame a janela é representada como uma Surface.

Imagine uma Surface como uma folha de papel. Nela você pode desenhar formas, escrever textos ou colar imagens.

Toda Surface possui um tamanho. A função get_width() serve para coletar sua largura e get_height() sua altura.

Criamos a estrutura da nave usando um dicionário Python. Um dicionário permite armazenar informações relacionadas usando chaves nomeadas.

Por exemplo, x e y são as chaves. Os valores são window.get_width() e window.get_height(), respectivamente.

O dicionário centraliza as informações da nave em uma única estrutura. Isso deixa o código mais organizado.

Mas para desenhar a imagem precisamos carregar uma imagem para a nave.

Carregando a Imagem da Nave

Antes de carregar a imagem:

1. Crie uma pasta chamada img dentro da pasta do projeto.
2. Baixe as imagens do site indicado (se preferir você pode criar suas próprias imagens).
3. Salve o arquivo (ex: nave.png) dentro de img.

As imagens usadas no projeto estão no site Kenney. Baixe as imagens, escolha uma nave e salve o arquivo na pasta img.

Para carregar imagens, usamos pygame.image.load(). Essa função carrega uma imagem da pasta do projeto e transforma o arquivo em uma Surface que pode ser desenhada na tela.

A nave precisa guardar não só posição, mas também o recurso visual que será desenhado.

nave_img = pygame.image.load("img/nave.png")
nave = {
    "imagem": nave_img,
    "x": janela.get_width() // 2,
    "y": janela.get_height() // 2,
}

Agora que temos todas as informações necessárias podemos fazer a nave ser desenhada na tela.

Desenhando a Nave na Tela

Para desenhar a nave na tela, utilizamos a função window.blit()[^3]. Ela desenha uma imagem em uma posição específica da tela, como se estivéssemos colando um adesivo em uma folha de papel:

janela.blit(nave["imagem"], (nave["x"], nave["y"]))

O jogo redesenha a tela a cada iteração do loop. Por isso desenhamos a nave em todo frame.

Lembra que configuramos o Clock para 60 FPS no capítulo passado?

Cada uma dessas atualizações é um frame. É nele que precisamos redesenhar a nave para ela permanecer visível.

Ao executar o jogo, ela aparece na tela.

Você pode notar que a nave não está exatamente no centro da janela. Vamos ver como podemos centralizá-la.

Centralizando a Nave na Tela

No Pygame, o posicionamento começa pelo canto superior esquerdo. Este é o ponto de origem da imagem.

Tudo é criado a partir do ponto de origem. Esse ponto define como todas as posições são calculadas na tela.

O Pygame aplica as coordenadas no ponto de origem da imagem. Por isso a nave parece deslocada.

Para centralizar, deslocamos a imagem:

• Metade da largura largura para esquerda
• Metade da sua altura para cima.

Para isso alteramos o valor de x e y da seguinte forma:

nave_img = pygame.image.load("img/nave.png")
nave = {
    "imagem": nave_img,
    "x": janela.get_width() // 2 - nave_img.get_width() // 2,
    "y": janela.get_height() // 2 - nave_img.get_height() // 2,
}

O Pygame utiliza um sistema de coordenadas bidimensional, onde cada ponto é representado por (x, y).

A origem (0, 0) fica localizada no canto superior esquerdo da janela.

• Valores maiores de X movem o elemento para a direita
• Valores menores de X movem o elemento para a esquerda
• Valores maiores de Y movem o elemento para baixo
• Valores menores de Y movem o elemento para cima

Feito isso, ao executar o jogo, vamos ver a nave no centro da janela.

O que Aprendemos até Agora?

Até aqui você criou uma estrutura funcional para a nave. Ela é desenhada e centralizada na janela.

Neste capítulo você:

• Usou dicionário Python para estruturar a nave
• Carregou uma imagem para a nave
• Exibiu a nave na tela
• Centralizou a nave na janela

Código Completo

import pygame

pygame.init()
window = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()

nave_img = pygame.image.load("img/nave.png")
nave = {
    "imagem": nave_img,
    "x": window.get_width() // 2 - nave_img.get_width() // 2,
    "y": window.get_height() // 2 - nave_img.get_height() // 2,
}

rodando = True
while rodando:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
            rodando = False

    window.fill("black")

    window.blit(nave_img, (nave["x"], nave["y"]))

    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Próximo Passo: Implementando a Movimentação

No próximo capítulo, vamos fazer com que a nave se mova reagindo a entrada do teclado.