Cores e Posicionamento na Tela 🎨📍

Olá, futuro(a) Game Maker! 👋 Nesta aula super divertida e prática, vamos aprender a dar vida aos nossos jogos usando cores vibrantes e colocando as coisas exatamente onde queremos na tela. É como ter um pincel mágico e um mapa do tesouro para o nosso jogo! ✨

Vamos aprender a:

• Definir cores usando o sistema RGB.
• Preencher a tela e desenhar formas coloridas.
• Entender o sistema de coordenadas da tela.
• Posicionar objetos com precisão usando o objeto Rect.

1. Cores no Pgzero: Dando Vida à Tela! 🌈

No Pgzero, as cores são definidas usando o sistema RGB (Red, Green, Blue - Vermelho, Verde, Azul). Isso significa que misturamos diferentes quantidades dessas três cores primárias para criar qualquer cor que possamos imaginar! Cada cor é representada por um número de 0 a 255.

• 0 significa "nenhum" daquela cor.
• 255 significa "muito" daquela cor.

Uma cor no Pgzero é uma "tupla" de três números: (R, G, B).

Por exemplo:

• 🔴 Vermelho puro: (255, 0, 0)
• 🟢 Verde puro: (0, 255, 0)
• 🔵 Azul puro: (0, 0, 255)
• ⚪ Branco: (255, 255, 255) (todas as cores no máximo)
• ⚫ Preto: (0, 0, 0) (nenhuma cor)
• 🟡 Amarelo: (255, 255, 0) (vermelho + verde)

Exemplo: Preenchendo a Tela e Desenhando um Retângulo Colorido

Vamos começar com um código simples para preencher a tela com uma cor e depois desenhar um retângulo de outra cor.

# Define o tamanho da tela
WIDTH = 800
HEIGHT = 600
 
# Função draw() é onde desenhamos as coisas na tela
def draw():
    # 1. Preenche a tela com uma cor de fundo (azul claro)
    screen.fill((100, 100, 255)) # RGB para um azul mais claro
 
    # 2. Desenha um retângulo preenchido (vermelho)
    # A função draw.filled_rect() precisa de:
    # - Onde desenhar (screen)
    # - Um objeto Rect (vamos aprender mais sobre ele)
    # - A cor (vermelho)
    screen.draw.filled_rect(Rect((50, 50), (100, 100)), (255, 0, 0)) # Retângulo vermelho

Como funciona?

• screen.fill((R, G, B)): Esta função pinta a tela inteira com a cor que você especificar.
• screen.draw.filled_rect(Rect((x, y), (largura, altura)), (R, G, B)): Esta função desenha um retângulo preenchido.
  • Rect((50, 50), (100, 100)): Isso cria um "retângulo" na posição (50, 50) com largura de 100 e altura de 100. Vamos entender o posicionamento a seguir!
  • (255, 0, 0): A cor do retângulo, neste caso, vermelho.

2. Posicionamento na Tela: Onde Colocar Nossas Coisas? 📍

Agora que sabemos como colorir, precisamos aprender a posicionar nossos objetos! A tela do computador funciona como um gráfico.

• O canto superior esquerdo da tela é a posição (0, 0).
• O eixo X (horizontal) cresce para a direita.
• O eixo Y (vertical) cresce para baixo.

Imagine que a tela é uma grade:

(0,0) -------------> X (WIDTH)
  |
  |
  |
  |
  V
  Y (HEIGHT)

O Objeto Rect: Nosso Melhor Amigo para Posicionamento e Tamanho! 📦

No Pgzero, o objeto Rect é super importante! Ele representa uma área retangular na tela e nos ajuda a definir a posição e o tamanho de quase tudo que desenhamos.

Você pode criar um Rect de várias maneiras, mas as mais comuns são:

1. Rect((x, y), (largura, altura)): Define a posição do canto superior esquerdo (x, y) e o tamanho (largura, altura).
2. Rect(x, y, largura, altura): Mesma coisa, mas sem as tuplas extras.

Um Rect tem muitas propriedades úteis para posicionamento:

• .x, .y: Coordenadas do canto superior esquerdo.
• .width, .height: Largura e altura.
• .topleft: Uma tupla (x, y) do canto superior esquerdo.
• .center: Uma tupla (x, y) do centro do retângulo.
• .bottomright: Uma tupla (x, y) do canto inferior direito.
• E muitos outros!

Exemplo: Posicionando Retângulos com Rect

Vamos desenhar alguns retângulos em posições diferentes usando as propriedades do Rect.

# Define o tamanho da tela
WIDTH = 800
HEIGHT = 600
 
# Cria um objeto Rect para o nosso primeiro retângulo
# Posição (50, 50), tamanho (100, 100)
retangulo1 = Rect((50, 50), (100, 100))
 
# Cria um segundo objeto Rect, mas usando o centro da tela
# Começamos com um tamanho e depois ajustamos o centro
retangulo2 = Rect(0, 0, 150, 80) # Cria um Rect temporário em (0,0)
retangulo2.center = (WIDTH / 2, HEIGHT / 2) # Move o centro para o centro da tela
 
# Cria um terceiro objeto Rect, no canto inferior direito
retangulo3 = Rect(0, 0, 70, 70)
retangulo3.bottomright = (WIDTH - 20, HEIGHT - 20) # 20 pixels da borda
 
def draw():
    screen.fill((200, 220, 255)) # Fundo azul claro
 
    # Desenha o primeiro retângulo (verde)
    screen.draw.filled_rect(retangulo1, (0, 200, 0))
 
    # Desenha o segundo retângulo (amarelo)
    screen.draw.filled_rect(retangulo2, (255, 255, 0))
 
    # Desenha o terceiro retângulo (roxo)
    screen.draw.filled_rect(retangulo3, (150, 0, 150))
 
    # Podemos desenhar apenas o contorno também!
    # screen.draw.rect(retangulo1, (0, 0, 0)) # Contorno preto

O que aprendemos:

• Rect é um "molde" para nossas formas.
• Podemos criar Rects e depois mudar suas propriedades como center, topleft, etc. para posicioná-los.
• screen.draw.filled_rect() desenha o retângulo preenchido.
• screen.draw.rect() desenha apenas o contorno do retângulo.

3. Integrando Cores e Posicionamento: Criando Nossas Primeiras Cenas! 🎨📍

Agora que dominamos cores e posicionamento, podemos combiná-los para criar cenas mais complexas. Vamos desenhar diferentes formas coloridas em lugares específicos.

O Pgzero também nos permite desenhar círculos e linhas!

• screen.draw.filled_circle((x, y), raio, (R, G, B)): Desenha um círculo preenchido.
• screen.draw.circle((x, y), raio, (R, G, B)): Desenha o contorno de um círculo.
• screen.draw.line((x1, y1), (x2, y2), (R, G, B)): Desenha uma linha de um ponto a outro.

WIDTH = 800
HEIGHT = 600
 
def draw():
    screen.fill((135, 206, 235)) # Fundo azul céu
 
    # 1. Sol Amarelo no canto superior direito
    screen.draw.filled_circle((WIDTH - 100, 100), 50, (255, 255, 0))
 
    # 2. Grama Verde na parte inferior
    grama = Rect(0, HEIGHT - 150, WIDTH, 150)
    screen.draw.filled_rect(grama, (34, 139, 34))
 
    # 3. Uma casa simples (retângulo marrom com telhado vermelho)
    # Corpo da casa
    casa_corpo = Rect((150, HEIGHT - 300), (200, 150))
    screen.draw.filled_rect(casa_corpo, (139, 69, 19)) # Marrom
 
    # Telhado da casa (um triângulo, mas vamos fazer com retângulos para simplificar por enquanto)
    # Ou podemos usar draw.polygon para triângulos, mas vamos focar em rect/circle
    # Para o telhado, vamos desenhar um retângulo um pouco acima e mais largo
    telhado_largura = casa_corpo.width + 40
    telhado_altura = 80
    telhado_x = casa_corpo.x - 20
    telhado_y = casa_corpo.top - telhado_altura + 10 # Um pouco acima da casa
    telhado = Rect(telhado_x, telhado_y, telhado_largura, telhado_altura)
    screen.draw.filled_rect(telhado, (255, 0, 0)) # Vermelho
 
    # Janela azul
    janela = Rect(casa_corpo.x + 50, casa_corpo.y + 40, 40, 40)
    screen.draw.filled_rect(janela, (0, 0, 255))
 
    # Porta cinza
    porta = Rect(casa_corpo.x + 120, casa_corpo.y + 70, 40, 80)
    screen.draw.filled_rect(porta, (100, 100, 100))
 
    # 4. Nuvem branca
    screen.draw.filled_circle((600, 80), 40, (255, 255, 255))
    screen.draw.filled_circle((640, 90), 35, (255, 255, 255))
    screen.draw.filled_circle((570, 90), 30, (255, 255, 255))

Este código cria uma pequena cena com céu, grama, sol, uma casa e uma nuvem, usando apenas retângulos e círculos coloridos em posições específicas. Que legal! 🤩

4. Exercícios/Desafios: Hora de Praticar! 🚀

Agora é a sua vez de colocar a mão na massa e criar suas próprias obras de arte com cores e posicionamento!

Desafio 1: Semáforo 🚦

Crie um semáforo (sinal de trânsito) na tela. Ele deve ter:

• Um corpo retangular cinza escuro.
• Três círculos: um vermelho, um amarelo e um verde, empilhados verticalmente dentro do corpo do semáforo.

Sua lista de tarefas:

• Definir WIDTH e HEIGHT.
• Criar a função draw().
• Preencher a tela com uma cor de fundo.
• Desenhar o corpo retangular cinza do semáforo.
• Desenhar o círculo vermelho na parte superior.
• Desenhar o círculo amarelo no meio.
• Desenhar o círculo verde na parte inferior.

# Seu código para o Desafio 1 aqui!
WIDTH = 600
HEIGHT = 400
 
def draw():
    screen.fill((150, 200, 255)) # Fundo azul claro
 
    # Crie o corpo do semáforo aqui
    # Exemplo: semaforo_corpo = Rect((x, y), (largura, altura))
    # screen.draw.filled_rect(semaforo_corpo, (cor_cinza_escura))
 
    # Crie e posicione os círculos vermelho, amarelo e verde
    # Exemplo: screen.draw.filled_circle((x_circulo, y_circulo), raio, (cor_vermelha))

Desafio 2: Rosto Feliz! 😀

Desenhe um rosto feliz usando círculos e retângulos. Ele deve ter:

• Um círculo grande para a cabeça (cor de pele ou amarela).
• Dois círculos menores para os olhos (brancos com pupilas pretas).
• Um retângulo para a boca (vermelho ou preto).

Sua lista de tarefas:

• Definir WIDTH e HEIGHT.
• Criar a função draw().
• Preencher a tela com uma cor de fundo.
• Desenhar o círculo grande da cabeça.
• Desenhar os dois círculos brancos dos olhos.
• Desenhar as duas pupilas pretas dentro dos olhos.
• Desenhar o retângulo da boca.

# Seu código para o Desafio 2 aqui!
WIDTH = 600
HEIGHT = 400
 
def draw():
    screen.fill((255, 255, 255)) # Fundo branco
 
    # Crie o círculo da cabeça aqui
    # Exemplo: screen.draw.filled_circle((WIDTH/2, HEIGHT/2), raio_cabeca, (cor_amarela))
 
    # Crie e posicione os olhos e a boca

5. Resumo e Próximos Passos 📝

Parabéns! 🎉 Você deu os primeiros passos cruciais para se tornar um Game Maker!

Nesta aula, aprendemos:

• Cores: Como usar o sistema RGB (R, G, B) para criar qualquer cor e aplicá-las com screen.fill() e screen.draw.filled_rect(), screen.draw.filled_circle().
• Posicionamento: O sistema de coordenadas (x, y) da tela, onde (0, 0) é o canto superior esquerdo.
• Objeto Rect: Como ele nos ajuda a definir a posição e o tamanho de formas retangulares, e suas propriedades úteis como center, topleft, etc.
• Desenho: Como desenhar retângulos, círculos e linhas preenchidos ou apenas seus contornos.

Você já pode criar cenas estáticas e coloridas! 🌟

Próximos Passos: Na próxima aula, vamos adicionar movimento aos nossos objetos! Prepare-se para ver suas criações ganharem vida com as funções update() e animate(). Até lá! 👋