Pular para o conteúdo
Jogos Digitais
Nesta página
  1. Objetivos de aprendizagem
  2. Pré-requisitos
  3. Materiais
  4. Conceitos
  5. Exemplos
  6. Tutorial passo a passo
  7. Imagens
  8. Indicação da interface
  9. O código completo
  10. Explicação do código
  11. Resultado esperado
  12. Problemas comuns
  13. Exercício guiado
  14. Desafio individual
  15. Desafio avançado (opcional)
  16. Critérios de avaliação
  17. Checklist de conclusão
  18. Extensão

Módulo 5 · Aula 5.1 · Pixel art: a grade e a paleta

Carga horáriaDificuldadeFerramentaCompetências
6 h/a⭐papel quadriculado e Piskel (piskelapp.com)C3, C4

Objetivos de aprendizagem

  1. Explicar o que é pixel art e por que jogos ainda usam esse estilo.
  2. Desenhar um objeto pequeno respeitando a grade, um quadradinho por vez.
  3. Montar e usar uma paleta curta (8 a 16 cores).
  4. Entender a diferença entre o tamanho desenhado e o tamanho no jogo (ampliação sem borrar).

Pré-requisitos

Nenhum além do Módulo 3 (ter visto os desenhos do Sementes do Sertão).

Materiais

Papel quadriculado, lápis de cor; computador com navegador; imagens exemplos/paleta-sertao.png e exemplos/grade-ampliada.png.

Conceitos

Pixel. O menor ponto de cor de uma imagem. Em pixel art, cada pixel é colocado de propósito, como um ladrilho num mosaico.

Grade. O desenho é feito numa grade pequena: o sertanejo dos jogos de referência tem 16 × 24 pixels. No jogo ele aparece com o dobro do tamanho (32 × 48), ampliado sem borrar. Por isso se desenha pequeno e se amplia depois.

Ampliar sem borrar. Ampliar uma imagem pequena num editor comum deixa tudo borrado. Em pixel art se amplia por um número inteiro (2×, 3×, 4×), repetindo cada pixel. O Piskel faz isso na exportação, com a opção Scale (escala).

Paleta. O conjunto de cores permitido. Poucas cores dão unidade: tudo parece do mesmo mundo. A paleta do sertão tem 16 cores tiradas dos jogos de referência, com o código de cada uma (por exemplo, a castanha é #965F2D). Código de cor: # e três pares de letras/números para vermelho, verde e azul.

Por que pixel art. É rápida de fazer para quem está começando, roda bem em computador fraco e fica bonita mesmo pequena. Muitos jogos independentes usam o estilo.

Exemplos

ObjetoGradeNo jogo
sertanejo16 × 2432 × 48
castanha12 × 1224 × 24
bloco de chão16 × 3232 × 64

Tutorial passo a passo

Parte A. No papel (90 min)

  1. Observe exemplos/grade-ampliada.png: o sertanejo com a grade por cima. Conte quantas cores ele usa.
  2. No papel quadriculado, marque um quadrado de 12 × 12 e desenhe um caju, só pintando quadradinhos inteiros.
  3. Use no máximo 5 cores, todas da paleta do sertão (exemplos/paleta-sertao.png).

Parte B. No Piskel (120 min)

  1. Abra piskelapp.com e clique em Create Sprite (criar sprite). Não precisa de conta.
  2. A tela começa com 32 × 32. No painel da direita, RESIZE (redimensionar): desmarque Maintain aspect ratio (manter proporção), coloque Width 12 e Height 12 e confirme.
  3. Pegue a Pen tool (caneta, tecla P) e copie o caju do papel.
  4. Para escolher a cor pelo código, clique no quadrado da cor Primary (principal), apague o código que aparece no campo de texto, digite o da paleta (com o #) e clique em choose (escolher).
  5. Salve no painel SAVE com Save as .piskel (salvar como arquivo do Piskel). Guarde esse arquivo: é o "original" editável.

Parte C. Exportar ampliado (60 min)

  1. Painel EXPORT (exportar), aba PNG. Ajuste Scale para 2 e veja a Resolution (resolução) mudar para 24 × 24.
  2. Baixe e abra o PNG. Compare com uma ampliação feita num editor comum de fotos (fica borrada).

Imagens

  • exemplos/paleta-sertao.png: as 16 cores com nome e código.
  • exemplos/grade-ampliada.png: o sertanejo com a grade, no tamanho real e no tamanho do jogo.

Indicação da interface

Item (como aparece)TraduçãoOnde fica
Create Spritecriar spritepágina inicial do Piskel
Pen tool (P)canetaprimeira ferramenta da coluna da esquerda
Primary / Secondarycor principal / secundáriaabaixo das ferramentas; Swap colors (X) troca as duas
RESIZEredimensionarpainel da direita
SAVE → Save as .piskelsalvar arquivo editávelpainel da direita
EXPORT → PNG → Scaleexportar imagem, escalapainel da direita

O código completo

Não há código nesta aula. O "código" da pixel art é a própria grade: cada quadradinho é uma decisão.

Explicação do código

Uma imagem é uma tabela de cores. Um caju de 12 × 12 é uma tabela de 144 casas, e a paleta diz quais cores podem entrar nelas. É a mesma ideia de lista e tabela vista nos Módulos 1 e 4.

Resultado esperado

Um caju de 12 × 12 com até 5 cores da paleta, salvo como .piskel e exportado em PNG de 24 × 24 nítido.

Problemas comuns

SintomaCausaSolução
Ao mudar a largura, a altura muda juntoMaintain aspect ratio marcadodesmarcar antes de digitar
O PNG ficou do tamanho de um grãoexportou com Scale 1usar 2 (o tamanho dos jogos)
Desenho borrado no jogoampliou em editor comumampliar só pela exportação do Piskel
Perdi o desenhofechou a aba sem salvarsempre Save as .piskel antes de sair

Exercício guiado

Uma imagem de 16 × 24 tem quantos pixels? E ampliada 2×? (Resposta: 384; ampliada fica 32 × 48 = 1536, quatro vezes mais pixels, mas com o mesmo desenho.)

Desafio individual

Desenhe 3 objetos do sertão em 12 × 12 (mandacaru, bode, cabaça) usando a mesma paleta de 8 cores escolhida por você.

Desafio avançado (opcional)

Crie a sua paleta de 8 cores para outro lugar (praia, mangue, cidade à noite) e desenhe os mesmos 3 objetos com ela. Compare o clima das duas versões.

Critérios de avaliação

  • Desenho respeitando a grade (nada de "meio pixel").
  • Paleta limitada e coerente.
  • Arquivo .piskel e PNG ampliado entregues.

Checklist de conclusão

Extensão

Arte: procure fotos de mosaicos e de bordados em ponto cruz. Que semelhanças há com a pixel art?