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 (testado)
  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 4 · Aula 4.2 · Fase maior que a tela: câmera e camadas

Carga horáriaDificuldadeFerramentaCompetências
8 h/a⭐⭐GDevelop 5 (gdevelop.io)C2, C3

Objetivos de aprendizagem

  1. Construir uma fase de 2400 px de largura (três telas).
  2. Fazer a câmera seguir o jogador sem mostrar o que está fora da fase.
  3. Usar camadas: céu parado atrás, interface parada na frente.
  4. Explicar por que o placar precisa ficar numa camada própria.

Pré-requisitos

Aula 4.1.

Materiais

Computador com o GDevelop; papel quadriculado para o mapa da fase.

Conceitos

Câmera. A "janela" que mostra uma parte da cena. Cada camada tem a sua câmera. Mover a câmera da camada base faz a fase rolar.

Centralizar a câmera em um objeto. Ação que põe o meio da câmera em cima do jogador a cada quadro.

Impor limites da câmera. Ação que proíbe a câmera de mostrar além de um retângulo (aqui de 0,0 até 2400,600). Sem ela, no começo da fase aparece o "nada" à esquerda.

Camada. Uma folha transparente empilhada. A Trilha tem 4, de trás para frente: Ceu (fundo), camada base (a fase), Interface (placar) e Pausa (aviso de pausa). Como só a câmera da camada base anda, o céu e o placar ficam parados na tela.

Largura variável. O GDevelop ajusta a largura do jogo ao formato da janela. No teste a câmera mostrou 766 px de largura em vez de 800. Por isso os limites usam o tamanho da fase, e não contas com "metade de 800".

Exemplos

JogoCâmera
Trilha da Serrasegue o jogador na horizontal, presa à fase
jogos de corrida infinitaanda sozinha para a direita
jogos de quebra-cabeçaparada, a fase cabe na tela

Tutorial passo a passo

Parte A. O mapa (40 min)

  1. No papel, desenhe a fase em escala (1 quadradinho = 32 px; 75 quadradinhos de largura). Marque três trechos de chão, dois buracos e cinco plataformas. Use o mapa do jogo de referência como modelo: chão de 0 a 640, de 736 a 1344 e de 1440 a 2400.

Parte B. Montar a fase (60 min)

  1. Estique e copie instâncias de Chao seguindo o seu mapa.
  2. Visualizar. O jogador sai da tela pela direita. Falta a câmera.

Parte C. Câmera (40 min)

  1. Evento sem condição. Ação Centralizar a câmera em um objeto → Jogador, camada base.
  2. Segunda ação no mesmo evento: Impor limites da câmera → esquerda 0, superior 0, direita 2400, inferior 600, camada base.

Parte D. Camadas (60 min)

  1. No editor de cena, abra o painel de camadas (botão Abrir Painel de Camadas na barra de cima do editor de cena) e crie Ceu, Interface e Pausa. Deixe Ceu abaixo da camada base e as outras duas acima.
  2. Objeto Ceu (Sprite com ceu.png) numa instância em (0, 0) na camada Ceu.
  3. Objeto Texto Placar em (16, 12) na camada Interface.
  4. Visualizar. O céu e o placar ficam parados; a fase rola.

Imagens

  • Captura real, evento da câmera ("Centralizar câmera em Jogador (camada: Camada base)" e "Forçar limites da câmera (esquerda: 0, superior: 0, direita: 2400, inferior: 600, camada: Camada base)"): recursos/imagens/gdevelop/captura-trilha-eventos-2.png.
  • Captura real, jogo rodando com o céu atrás, a fase no meio e o placar na frente: recursos/imagens/gdevelop/trilha-tela-jogo.png.
  • Captura real do editor de cena (do Módulo 3, mesma interface): recursos/imagens/gdevelop/captura-editor-cena.png.

Indicação da interface

ItemOnde fica
Abrir Painel de Camadasbarra de ícones do editor de cena, à direita (ícone de folhas empilhadas)
Camada de uma instânciapainel Propriedades da instância
Ações de câmerajanela de ações, grupo de camadas e câmeras (pesquisar "câmera")

O código completo

Comentário: Câmera segue o jogador sem mostrar fora da fase.
Condição: (nenhuma)
Ações:    Centralizar câmera em Jogador (camada: Camada base)
          Forçar limites da câmera (esquerda: 0, superior: 0, direita: 2400, inferior: 600,
          camada: Camada base)

Explicação do código

  • A ordem importa: primeiro centraliza, depois limita. Ao contrário, o limite seria desfeito pela centralização.
  • O evento roda todo quadro; a câmera acompanha sem atraso. Uma câmera "macia" (que chega devagar) é desafio avançado.

Resultado esperado (testado)

Teste automático: com o jogador em x = 1500 a câmera ficou a menos de 5 px do centro dele; com o jogador em x = 50 a câmera parou em meia tela (383 px na janela do teste), sem mostrar nada à esquerda; a câmera da camada Ceu não se moveu.

Problemas comuns

SintomaCausaSolução
O placar some quando a fase rolaPlacar na camada basemover para Interface
O céu desliza com a faseCéu na camada basemover para Ceu
Aparece faixa vazia no começofalta Impor limites da câmeraadicionar depois de centralizar
O céu cobre tudocamada Ceu acima da basedescer a camada no painel

Exercício guiado

A fase tem 2400 px e a câmera mostra 800 px. Com o jogador em x = 2350, onde fica o centro da câmera? (Resposta: 2000, porque o limite direito é 2400 e meia tela é 400.)

Desafio individual

Faça um céu em duas partes: a serra ao longe numa camada que anda devagar (metade da velocidade da câmera). Dica: posicione a câmera da camada Ceu com uma conta a partir da câmera da camada base.

Desafio avançado (opcional)

Câmera macia: em vez de centralizar, mude o centro da câmera um pouco a cada quadro na direção do jogador (por exemplo, 10% da distância).

Critérios de avaliação

  • Fase de três telas com câmera presa aos limites.
  • Céu e placar em camadas próprias.

Checklist de conclusão

Extensão

Escalas de mapa: calcule quanto mede a sua fase em "metros" se o sertanejo (48 px) tem 1,70 m.