pratica

Marcando Pontos e Exibindo Texto na Tela

Aprenda sobre marcando pontos e exibindo texto na tela

40 min
Aula 2 de 5

Marcando Pontos e Exibindo Texto na Tela

Olá, futuros desenvolvedores de jogos! 👋

Na aula de hoje, vamos aprender como tornar nossos jogos mais interativos e divertidos, adicionando dois elementos super importantes: pontuação e mensagens de texto na tela. 🎯

Já pensou em como os jogos nos informam quantos pontos fizemos ou quando ganhamos/perdemos? É exatamente isso que vamos construir!

1. Introdução: Pontuação e Texto na Tela 🚀

Imagina um jogo sem pontuação ou sem nenhuma mensagem. Seria um pouco sem graça, né? A pontuação nos dá um objetivo e nos mostra o quão bem estamos jogando. As mensagens de texto são essenciais para:

  • Mostrar a pontuação atual.
  • Dar instruções ao jogador.
  • Exibir mensagens como "Game Over" ou "Você Venceu!".
  • Contar histórias ou dar dicas.

Nesta aula, vamos aprender a:

  1. Criar e atualizar uma variável para a pontuação.
  2. Usar a função screen.draw.text() do Pygame Zero para exibir qualquer texto.
  3. Combinar esses dois para mostrar a pontuação do jogador em tempo real!

Vamos lá?

2. Marcando Pontos: A Variável score 💯

Para marcar pontos, precisamos de um lugar para guardar essa informação. Em programação, usamos algo chamado variável. Vamos criar uma variável chamada score (pontuação) e começar ela em zero.

Exemplo: Criando e Incrementando a Pontuação

# Definimos a pontuação inicial do jogador
score = 0
 
# ... (código do jogo, como o loop principal) ...
 
def on_mouse_down(pos):
    global score # Usamos 'global' para poder mudar a variável 'score' que está fora da função
    print("Mouse clicado!")
    score += 1 # Aumenta a pontuação em 1
    print("Pontuação atual:", score)
 
# No seu jogo, você aumentaria a pontuação quando o jogador fizesse algo,
# como coletar uma moeda ou destruir um inimigo.

No exemplo acima, toda vez que o mouse é clicado, a pontuação aumenta em 1. O global score é importante porque score foi criada fora da função on_mouse_down, e para modificá-la dentro da função, precisamos avisar ao Python que estamos usando a versão "global" dela.

3. Exibindo Texto na Tela: screen.draw.text() ✍️

O Pygame Zero facilita muito a exibição de texto na tela com a função screen.draw.text(). Ela é muito flexível e nos permite controlar o que, onde e como o texto aparece.

Sintaxe Básica

screen.draw.text(texto, topleft=(x, y), color=(r, g, b), fontsize=tamanho, fontname='nome_da_fonte')

Vamos entender os parâmetros mais importantes:

  • texto: A string (sequência de caracteres) que você quer exibir. Pode ser algo como "Olá Mundo!" ou f"Pontos: {score}".
  • topleft=(x, y): A posição onde o canto superior esquerdo do texto será desenhado. x é a coordenada horizontal e y é a coordenada vertical. Lembre-se que (0,0) é o canto superior esquerdo da tela.
  • color=(r, g, b): A cor do texto, usando o formato RGB (Vermelho, Verde, Azul). Cada valor vai de 0 a 255.
    • Ex: (255, 0, 0) é vermelho puro.
    • Ex: (0, 255, 0) é verde puro.
    • Ex: (0, 0, 255) é azul puro.
    • Ex: (255, 255, 255) é branco.
    • Ex: (0, 0, 0) é preto.
  • fontsize=tamanho: O tamanho da fonte. Um número inteiro, como 30 ou 50.
  • fontname='nome_da_fonte': (Opcional) O nome da fonte que você quer usar. Se não for especificado, o Pygame Zero usa uma fonte padrão.

Exemplo: Exibindo um Texto Estático

Vamos criar um programa simples que exibe a mensagem "Meu Primeiro Jogo!" na tela.

WIDTH = 800
HEIGHT = 600
 
def draw():
    screen.fill((100, 100, 200)) # Preenche a tela com um azul claro
    screen.draw.text("Meu Primeiro Jogo!", topleft=(50, 50), color=(255, 255, 0), fontsize=60)
    screen.draw.text("Feito com Pygame Zero", center=(WIDTH / 2, HEIGHT / 2), color="white", fontsize=40)
    # Note que também podemos usar 'center' para centralizar o texto!

Execute este código e veja a mágica acontecer! ✨

Integrando Pontuação e Texto: Exibindo o score

Agora, vamos juntar tudo! Vamos fazer um jogo onde o jogador clica no mouse, a pontuação aumenta, e essa pontuação é mostrada na tela.

# Definições da tela
WIDTH = 600
HEIGHT = 400
 
# Variável de pontuação
score = 0
 
# Função para desenhar na tela
def draw():
    screen.fill((50, 150, 200)) # Fundo azul
    
    # Desenha a pontuação na tela
    # Usamos um f-string (f"...") para combinar texto e a variável score
    score_text = f"Pontos: {score}"
    screen.draw.text(score_text, topleft=(20, 20), color=(255, 255, 255), fontsize=40)
 
# Função chamada quando o mouse é clicado
def on_mouse_down(pos):
    global score # Precisamos do 'global' para modificar a variável score
    score += 1   # Aumenta a pontuação em 1
    print(f"Pontuação atual: {score}") # Para ver no console também

Neste código, a cada clique do mouse, a variável score é atualizada e, como a função draw() é chamada repetidamente pelo Pygame Zero, o texto na tela também é atualizado automaticamente para mostrar a nova pontuação! Incrível, né? 🎉

4. Exercícios e Desafios (Prática!) 🧑‍💻

Agora é a sua vez de colocar a mão na massa! Crie um novo arquivo Python para cada desafio ou continue no mesmo arquivo, comentando as partes anteriores.

Desafio 1: Mensagem de Boas-Vindas Personalizada 👋

Crie um programa Pygame Zero que:

  • Exiba uma mensagem de boas-vindas na tela, como "Bem-vindo ao meu jogo!".
  • A mensagem deve estar centralizada na parte superior da tela.
  • Use uma cor e um tamanho de fonte de sua escolha.
# Desafio 1: Mensagem de Boas-Vindas
# TODO: Defina WIDTH e HEIGHT
# TODO: Implemente a função draw() para exibir a mensagem

Desafio 2: Contador de Cliques Interativo 🖱️

Modifique o código do exemplo de pontuação para:

  • Começar a pontuação em 0.
  • A cada clique do mouse, a pontuação deve aumentar em 1.
  • Exiba a pontuação na tela, no canto superior direito.
  • Mude a cor do texto da pontuação para verde ((0, 255, 0)).
# Desafio 2: Contador de Cliques
# TODO: Defina WIDTH e HEIGHT
# TODO: Defina a variável score
# TODO: Implemente a função draw() para exibir a pontuação
# TODO: Implemente a função on_mouse_down() para aumentar a pontuação

Desafio 3: Jogo de Coleta Simples 🍎

Vamos criar um pequeno jogo onde você "coleta" um item.

  1. Crie um Actor para representar uma "maçã" (ou qualquer outro item). Posicione-o em um lugar aleatório da tela.
  2. Crie uma variável score inicializada em 0.
  3. Na função draw(), desenhe a maçã e a pontuação no canto superior esquerdo.
  4. Na função on_mouse_down(pos):
    • Verifique se o clique do mouse (pos) está sobre a maçã usando maça.collidepoint(pos).
    • Se sim:
      • Aumente a score em 1.
      • Mova a maçã para uma nova posição aleatória na tela (use random.randint(0, WIDTH) e random.randint(0, HEIGHT)). Lembre-se de importar random.
      • Você pode até tocar um som (se tiver um arquivo de som coin.wav na pasta sounds) usando sounds.coin.play().
# Desafio 3: Jogo de Coleta Simples
import random
 
WIDTH = 800
HEIGHT = 600
 
score = 0
maça = Actor('apple') # Certifique-se de ter uma imagem 'apple.png' na pasta 'images'
maça.pos = (random.randint(50, WIDTH - 50), random.randint(50, HEIGHT - 50))
 
def draw():
    screen.fill((150, 200, 100)) # Fundo verde claro
    maça.draw()
    score_text = f"Pontos: {score}"
    screen.draw.text(score_text, topleft=(10, 10), color="black", fontsize=30)
 
def on_mouse_down(pos):
    global score
    if maça.collidepoint(pos):
        score += 1
        maça.pos = (random.randint(50, WIDTH - 50), random.randint(50, HEIGHT - 50))
        # if 'coin' in sounds: # Verifique se o som existe antes de tocar
        #     sounds.coin.play() # Descomente se tiver o arquivo sounds/coin.wav

Desafio 4: Mensagem de "Game Over" 💀

Expandindo o Desafio 3:

  1. Adicione uma variável game_over = False.
  2. Adicione um contador regressivo (por exemplo, timer = 10).
  3. Na função update() (que roda a cada frame):
    • Se game_over for False, diminua o timer (por exemplo, timer -= 1/60 para segundos).
    • Se timer chegar a 0, defina game_over = True.
  4. Na função draw():
    • Se game_over for True, em vez de desenhar a maçã e a pontuação normal, desenhe uma grande mensagem "GAME OVER!" no centro da tela e a pontuação final.
    • Se game_over for False, desenhe a maçã, a pontuação e o tempo restante.
# Desafio 4: Mensagem de "Game Over"
import random
 
WIDTH = 800
HEIGHT = 600
 
score = 0
maça = Actor('apple')
maça.pos = (random.randint(50, WIDTH - 50), random.randint(50, HEIGHT - 50))
 
game_over = False
timer = 10.0 # Tempo em segundos
 
def draw():
    screen.fill((150, 200, 100))
    
    if not game_over:
        maça.draw()
        score_text = f"Pontos: {score}"
        timer_text = f"Tempo: {int(timer)}" # Mostra o tempo como inteiro
        screen.draw.text(score_text, topleft=(10, 10), color="black", fontsize=30)
        screen.draw.text(timer_text, topright=(WIDTH - 10, 10), color="black", fontsize=30)
    else:
        screen.draw.text("GAME OVER!", center=(WIDTH / 2, HEIGHT / 2 - 50), color="red", fontsize=80)
        final_score_text = f"Sua pontuação final: {score}"
        screen.draw.text(final_score_text, center=(WIDTH / 2, HEIGHT / 2 + 50), color="black", fontsize=40)
 
def update(dt): # dt é o tempo que passou desde o último frame
    global timer, game_over
    if not game_over:
        timer -= dt
        if timer <= 0:
            timer = 0
            game_over = True
 
def on_mouse_down(pos):
    global score
    if not game_over and maça.collidepoint(pos):
        score += 1
        maça.pos = (random.randint(50, WIDTH - 50), random.randint(50, HEIGHT - 50))
        # if 'coin' in sounds:
        #     sounds.coin.play()

5. Resumo e Próximos Passos 🏁

Parabéns! 🎉 Você aprendeu a adicionar elementos cruciais aos seus jogos:

  • Variáveis de Pontuação: Como criar e atualizar uma variável para guardar a pontuação do jogador.
  • Exibição de Texto: Usar screen.draw.text() para mostrar mensagens, pontuações e informações na tela.
  • Integração: Combinar a lógica do jogo com a exibição de texto para criar uma experiência mais completa.

Com essas novas habilidades, seus jogos já podem comunicar muito mais com o jogador. Você pode criar contadores, mensagens de status, e até telas de "Game Over" personalizadas!

Na próxima aula, vamos explorar como adicionar sons e músicas aos nossos jogos, tornando-os ainda mais imersivos e emocionantes! 🎶

Até lá, continue praticando e experimentando!

© 2025 Escola All Dev. Todos os direitos reservados.

Marcando Pontos e Exibindo Texto na Tela - Game Maker: Python com Pgzero para Crianças | escola.all.dev.br