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.7 · Interface e identidade visual

Carga horáriaDificuldadeFerramentaCompetências
6 h/a⭐⭐Piskel e GDevelop 5C3, C4, C5

Objetivos de aprendizagem

  1. Desenhar um botão com três estados (normal, mouse em cima, apertado).
  2. Trocar palavras do placar por ícones quando fizer sentido.
  3. Deixar o texto legível sobre qualquer fundo (tamanho, peso, contorno, contraste).
  4. Definir a identidade visual do jogo numa ficha de uma página.

Pré-requisitos

Aulas 5.1 a 5.4. Módulo 2 (GDD).

Materiais

Computador com navegador e GDevelop; exemplos/interface-exemplos.png; GDD do Projeto 3.

Conceitos

Interface (HUD). Tudo o que informa o jogador sem fazer parte do mundo: placar, vidas, botões, avisos. Na Trilha ela mora na camada Interface (Aula 4.2).

Botão em três estados. O botão precisa responder: muda de cor quando o mouse passa e "afunda" quando é apertado. O afundar é simples: tirar a sombra de baixo e descer o desenho um pouco (no exemplo, 4 pixels; num botão de pixel art pequeno, 1 pixel).

Ícone em vez de palavra. Um coração com "× 3" se lê mais rápido que "Vidas: 3", e funciona para quem ainda lê devagar. Mas ícone sem sentido claro confunde: teste com colegas.

Legibilidade. Sobre um céu claro, texto fino e claro some. O que ajuda: letra grossa, tamanho grande, cor que contrasta e um contorno escuro em volta. Veja a comparação no exemplo.

Identidade visual. As escolhas que fazem o jogo parecer "um só": paleta, direção da luz, tipo de contorno, fonte, formato dos botões. Escrever numa ficha evita que cada tela saia de um jeito.

Exemplos

exemplos/interface-exemplos.png: botão "JOGAR" em três estados; ícones de coração e castanha no lugar das palavras; o mesmo texto "Castanhas: 5/12" legível e ilegível sobre o céu.

Tutorial passo a passo

Parte A. Ficha de identidade (40 min)

  1. Numa página do diário: nome do jogo, 3 palavras de clima (ex.: "quente, seco, valente"), paleta (8 a 16 cores), direção da luz, contorno (cor escura da base), fonte, formato dos botões.

Parte B. Botão (80 min)

  1. No Piskel, RESIZE 48 × 16 (ou o tamanho que caiba a palavra em pixel art). Três quadros: normal, em cima (mais claro), apertado (sem sombra, 1 pixel abaixo).
  2. Exporte em ZIP com escala 2 ou 3.
  3. No GDevelop, na cena Inicio da cópia da Trilha, crie o Sprite BotaoJogar com uma animação para cada estado.
  4. Eventos: se o cursor está sobre o botão (pesquise "cursor" nas condições do objeto) → animação "EmCima"; se além disso o botão esquerdo do mouse é pressionado → "Apertado"; ao soltar em cima → Trocar a cena para "Jogo". Sem o cursor em cima → "Normal".

Parte C. Placar com ícones (60 min)

  1. Desenhe um coração em 9 × 8 e use a castanha da Aula 5.3.
  2. Na camada Interface, coloque os ícones e textos curtos ao lado ("× 3", "5/12").
  3. Mude o texto do placar nos eventos para mostrar só os números.

Parte D. Legibilidade (20 min)

  1. Nas propriedades do objeto Texto, aumente o tamanho, use negrito, cor clara e, se a sua versão tiver, ative o contorno escuro. Teste sobre o céu e sobre o chão.

Imagens

  • exemplos/interface-exemplos.png.

Indicação da interface

ItemOnde fica
Condição de cursor sobre o objetocondições do objeto (pesquise "cursor")
Botão do mouseOutras Condições, grupo de mouse e toque
Propriedades do Textopainel de propriedades do objeto Texto (tamanho, cor, estilo)

Os nomes exatos dessas três opções no GDevelop em português não foram conferidos para esta aula: use a busca da janela de condições com as palavras indicadas.

O código completo

Cursor sobre BotaoJogar                         → animação de BotaoJogar = "EmCima"
Cursor sobre BotaoJogar + botão esquerdo pressionado → animação de BotaoJogar = "Apertado"
Cursor sobre BotaoJogar + botão esquerdo solto       → Trocar para a cena "Jogo"
(NÃO) Cursor sobre BotaoJogar                   → animação de BotaoJogar = "Normal"

Explicação do código

A ordem importa como na Aula 4.5: "Apertado" vem depois de "EmCima" para vencer quando os dois são verdadeiros. Trocar de cena ao soltar (e não ao apertar) deixa o jogador desistir arrastando o dedo para fora.

Resultado esperado

Tela inicial com botão que reage ao mouse; placar com ícones legível sobre o céu; ficha de identidade de uma página.

Problemas comuns

SintomaCausaSolução
Botão some atrás do fundocamada erradacamada Interface ou acima do fundo
Botão "pisca" entre estadoseventos em ordem errada"Apertado" depois de "EmCima"
Texto embaçadofonte pequena ampliadaaumentar o tamanho na propriedade, não esticar
Ícone ninguém entendesímbolo sem relação com o jogotestar com 3 colegas; trocar

Exercício guiado

Placar antigo: "Castanhas: 5/12 Vidas: 3 [P] pausa" tem quantos caracteres? Com ícones fica "5/12 × 3 [P]". Quanto encurtou? (Resposta: contando espaços, 42 contra 16 caracteres; ficou com pouco mais de um terço do tamanho.)

Desafio individual

Faça a tela de pausa com a sua identidade visual: moldura em pixel art, botão "Continuar" e botão "Sair".

Desafio avançado (opcional)

Desenhe uma fonte de números em pixel art (0 a 9, cada um 5 × 7) e mostre a pontuação com Sprites em vez de Texto.

Critérios de avaliação

  • Ficha de identidade completa e seguida.
  • Botão com três estados funcionando.
  • Placar legível sobre qualquer parte do cenário.

Checklist de conclusão

Extensão

Português: placas de trânsito e de lojas são "interfaces" da cidade. Fotografe 3 placas fáceis e 1 difícil de ler e explique por quê.