Módulo 5 · Aula 5.2 · Contorno, luz e sombra

Carga horária	Dificuldade	Ferramenta	Competências
6 h/a	⭐⭐	Piskel (piskelapp.com)	C3, C4

Objetivos de aprendizagem

Usar contorno para separar o objeto do fundo.
Escolher de onde vem a luz e manter essa escolha em todos os desenhos.
Colocar luz e sombra com uma cor mais clara e uma mais escura da mesma família.
Evitar os erros mais comuns: contorno preto em tudo e "sombra em volta" (pillow shading).

Pré-requisitos

Aula 5.1.

Materiais

Computador com navegador; o caju da Aula 5.1; exemplos/comparacao-contorno.png.

Conceitos

Contorno. Uma linha de 1 pixel em volta do objeto. Ajuda o jogador a ver o objeto em cima de qualquer fundo. Fica melhor com uma versão escura da própria cor do que com preto puro: a castanha usa marrom escuro #5A3714.

Direção da luz. Combine uma regra para o jogo inteiro. Nos jogos de referência a luz vem de cima, à esquerda. Então o pixel claro fica em cima e à esquerda; a sombra fica embaixo e à direita.

Rampa de cor. Três tons da mesma cor: sombra, base, luz. A paleta do sertão já traz essas rampas (castanha sombra, castanha, castanha luz).

Pillow shading (sombra de travesseiro). Erro de quem está começando: escurecer todas as bordas e clarear o meio, como um travesseiro. Parece que a luz vem de frente e o objeto fica "inflado". Siga a direção da luz.

Pouco é muito. Num objeto de 12 × 12, 3 pixels de luz e 4 de sombra já mudam tudo (veja a etapa 3 da comparação).

Exemplos

exemplos/comparacao-contorno.png mostra a castanha da Trilha em três etapas: só cor, com contorno, com contorno + luz + sombra. Embaixo de cada uma, o tamanho que ela tem no jogo.

Tutorial passo a passo

Parte A. Comparar (40 min)

Abra a comparação e responda no diário: em qual etapa a castanha "salta" do fundo? Em qual parece redonda?

Parte B. Contorno no caju (60 min)

Abra o .piskel do caju: painel IMPORT (importar) → LOAD .PISKEL FILE (carregar arquivo .piskel) → Browse .piskel files.
Escolha a cor de contorno: a cor da base, mais escura.
Use a Stroke tool (linha, tecla L) para trechos retos e a Pen tool para curvas.
Corrija "escadas" tortas: numa curva, os degraus devem crescer ou diminuir de forma regular (1, 1, 2, 3 e não 1, 3, 1, 2).

Parte C. Luz e sombra (80 min)

Marque com a seta no papel: luz de cima, à esquerda.
Use a Lighten (clarear, tecla U) para clarear pixels no lado da luz. Segurando a tecla Ctrl ela escurece (a dica da ferramenta diz "CTRL Darken").
Ou pinte direto com as cores da rampa da paleta. Prefira esse jeito: as cores ficam dentro da paleta.
Salve como .piskel e exporte PNG com escala 2.

Parte D. Contraste (20 min)

Coloque o caju exportado no GDevelop, por cima do céu e por cima do chão da Trilha. Ele aparece bem nos dois?

Imagens

exemplos/comparacao-contorno.png.
exemplos/paleta-sertao.png: as rampas de castanha, capim, terra e pedra.

Indicação da interface

Item (como aparece)	Tradução	Atalho
Stroke tool	linha reta	L
Lighten	clarear (e escurecer)	U
Color picker	conta-gotas: copia uma cor do desenho	O
Paint bucket tool	balde: pinta uma área fechada	B
IMPORT	importar arquivo	painel da direita

O código completo

Não há código nesta aula.

Explicação do código

A regra "luz de cima, à esquerda" funciona como uma constante do programa: definida uma vez, todos os desenhos obedecem. Mudar no meio do projeto deixa o jogo estranho, como uma variável com dois significados.

Resultado esperado

Caju com contorno escuro da própria cor, luz em cima à esquerda, sombra embaixo à direita, legível no céu e no chão.

Problemas comuns

Sintoma	Causa	Solução
O objeto parece um adesivo	contorno preto grosso	contorno de 1 pixel, cor escura da base
Parece inflado	sombra em volta toda (travesseiro)	sombra só do lado oposto à luz
Curva cheia de "dentes"	degraus irregulares	degraus que crescem ou diminuem em ordem
Some no fundo	cores muito parecidas com o fundo	mais contraste no contorno

Exercício guiado

Luz de cima, à esquerda. Num bode desenhado de perfil olhando para a direita, onde fica a sombra da barriga? (Resposta: embaixo; e a sombra do lado do corpo fica à direita.)

Desafio individual

Refaça os 3 objetos do desafio da Aula 5.1 com contorno, luz e sombra. Monte um "antes e depois" no diário.

Desafio avançado (opcional)

Desenhe uma pedra com contorno seletivo: contorno escuro só no lado da sombra e um pouco mais claro do lado da luz.

Critérios de avaliação

Direção de luz consistente.
Contorno com cor da família, sem travesseiro.
Antes e depois registrado.

Checklist de conclusão

Contorno no caju
Luz e sombra na direção combinada
Testei no céu e no chão
Antes e depois no diário

Extensão

Física/Arte: com uma lanterna e uma bola, fotografe a bola com a luz vindo de três direções. Desenhe em pixel art a versão de cima, à esquerda.