Nossa Primeira Janela e Desenho de Formas

Olá, futuros desenvolvedores de jogos! 👋 Na aula anterior, instalamos o Pgzero e preparamos nosso ambiente. Agora, a diversão vai começar de verdade! 🚀

Nesta aula, vamos aprender a criar a nossa primeira janela de jogo e desenhar algumas formas básicas nela. É como ter uma tela em branco e começar a pintar! 🎨

1. Introdução: A Sua Primeira Tela de Jogo!

Imagine que você tem um caderno de desenho. Antes de desenhar qualquer coisa, você precisa de uma página, certo? No Pgzero, essa "página" é a nossa janela de jogo. Vamos definir o tamanho dela e dar um título. Depois, vamos aprender a usar o "lápis" e as "tintas" para desenhar círculos, retângulos e até escrever um pouco!

Vamos lá? Pegue seu teclado e prepare-se para codificar! 💻✨

2. Explicando a Janela e o Desenho

Para criar nossa janela de jogo no Pgzero, precisamos de algumas informações básicas: a largura, a altura e o título da janela. O Pgzero usa variáveis globais (variáveis que ficam "soltas" no seu código e podem ser acessadas de qualquer lugar) para isso.

Definindo a Janela 🖼️

As variáveis que definem a janela são:

• WIDTH: A largura da janela em pixels.
• HEIGHT: A altura da janela em pixels.
• TITLE: O texto que aparece na barra de título da janela.

Vamos ver um exemplo simples:

# game.py
WIDTH = 800  # Largura da janela em pixels
HEIGHT = 600 # Altura da janela em pixels
TITLE = "Minha Primeira Janela Pgzero" # Título da janela
 
# A função draw() é onde todo o nosso desenho acontece
def draw():
    # Por enquanto, vamos deixar a janela vazia, apenas com uma cor de fundo
    pass
 
# Para rodar o jogo, salve este arquivo como game.py e execute no terminal:
# pgzrun game.py

Como rodar:

1. Salve o código acima em um arquivo chamado game.py.
2. Abra seu terminal ou prompt de comando.
3. Navegue até a pasta onde você salvou game.py.
4. Execute o comando: pgzrun game.py

Você verá uma janela preta (ou a cor padrão do seu sistema) com o título "Minha Primeira Janela Pgzero"! 🎉

A Função draw(): Onde a Mágica Acontece ✨

A função draw() é super importante no Pgzero. Ela é chamada automaticamente várias vezes por segundo pelo Pgzero para redesenhar tudo na tela. É dentro dela que vamos colocar todos os nossos comandos de desenho.

O objeto screen: Dentro da função draw(), temos acesso a um objeto especial chamado screen. Este objeto é a nossa "tela de desenho" e possui vários métodos (funções) para desenhar coisas.

Preenchendo o Fundo (screen.fill()) 🌈

A primeira coisa que geralmente fazemos é preencher o fundo da tela com uma cor. Isso garante que a tela seja "limpa" a cada vez que draw() é chamada, evitando que desenhos antigos fiquem na tela.

Para isso, usamos screen.fill(cor). A cor pode ser uma tupla RGB (Vermelho, Verde, Azul) ou um nome de cor predefinido (como 'red', 'blue', 'green', 'white', 'black', etc.).

Exemplo:

# game.py
WIDTH = 800
HEIGHT = 600
TITLE = "Fundo Colorido!"
 
def draw():
    screen.fill((128, 0, 128)) # Preenche a tela com a cor roxa (RGB)
    # Ou você pode usar um nome de cor:
    # screen.fill('purple')

Execute este código e veja sua janela roxa! 💜

Desenhando Formas Básicas 🔵🟥

Agora que sabemos como preencher o fundo, vamos desenhar algumas formas! O objeto screen.draw tem métodos para desenhar círculos, retângulos, linhas e até texto.

Desenhando um Círculo (screen.draw.circle()) 🟣

Para desenhar um círculo, precisamos de:

• posicao: Uma tupla (x, y) indicando o centro do círculo.
• raio: O tamanho do círculo.
• cor: A cor do círculo.

Exemplo:

# game.py
WIDTH = 800
HEIGHT = 600
TITLE = "Círculo no Centro!"
 
def draw():
    screen.fill('lightblue') # Fundo azul claro
    screen.draw.circle((400, 300), 50, 'red') # Círculo vermelho no centro (800/2, 600/2)

Desenhando um Retângulo (screen.draw.rect()) 🟩

Para desenhar um retângulo, precisamos de:

• retangulo: Um objeto Rect que define a posição e o tamanho do retângulo.
• cor: A cor do retângulo.

Um objeto Rect é criado com Rect(x, y, largura, altura), onde (x, y) é o canto superior esquerdo do retângulo.

Exemplo:

# game.py
WIDTH = 800
HEIGHT = 600
TITLE = "Retângulo e Círculo!"
 
# Importamos o objeto Rect para poder usá-lo
from pgzero.builtins import Rect
 
def draw():
    screen.fill('lightgreen') # Fundo verde claro
    
    # Desenha um retângulo azul
    # O canto superior esquerdo está em (100, 100), com 200 de largura e 150 de altura
    screen.draw.rect(Rect(100, 100, 200, 150), 'blue') 
    
    # Desenha um círculo amarelo
    screen.draw.circle((600, 400), 75, 'yellow')

Desenhando Texto (screen.draw.text()) ✍️

Para desenhar texto, precisamos de:

• texto: A string que queremos exibir.
• posicao: Uma tupla (x, y) indicando a posição do texto.
• color: A cor do texto (opcional, padrão é branco).
• fontsize: O tamanho da fonte (opcional, padrão é 24).

Exemplo:

# game.py
WIDTH = 800
HEIGHT = 600
TITLE = "Olá, Mundo!"
 
from pgzero.builtins import Rect
 
def draw():
    screen.fill('darkblue') # Fundo azul escuro
    
    # Desenha um texto no centro da tela
    screen.draw.text("Olá, Game Maker!", (250, 280), color='white', fontsize=50)
    
    # Desenha um retângulo vermelho
    screen.draw.rect(Rect(50, 50, 100, 100), 'red')
    
    # Desenha um círculo verde
    screen.draw.circle((700, 500), 60, 'green')

3. Código de Exemplo Oficial (Adaptado)

Vamos combinar tudo o que aprendemos em um único arquivo, criando uma cena simples com várias formas e cores. Este exemplo é inspirado na documentação oficial do Pgzero, adaptado para nossa aula.

# game_aula.py
# Importa o objeto Rect para podermos usá-lo
from pgzero.builtins import Rect
 
# --- Configurações da Janela ---
WIDTH = 800
HEIGHT = 600
TITLE = "Minha Primeira Arte no Pgzero!"
 
# --- Função de Desenho ---
def draw():
    # 1. Preenche o fundo com uma cor agradável
    screen.fill((100, 100, 255)) # Um tom de azul claro
 
    # 2. Desenha um grande círculo amarelo no centro
    screen.draw.circle((WIDTH // 2, HEIGHT // 2), 100, 'yellow')
 
    # 3. Desenha um retângulo vermelho no canto superior esquerdo
    # O objeto Rect define (x, y, largura, altura)
    screen.draw.rect(Rect(50, 50, 150, 100), 'red')
 
    # 4. Desenha um retângulo verde no canto inferior direito
    screen.draw.rect(Rect(WIDTH - 200, HEIGHT - 150, 150, 100), 'green')
 
    # 5. Desenha um pequeno círculo azul no topo do retângulo vermelho
    screen.draw.circle((50 + 75, 50), 30, 'blue') # Centro do círculo acima do retângulo
 
    # 6. Escreve um texto de boas-vindas
    # A posição (x, y) é o canto superior esquerdo do texto
    screen.draw.text("Bem-vindo ao Pgzero!", (200, 20), color='white', fontsize=40)
    screen.draw.text("Crie seus próprios jogos!", (200, 70), color='black', fontsize=25)
 
    # 7. Desenha uma linha diagonal
    screen.draw.line((0, 0), (WIDTH, HEIGHT), 'purple') # De cima esquerda para baixo direita
    screen.draw.line((WIDTH, 0), (0, HEIGHT), 'orange') # De cima direita para baixo esquerda
 
# Para rodar:
# Salve como game_aula.py
# Execute no terminal: pgzrun game_aula.py

Experimente mudar as cores, tamanhos e posições para ver o que acontece! A prática leva à perfeição! 💪

4. Exercícios/Desafios: Mãos na Massa! 🧑‍💻

Agora é a sua vez de colocar em prática o que aprendeu! Crie um novo arquivo .py para cada desafio.

Desafio 1: Minha Janela Personalizada 🎨

Seu objetivo é criar uma janela de jogo com suas próprias configurações.

• Crie um novo arquivo Python (ex: desafio1.py).
• Defina WIDTH e HEIGHT para um tamanho que você goste (ex: 1024x768 ou 640x480).
• Dê um TITLE criativo para sua janela.
• Dentro da função draw(), preencha o fundo com sua cor favorita.
• Execute seu código e veja sua janela personalizada!

Desafio 2: Um Rosto Simples 🙂

Vamos desenhar um rosto feliz (ou triste, ou zangado, você decide!) usando círculos e retângulos.

• Crie um novo arquivo Python (ex: desafio2.py).
• Defina as configurações da janela.
• Na função draw():
  • Desenhe um círculo grande para a cabeça.
  • Desenhe dois círculos menores para os olhos.
  • Desenhe um retângulo para a boca.
  • Experimente cores diferentes para cada parte!

Desafio 3: Uma Casa Básica 🏠

Agora, vamos construir uma casa simples usando retângulos e um triângulo (sim, o Pgzero não tem draw.triangle diretamente, mas podemos simular com linhas ou usar um truque que veremos em aulas futuras. Por enquanto, use retângulos e um texto para o telhado!).

• Crie um novo arquivo Python (ex: desafio3.py).
• Defina as configurações da janela.
• Na função draw():
  • Desenhe um retângulo grande para o corpo da casa.
  • Desenhe um retângulo menor para a porta.
  • Desenhe um ou dois retângulos para as janelas.
  • Bônus: Use screen.draw.text() para escrever "TELHADO" acima da casa, simulando um telhado por enquanto! (Em aulas futuras, aprenderemos a desenhar polígonos para um telhado de verdade).

5. Resumo e Próximos Passos

Uau! Você aprendeu muito nesta aula:

• ✅ Como definir a largura, altura e título da sua janela de jogo.
• ✅ A importância da função draw() e do objeto screen.
• ✅ Como preencher o fundo da tela com cores.
• ✅ Como desenhar círculos, retângulos e texto.

Você deu seus primeiros passos na criação visual de jogos! É muito legal ver suas criações ganharem vida na tela, não é?

Na próxima aula, vamos dar vida a esses desenhos! Aprenderemos sobre Sprites (personagens e objetos que se movem) e como fazê-los aparecer na tela. Prepare-se para a animação! 🏃‍♀️💨