Construct do Zero: Layouts, Camadas e Sistema de Telas (Scenes)

O que é um Layout (Scene) na prática

Em Construct, Layout é uma tela do seu jogo. Pense nele como um “palco” onde os objetos aparecem, se movem e interagem. Normalmente, um jogo 2D usa vários layouts, por exemplo:

• Menu: botões de iniciar, opções, créditos.
• Fase: gameplay (personagem, inimigos, cenário, HUD).
• Game Over: mensagem de derrota, botão de tentar novamente.

Cada layout tem seu próprio tamanho, camadas, plano de fundo e objetos posicionados. A troca de um layout para outro será feita por eventos (no próximo capítulo), mas aqui vamos montar as telas e planejar as transições.

Camadas (Layers): ordem, parallax e UI fixa

Dentro de um layout, os objetos são organizados em camadas. Camadas controlam três coisas essenciais:

1) Ordem de renderização (o que fica na frente)

Camadas acima desenham por cima das camadas abaixo. Exemplo típico:

• Background (fundo) fica atrás de tudo.
• World (mundo do jogo) fica no meio.
• UI (interface) fica por cima.

Além da ordem entre camadas, cada camada também tem sua própria ordem interna (Z order) para objetos na mesma camada, mas o mais importante para começar é: UI em uma camada acima evita que ela seja “coberta” pelo cenário.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

2) Parallax (sensação de profundidade)

Parallax é quando o fundo se move mais devagar que o primeiro plano, criando profundidade. Em Construct, isso é controlado por Parallax X/Y da camada:

• 100,100: a camada acompanha a câmera normalmente.
• 50,50: a camada se move pela metade do deslocamento da câmera (parece mais distante).
• 0,0: a camada não se move com a câmera (útil para UI fixa, dependendo do seu setup).

Você pode ter várias camadas de fundo com parallax diferente para um efeito mais rico (ex.: céu 20%, montanhas 40%, árvores 70%).

3) UI fixa (HUD que não “anda” com o mundo)

Em jogos com câmera seguindo o personagem, o mundo se move, mas a UI deve ficar fixa na tela. A forma mais comum é criar uma camada chamada UI e configurar o comportamento dela para não acompanhar o movimento do mundo (por parallax e/ou propriedades de “seguir viewport”, dependendo da versão). A ideia é: o mundo pode rolar, a UI permanece estável.

Criando múltiplos layouts (Menu, Fase01, GameOver)

O objetivo é criar três layouts separados e coerentes, com camadas bem definidas, para que no próximo capítulo você apenas conecte tudo com eventos.

Passo a passo: criar os layouts

• Crie um layout chamado Menu.
• Crie um layout chamado Fase01.
• Crie um layout chamado GameOver.

Dica de organização: use nomes consistentes e sem espaços (ex.: Fase01 em vez de Fase 01) para facilitar referências futuras.

Tamanho do layout, viewport e “o que o jogador vê”

Dois conceitos se confundem no início:

• Tamanho do Layout: o tamanho do “mundo” daquela tela (pode ser maior que a tela visível).
• Viewport (janela visível): a área que o jogador enxerga de cada vez (normalmente ligada à resolução do projeto).

No Menu e no GameOver, geralmente o layout pode ter o mesmo tamanho do viewport (uma tela estática). Na Fase01, o layout costuma ser maior (fase com rolagem).

Passo a passo: definir tamanhos sugeridos

• Menu: layout do tamanho do viewport (ex.: 1280x720 ou o tamanho do seu projeto).
• GameOver: layout do tamanho do viewport.
• Fase01: layout maior (ex.: 4000x720 para rolagem horizontal, ou 1280x3000 para vertical).

Escolha um formato (horizontal ou vertical) já pensando no tipo de jogo que você quer montar.

Backgrounds: cor sólida, imagem e repetição

O fundo pode ser simples (cor sólida) ou composto (imagens em camadas). Para começar, use algo que ajude a diferenciar claramente cada tela.

Passo a passo: configurar um fundo simples por layout

• No Menu, use um fundo com cor/arte que remeta a “início”.
• Na Fase01, use um fundo de cenário (céu, montanhas etc.).
• No GameOver, use um fundo mais escuro ou com contraste para destacar a mensagem.

Se usar imagens grandes, verifique se elas cobrem o viewport. Se usar imagens menores, considere repetição (tiling) em uma camada de fundo.

Grades, snapping e alinhamento preciso

Para montar telas limpas (principalmente Menu e UI), você vai usar grid e snapping para alinhar elementos sem “olhômetro”.

Como pensar na grade

• Menu/UI: grades como 8, 16 ou 32 px ajudam a manter espaçamentos consistentes.
• Fase com tiles: se você pretende usar tiles de 16x16 ou 32x32, configure a grade para esse tamanho.

Passo a passo: prática de alinhamento

• Ative a grade e ajuste o tamanho (ex.: 16 ou 32).
• Ative o snapping para “grudar” objetos na grade.
• Posicione botões e textos alinhados (mesma largura, mesmo espaçamento vertical).
• Na fase, posicione plataformas/elementos respeitando múltiplos do tamanho do tile.

Resultado esperado: elementos com margens e espaçamentos regulares, facilitando leitura e estética.

Pontos de referência: origem (0,0), centro e anchors

Para evitar confusão ao posicionar objetos e UI, você precisa dominar referências:

Origem do layout (0,0)

O ponto (0,0) é o canto superior esquerdo do layout. Coordenadas aumentam para a direita (X) e para baixo (Y). Isso influencia posicionamento e também cálculos futuros em eventos.

Origem do objeto (origin point)

Todo objeto tem um ponto de origem (geralmente no centro). Rotação, escala e posicionamento usam essa origem. Para UI e botões, uma origem central costuma facilitar centralização; para sprites de plataforma, às vezes faz sentido origem no “pé” (depende do seu padrão).

Anchors (ancoragem) para UI

Anchors são a ideia de “prender” um elemento a uma borda/canto da tela. Mesmo antes de implementar eventos, planeje:

• Placar no canto superior esquerdo.
• Vida no canto superior direito.
• Botão de pause no topo.

Se o jogo tiver diferentes resoluções, ancoragem evita que a UI “escape” para fora da área visível.

Estrutura recomendada de camadas para cada layout

Menu

Fase01

GameOver

Passo a passo prático: montar os 3 layouts

1) Layout Menu

• Crie as camadas BG e MenuUI.
• No BG, defina uma cor de fundo ou uma imagem.
• No MenuUI, crie e posicione: TituloJogo, BtnJogar, BtnSair (ou BtnOpcoes).
• Use grade e snapping para alinhar os botões com espaçamento consistente (ex.: 24 ou 32 px entre eles).
• Planeje áreas clicáveis: botões devem ter tamanho confortável (ex.: altura mínima ~64 px em 720p).

2) Layout Fase01

• Defina o tamanho do layout maior que o viewport (ex.: 4000x720).
• Crie camadas BG_Sky, BG_Mid, World e UI.
• Configure parallax: BG_Sky (20/20), BG_Mid (50/50), World (100/100).
• Adicione elementos de cenário nas camadas de BG (imagens ou tiles repetidos).
• No World, posicione um “chão” e algumas plataformas simples (mesmo que ainda não exista personagem).
• No UI, posicione placeholders: TxtVida, TxtScore, IconeVida. Alinhe ao topo usando grade.

Importante: mesmo sem eventos, já deixe a fase “legível”: fundo, área jogável e HUD separados por camadas.

3) Layout GameOver

• Crie camadas BG e Overlay.
• No BG, use uma cor escura ou imagem desfocada/escurecida.
• No Overlay, coloque: TxtGameOver, BtnTentarNovamente, BtnVoltarMenu.
• Centralize o bloco (texto + botões) no viewport e alinhe com snapping.

Planejamento das transições (para implementar com eventos depois)

Você vai preparar um “mapa” simples de navegação entre layouts. Isso evita improviso e acelera a implementação no capítulo seguinte.

Fluxo sugerido

• Menu → (clicar BtnJogar) → Fase01
• Fase01 → (condição de derrota) → GameOver
• GameOver → (clicar BtnTentarNovamente) → Fase01
• GameOver → (clicar BtnVoltarMenu) → Menu

Checklist de preparação (sem eventos ainda)

• Os botões existem e têm nomes claros (BtnJogar, BtnVoltarMenu etc.).
• Cada layout tem camadas organizadas (BG, World, UI).
• UI está em camada separada e posicionada no viewport.
• Parallax configurado nas camadas de fundo da fase.
• Grade e snapping usados para alinhamento consistente.

Atividade prática (obrigatória): 3 layouts prontos para conectar

Monte os layouts Menu, Fase01 e GameOver com as camadas sugeridas e, em cada um, deixe os elementos abaixo posicionados:

• Menu: fundo + título + 2 botões (Jogar e Sair/Opções).
• Fase01: fundo com pelo menos 2 camadas de parallax + chão/plataformas no World + HUD com Vida e Score.
• GameOver: fundo + texto “Game Over” + botões (Tentar novamente e Voltar ao menu).

Em um papel ou documento, escreva o fluxo de transição exatamente como você quer (Menu → Fase01 → GameOver → Menu/Fase01). No próximo capítulo, você vai transformar esse planejamento em eventos de troca de layout.